jQuery UI Widgets › Forums › Chart › x-axis labels, other json data
Tagged: Angular chart, chart, jquery chart, jqxChart, json, type, x-axis, xAxis, year
This topic contains 6 replies, has 3 voices, and was last updated by Dimitar 8 years, 11 months ago.
-
Author
-
hello:
Question #1:
I want the x-axis labels on my stacked line graph to be years as presented in my json data.The json looks like this:
{ "yearData":[ { "year":"2008", "installs":0, "noGo":0, "pickups":0 }, { "year":"2009", "installs":11, "noGo":0, "pickups":25 }, { "year":"2010", "installs":18, "noGo":0, "pickups":3 }, { "year":"2011", "installs":9, "noGo":0, "pickups":10 }, { "year":"2012", "installs":11, "noGo":2, "pickups":1 }, { "year":"2013", "installs":10, "noGo":2, "pickups":2 }, { "year":"2014", "installs":13, "noGo":5, "pickups":5 }, { "year":"2015", "installs":12, "noGo":0, "pickups":9 } ], "error":"0" }
my script looks like this
var source = { datatype: "json", datafields: [ { name: 'year'}, { name: 'installs'}, { name: 'noGo'}, { name: 'pickups'} ], id: 'id', url: cgiString }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alertify.alert('Error loading "' + source.url + '" : ' + error); } }); // prepare jqxChart settings var settings = { title: "wireless growth comparison chart", description: "install,no-go,pickup comparison", enableAnimations: true, showLegend: true, padding: { left: 5, top: 5, right: 11, bottom: 5 }, titlePadding: { left: 10, top: 0, right: 0, bottom: 10 }, source: dataAdapter, xAxis: { dataField: 'year', type: 'date', baseUnit: 'year', valuesOnTicks: true, labels: { formatFunction: function (value) { return value.getDate(); } } }, valueAxis: { unitInterval: 1, minValue: 0, maxValue: 40, labels: {horizontalAlignment: 'right'}, title: { text: 'category counts<br>' } }, colorScheme: 'scheme01', seriesGroups: [ { type: 'stackedline', series: [ { dataField: 'installs', displayText: 'installs' }, { dataField: 'noGo', displayText: 'noGo' }, { dataField: 'pickups', displayText: 'pickups' } ] } ] }; // setup the chart $('#cResults').jqxChart(settings);
My chart always has “31” for the only date on the x-axis.
Question #2
I want to get other data that exists in the json. For example, the example above returns an error code along with the chart data.
How do I get that?thanks
Hello shawn,
Here is an example that, hopefully, answers both your questions:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript"> $(document).ready(function () { var data = { "yearData": [{ "year": "2008", "installs": 0, "noGo": 0, "pickups": 0 }, { "year": "2009", "installs": 11, "noGo": 0, "pickups": 25 }, { "year": "2010", "installs": 18, "noGo": 0, "pickups": 3 }, { "year": "2011", "installs": 9, "noGo": 0, "pickups": 10 }, { "year": "2012", "installs": 11, "noGo": 2, "pickups": 1 }, { "year": "2013", "installs": 10, "noGo": 2, "pickups": 2 }, { "year": "2014", "installs": 13, "noGo": 5, "pickups": 5 }, { "year": "2015", "installs": 12, "noGo": 0, "pickups": 9 }], "error": "0" } var source = { datatype: "json", datafields: [{ name: 'year' }, { name: 'installs' }, { name: 'noGo' }, { name: 'pickups' }], id: 'id', localdata: data }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alertify.alert('Error loading "' + source.url + '" : ' + error); } }); // prepare jqxChart settings var settings = { title: "wireless growth comparison chart", description: "install,no-go,pickup comparison", enableAnimations: true, showLegend: true, padding: { left: 5, top: 5, right: 11, bottom: 5 }, titlePadding: { left: 10, top: 0, right: 0, bottom: 10 }, source: dataAdapter, xAxis: { dataField: 'year', type: 'default', baseUnit: 'year', valuesOnTicks: true }, valueAxis: { unitInterval: 1, minValue: 0, maxValue: 40, labels: { horizontalAlignment: 'right' }, title: { text: 'category counts<br>' } }, colorScheme: 'scheme01', seriesGroups: [{ type: 'stackedline', series: [{ dataField: 'installs', displayText: 'installs' }, { dataField: 'noGo', displayText: 'noGo' }, { dataField: 'pickups', displayText: 'pickups' }] }] }; // setup the chart $('#cResults').jqxChart(settings); $('#getErrorCode').click(function () { alert('Error code is: ' + dataAdapter.loadedData.error + '.'); }); }); </script> </head> <body class='default'> <div id='cResults' style="width: 850px; height: 500px"> </div> <br /> <button id="getErrorCode"> Get error code</button> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/thank looks much better! Thank you.
I have one more question.
The plotted points on the chart do not seem to correspond to the data values from the json.
For instance, the “count” from the data is 25, but it is plotted at 36.
What am I doing wrong? thanks… I see that it is adding the values together, so I suspect I’m using the wrong type of chart.
that was it! I changed “stacked line” to “line” and it’s perfect.
Thanks again!Hello ggg,
The demo Tooltip Formatting may be helpful to you. Please check it out.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.