jQuery UI Widgets › Forums › Chart › JSON not binding to donut chart
This topic contains 2 replies, has 2 voices, and was last updated by nickgowdy 10 years, 3 months ago.
Viewing 3 posts - 1 through 3 (of 3 total)
-
Author
-
Hello,
I want to bind this JSON to the donut chart:
[ { "SectionCount": 23, "SectionStatus": "Completed" }, { "SectionCount": 13, "SectionStatus": "In progress" }, { "SectionCount": 45, "SectionStatus": "New" } ]
However I can’t see the chart in the div. This is my code:
function createFunnel(data) { $('#jqxwindow-funnel').jqxWindow('open'); var source = { datatype: "json", datafields: [ { name: 'SectionCount' }, { name: 'SectionStatus' } ], url: '@Url.Action("AjaxFunnelData", "KPIs")' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); // prepare jqxChart settings var settings = { title: "Enquiry Status", enableAnimations: true, showLegend: true, showBorderLine: true, legendLayout: { left: 520, top: 170, width: 300, height: 200, flow: 'vertical' }, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 0, top: 0, right: 0, bottom: 10 }, seriesGroups: [ { type: 'donut', offsetX: 250, source: dataAdapter, colorScheme: 'scheme02', series: [ { dataField: 'SectionStatus', displayText: 'SectionCount', labelRadius: 120, initialAngle: 10, radius: 70, innerRadius: 30, centerOffset: 0, formatSettings: { sufix: '%', decimalPlaces: 1 } } ] } ] }; // setup the chart $('#chartContainer-funnel').jqxChart(settings); };
<div id='jqxwindow-funnel' caption="Funnel Chart"> <div id='jqxTabs-funnel'> <ul> <li>Current</li> </ul> <div> <div id='chartContainer-funnel' style="width: 400px; height: 400px;"> </div> </div> </div> </div>
My JSON is fairly simple so can anyone see why this wouldn’t be working? My dataAdapter works because I can see the JSON in the console.window
Kind regards,
NickHello Nick,
Instead of:
dataField: 'SectionStatus', displayText: 'SectionCount',
you should have:
dataField: 'SectionCount', displayText: 'SectionStatus',
and your chart should be correctly displayed.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hello Dimitar,
Thanks for your help. The problem was quite simple to fix.
Kind regards,
Nick -
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.