Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is the below code which i used in one of the application, i hope this will help you. In the below code i'm using ajax calls i'm parsing the request to json and that dataset i'm using to jqplot chart.</p> <pre><code> var barseries = new Array(); var lineseries = new Array(); var barseries2 = new Array(); var lineseries2 = new Array(); var Items = JSON.parse(xhAreaName.responseText);//Parsing the xhr response to json for (var i = 0; i &lt; Items.GetChartDataResult.length; i++) { barseries[i] = new Array(2); lineseries[i] = new Array(2); barseries2[i] = new Array(2); lineseries2[i] = new Array(2); barseries[i][0] = Items.GetChartDataResult[i].AreaName; barseries[i][1] = Items.GetChartDataResult[i].Actual * 1000; barseries2[i][0] = Items.GetChartDataResult[i].AreaName; barseries2[i][1] = Items.GetChartDataResult[i].Budget * 1000; lineseries[i][0] = Items.GetChartDataResult[i].AreaName; lineseries[i][1] = Items.GetChartDataResult[i].AttainValue * 100; lineseries2[i][0] = Items.GetChartDataResult[i].AreaName; lineseries2[i][1] = Items.GetChartDataResult[i].Target * 100; $('.jqplot-series-' + i).css('color', '#ffffff'); } var plot1 = $.jqplot('AreaNameChart', [barseries, lineseries, barseries2, lineseries2], { series: [{ renderer: $.jqplot.BarRenderer }, { xaxis: 'x2axis', yaxis: 'y2axis' }, { renderer: $.jqplot.BarRenderer }, { xaxis: 'xaxis', yaxis: 'y2axis' }], seriesDefaults: { pointLabels: { show: true }, rendererOptions: { fillToZero: true } }, axesDefaults: { show: false, tickRenderer: $.jqplot.CanvasAxisTickRenderer, rendererOptions: { drawBaseline: false } }, grid: { backgroundColor: 'transparent', color: 'White' }, //legend: { // show: true, // placement: 'outsideGrid' //}, axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, tickOptions: { showGridline: false } }, x2axis: { renderer: $.jqplot.CategoryAxisRenderer, tickOptions: { showGridline: false, showTicks: false }, labelOptions: { show: true, }, }, yaxis: { pad: 1.05, tickOptions: { formatString: '$%d', showGridline: false, labelPosition: 'middle' } }, y2axis: { tickOptions: { formatString: '%d%', showGridline: false, labelPosition: 'middle' } } }, seriesColors: ["#1e98e4", "#98b954", "#ffc500", "#695188"], </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload