jQuery UI Widgets Forums Chart changing data series

This topic contains 4 replies, has 2 voices, and was last updated by  RCW 10 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • changing data series #28250

    RCW
    Participant

    I have a graph that uses two data series, one for a spline chart and one for a stacked column chart.

    On initial load I do not put any data in the stacked column chart in order to show only the spline chart, so the seriesGroup, series is simply:

    series: [ ]// initialise as a null array

    Which loads OK without any errors and doesn’t show the stacked column data. I then have a simple Toggle Button that turns the stacked column on or off:

    $("#jqxToggle").jqxToggleButton({ width: '75', toggled: false, theme: theme });
    $("#jqxToggle").on('click', function() {
    var toggled = $("#jqxToggle").jqxToggleButton('toggled');
    if (toggled) {
    $("#jqxToggle")[0].value = 'STACKED ON';
    cocToggle(toggled);
    }
    else $("#jqxToggle")[0].value = 'STACKED OFF';
    cocToggle(toggled);
    });
    // data for stacked column series:
    var stackedON = [
    {dataField: 'pers', displayText: 'Persons', color: '#B2ECFF'},
    {dataField: 'mal', displayText: 'Males', color: '#FFCC80'},
    {dataField: 'fem', displayText: 'Females', color: '#F1DDF6'}
    ];

    I then have a function to place this data into the series:

    // Toggle function 
    function cocToggle(toggle) {
    var dataSeries = $('#jqxChart').jqxChart('seriesGroups');
    // add stacked column data to chart and refresh
    if (toggle) {
    dataSeries[1].series[0] = stackedON[0];
    dataSeries[1].series[1] = stackedON[1];
    dataSeries[1].series[2] = stackedON[2];
    $('#jqxChart').jqxChart('refresh');
    }
    // turn off the stacked column
    else {
    dataSeries[1] = [];
    $('#jqxChart').jqxChart('refresh');
    }

    This works fine. Problem is I keep getting an error on toggling the stacked column off by returning the series to null with this line of code:

    dataSeries[1] = []; 

    I’m not really sure this is the correct way to reset the data in the series .

    Can you advise how to reset the series to null per the way it initially loads so I can toggle the stacked column data on and off.

    Thanks.

    changing data series #28299

    Dimitar
    Participant

    Hello rcwebdev,

    Here is an example, based on the demo Multiple Series Types:

    <!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.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" src="../../jqwidgets/jqxbuttons.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, Goal: 40 },
    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
    { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
    { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
    { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
    { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
    ];
    // 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: 'scheme05',
    seriesGroups:
    [
    {
    type: 'spline',
    valueAxis:
    {
    unitInterval: 10,
    minValue: 0,
    maxValue: 100,
    displayValueAxis: false,
    description: 'Goal in minutes',
    axisSize: 'auto',
    tickMarksColor: '#888888'
    },
    series: [
    { dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
    ]
    },
    {
    type: 'stackedcolumn',
    columnsGapPercent: 100,
    seriesGapPercent: 5,
    valueAxis:
    {
    unitInterval: 10,
    minValue: 0,
    maxValue: 100,
    displayValueAxis: true,
    description: 'Time in minutes',
    axisSize: 'auto',
    tickMarksColor: '#888888',
    gridLinesColor: '#777777'
    },
    series: []
    }
    ]
    };
    // setup the chart
    $('#jqxChart').jqxChart(settings);
    var groups = $('#jqxChart').jqxChart('seriesGroups');
    $("#jqxToggle").jqxToggleButton({ width: '200', toggled: false });
    $("#jqxToggle").on('click', function () {
    var toggled = $("#jqxToggle").jqxToggleButton('toggled');
    if (toggled) {
    $("#jqxToggle")[0].value = 'Toggled On';
    groups[1].series = [
    { dataField: 'Running', displayText: 'Running' },
    { dataField: 'Swimming', displayText: 'Swimming' },
    { dataField: 'Cycling', displayText: 'Cycling' }
    ];
    } else {
    $("#jqxToggle")[0].value = 'Toggled Off';
    groups[1].series = [];
    };
    $('#jqxChart').jqxChart("refresh");
    });
    });
    </script>
    </head>
    <body class='default'>
    <input style='margin-left: 25px;' type="button" value="Toggled Off" id='jqxToggle' />
    <div id='jqxChart' style="width: 680px; height: 400px">
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    changing data series #28313

    RCW
    Participant

    Many Thanks Dimitar.

    Also found that if I have a variable to hold the series as above I can use this to remove them :

    series.splice(0,3);

    Oddly using a push() method to load a series:

    myseries.push({dataField:'Running', displayText: 'Running'}); 

    Causes two data series for ‘Running’ to load ?

    RCW

    changing data series #28368

    Dimitar
    Participant

    Hi

    Here is a modified code excerpt from the example which shows that series can be spliced and pushed without any issues:

    $("#jqxToggle").on('click', function () {
    var toggled = $("#jqxToggle").jqxToggleButton('toggled');
    if (toggled) {
    $("#jqxToggle")[0].value = 'Toggled On';
    groups[1].series.push({ dataField: 'Running', displayText: 'Running' }, { dataField: 'Swimming', displayText: 'Swimming' }, { dataField: 'Cycling', displayText: 'Cycling' });
    } else {
    $("#jqxToggle")[0].value = 'Toggled Off';
    groups[1].series.splice(0, 3);
    };
    $('#jqxChart').jqxChart("refresh");
    });

    Best Regards,
    Dimitar

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

    changing data series #28461

    RCW
    Participant

    Thanks Dimitar, appreciate you providing this code !

    RCW

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

You must be logged in to reply to this topic.