jQuery UI Widgets › Forums › Chart › Stacked Column Chart with Different DataSets between Series
Tagged: chart, dynamic, jqxChart, series, stackedcolumn
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 9 months ago.
-
Author
-
I’ve been looking through the forum and documentation and I can’t seem to figure this one out. I have the following information in XML
<?xml version="1.0" encoding="UTF-8"?><regions> <region id="01"> <location> <name>Germany</name> <items>18</items> </location> <location> <name>Brussels</name> <items>2</items> </location> </region> <region id="02"> <location> <name>Czech Republic</name> <items>2</items> </location> </region> <region id="03"> <location> <name>Thailand</name> <items>2</items> </location> </region> <region id="05"> <location> <name>Brazil</name> <items>10</items> </location> <location> <name>Panama</name> <items>1</items> </location> </region></regions>
So I was hoping to have a stacked column chart with the total number of items as the Y axis and the Region ID as the X axis with the column having a division between each location listed. For example, Region 01 would have a column up to 18 with a Label of Germany and additional section up to 20 with a Label of Brussels, etc. for each Region.
However, I can only find examples where all of the data sets have the same series, i.e.
var sampleData = [
{ Day: ‘Monday’, Running: 30, Swimming: 0, Cycling: 25 },
{ Day: ‘Tuesday’, Running: 25, Swimming: 25, Cycling: 0 },
{ Day: ‘Wednesday’, Running: 30, Swimming: 0, Cycling: 25 },
{ Day: ‘Thursday’, Running: 35, Swimming: 25, Cycling: 45 },
{ Day: ‘Friday’, Running: 0, Swimming: 20, Cycling: 25 },
{ Day: ‘Saturday’, Running: 30, Swimming: 0, Cycling: 30 },
{ Day: ‘Sunday’, Running: 60, Swimming: 45, Cycling: 0 }
];Where the sections of the column chart are only able to be running, swimming, and cycling.
My data has over 300 locations and I don’t want to add each location to the series because that location will only show up under that single region.
Let me know if I can clarify this any more.
Hello
Here is the closest solution to your requirement:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.3.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/jqxchart.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare chart data as an array var sampleData = [ { Region: "01", Germany: 18, Brussels: 2 }, { Region: "02", "Czech Republic": 2 }, { Region: "03", Thailand: 2 }, { Region: "05", Brazil: 10, Panama: 1 } ]; // prepare jqxChart settings var settings = { title: "Fitness & exercise weekly scorecard", description: "Time spent in vigorous exercise by activity", enableAnimations: true, showLegend: true, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData, categoryAxis: { text: 'Category Axis', textRotationAngle: 0, dataField: 'Region', showTickMarks: true, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, showGridLines: false, gridLinesInterval: 1, gridLinesColor: '#888888', axisSize: 'auto' }, colorScheme: 'scheme06', seriesGroups: [ { type: 'stackedcolumn', columnsGapPercent: 100, seriesGapPercent: 5, valueAxis: { unitInterval: 10, minValue: 0, displayValueAxis: true, description: 'Items', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'Germany', displayText: 'Germany' }, { dataField: 'Brussels', displayText: 'Brussels' }, ] }, { type: 'stackedcolumn', columnsGapPercent: 100, seriesGapPercent: 1, valueAxis: { unitInterval: 10, minValue: 0, maxValue: 100, displayValueAxis: false, description: 'Items', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'Czech Republic', displayText: 'Czech Republic' }, ] }, { type: 'stackedcolumn', columnsGapPercent: 100, seriesGapPercent: 1, valueAxis: { unitInterval: 10, minValue: 0, maxValue: 100, displayValueAxis: false, description: 'Items', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'Thailand', displayText: 'Thailand' }, ] }, { type: 'stackedcolumn', columnsGapPercent: 100, seriesGapPercent: 1, valueAxis: { unitInterval: 10, minValue: 0, maxValue: 100, displayValueAxis: false, description: 'Items', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'Brazil', displayText: 'Brazil' }, { dataField: 'Panama', displayText: 'Panama' } ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); }); </script></head><body class='default'> <div id='jqxChart' style="width: 680px; height: 400px;" /></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.