jQuery UI Widgets Forums Chart Stacked Column Chart with Different DataSets between Series

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 10 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • msrost
    Member

    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.

    • This topic was modified 10 years, 9 months ago by  msrost.

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.