changing data series - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, jqxChart, multiple, series, toggle

This topic contains 4 replies, has 2 voices, and was last updated by RCW 11 years, 1 month ago.

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

Author

changing data series Posts

September 3, 2013 at 4:20 pm 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.

September 4, 2013 at 10:51 am 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/

September 4, 2013 at 1:57 pm 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

September 5, 2013 at 5:11 am changing data series #28368

Dimitar

Participant

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/

September 6, 2013 at 2:13 pm changing data series #28461

RCW

Participant

Thanks Dimitar, appreciate you providing this code !

RCW

Author

Posts

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

You must be logged in to reply to this topic.