jQuery UI Widgets › Forums › Chart › staked group coloumn chart
Tagged: chart, column, group, jqxChart, series, seriesGroups, stacked, stackedcolumn
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 2 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
hi
I want stacked and group column chartlike this
http://prntscr.com/27wiwwplease give solution asap.
Regards
SarojHello Saroj,
It is possible to achieve this by using two seriesGroups of stackedcolumn series and then hide the valueAxis of one of them. The properties minValue and maxValue of the first group’s valueAxis should be the same as the second one’s minValue and maxValue respectively. Here is an example, based on the demo Stacked Column Series:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head> <title id='Description'>jqxChart Stacked Column Series Example</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.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 = [ { 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 } ]; // 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: 'Day', 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, maxValue: 100, displayValueAxis: true, description: 'Time in minutes', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'Running', displayText: 'Running' }, { dataField: 'Swimming', displayText: 'Swimming' }, { dataField: 'Cycling', displayText: 'Cycling' } ] }, { type: 'stackedcolumn', columnsGapPercent: 100, seriesGapPercent: 5, valueAxis: { unitInterval: 10, minValue: 0, maxValue: 100, displayValueAxis: false, description: 'Time in minutes', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'Running', displayText: 'Running' }, { dataField: 'Swimming', displayText: 'Swimming' }, { dataField: 'Cycling', displayText: 'Cycling' } ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); }); </script> </head> <body class='default'> <div id='jqxChart' style="width: 680px; height: 400px;" /> </body> </html>
-
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.