1

I want to load chart data with a local data.

 <sjc:chart
       id="chartPlaceHolder"
       cssStyle="width: 600px; height: 400px;"
       pie="true"
       pieLabel="true"
       dataType="local"        
   />

Then I used (as mentioned in Refresh/Reload Flot In Javascript)

//This data is created dynamically from a grid when grid completed 
var chartData= [
                { label: "Chrome",  data: 36.3, color: "#89A54E"},
                { label: "Other",  data: 0.8, color: "#3D96AE"}
            ];
var plot = $.plot($('#chartPlaceHolder'));
    plot.setData(chartData);
    plot.setupGrid();
    plot.draw();

I get some jquery exception aB is undefined in jquery APIs

Any comments ?!

Community
  • 1
  • 1
Alireza Fattahi
  • 42,517
  • 14
  • 123
  • 173

1 Answers1

1

You are missing two additional parameters to $.plot().

You should read the basic usage.

Create a placeholder div to put the graph in:

<div id="placeholder"></div>

You need to set the width and height of this div, otherwise the plot library doesn't know how to scale the graph. You can do it inline like this:

<div id="placeholder" style="width:600px;height:300px"></div>

You can also do it with an external stylesheet. Make sure that the placeholder isn't within something with a display:none CSS property - in that case, Flot has trouble measuring label dimensions which results in garbled looks and might have trouble measuring the placeholder dimensions which is fatal (it'll throw an exception).

Then when the div is ready in the DOM, which is usually on document ready, run the plot function:

$.plot($("#placeholder"), data, options);

Here, data is an array of data series and options is an object with settings if you want to customize the plot. Take a look at the examples for some ideas of what to put in or look at the API reference. Here's a quick example that'll draw a line from (0, 0) to (1, 1):

$.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });

EDIT:

You can try below code. It's reloading the chart with data after the chart was created without data.

<sjc:chart
    id="placeholder"
    cssStyle="width: 600px; height: 400px;"
    pie="true"
    pieLabel="true">
</sjc:chart>
<script>
  $(function(){
    var chartData= [
      { label: "Chrome",  data: 36.3, color: "#89A54E"},
      { label: "Other",  data: 0.8, color: "#3D96AE"}
    ];
    var series =  { pie: { show: true }};
    var o = {};
    o.data = chartData;
    o.series= series;
    $.struts2_jquery_chart.chart($("#placeholder"), o);
  });
</script>
Roman C
  • 49,761
  • 33
  • 66
  • 176
  • you are correct. But as I initiate the chart with `sjc:chart` I don't know how to get and path the `data` and `option` I even tried to path them empty parameter but it did not worked. Could you tell me how can I get the plot object – Alireza Fattahi Feb 07 '16 at 13:52
  • Why do you initiate `sjc:chart`? flot is another library for charts. – Roman C Feb 07 '16 at 15:05
  • 1
    `sjc:chart` uses flot under the hood. calling the `sjc:chart` will load all necessary `flot` and `flot.pie` chart js files – Alireza Fattahi Feb 07 '16 at 15:16
  • It's unclear what do you want, the data is in the format `[[]]`, but your data has different format. And you should privide it with `sjc:chartData` list or href attribute – Roman C Feb 07 '16 at 15:36
  • Thanks @RomanC. The data could be an array of json string as mentioned in `http://www.pikemere.co.uk/blog/flot-how-to-create-pie-charts/` . Well let me ask this way.... please see this question http://stackoverflow.com/questions/23326472/struts-2-jquery-grid-load-data-from-json-string which you have been answered. The question was about loading grid data locally. In that example the simple `$("#gridtable")` returned the jqGrid object which then we could easily set its `data` and call `trigger("reloadGrid");` Is it possible to do this with `plot` – Alireza Fattahi Feb 08 '16 at 04:29
  • I'm not sure if you can get `plot` via subscribing to `plotclick` or `plothover`. Let me know if it works for you. jqGrid is a function and it has different API. – Roman C Feb 08 '16 at 23:57