dynamically switching on and off series

[Aboo]

Hello 
I have multiple series running on a graph of type line . now my client requires that the visibility of each of the series be externally controlled. that is for example if i have a div or li list of series somewhere on the page clicking them i should be able to toggle the visibility of respective series on the graph . for example clicking <div>series A</div> should toggle the visibility of 'series A' on the graph.
I wonder if this is in the scope of the kendo dataviz

[Hristo Germanov]

Hello Aboo,

Thank you for contacting us.

You can try to remove one of your series and then you can call refresh().

var chart = $("#chart").data("kendoChart");
chart.options.series.splice(0, 1);
chart.refresh();

Greetings,
Hristo Germanov
the Telerik team

[Aboo]

i couldnt find that in the documentation .. would be grateful if you can link me . so that i understand more abt its capabilities

[Hristo Germanov]

Hello Aboo,

There is no documentation for this. When you create a chart you can access the series of the chart from chart.options. Then if you want to remove one of them you can use splice javacript method. After that you need to refresh your chart with the chart's refresh method.

Kind regards,
Hristo Germanov
the Telerik team

[Gergely]

Hello,
I want to achieve the same as Aboo, and i tried to solve it with this splice() method, and there is no problem to take out one of the series, but when I put it back, it doesn’t show correctly.
I made a workaround, trying to replace the series in the chart.options you can try it here: http://jsfiddle.net/mgeri/yPGxL/

What i see here is that the ponits are where they shold be, but it doesn't draw the lines. What did i forgot, or tried wrong?

[Thorne]

Has there been a resolution to Gergely's line problem? 

[Barbaros Saglamtimur]

Based on Gergely demo, I ended up with this solution. Basically, I call a function to draw chart and pass series as a parameter.

HTML :

<h1>

        Chart Refresh Test</h1>

    <div id="cbs">

        <label for="cb1">

            Data1</label>

        <input type="checkbox" id="cb1" checked="checked" />

        <label for="cb2">

            Data2</label>

        <input type="checkbox" id="cb2" checked="checked" /><br />

    </div>

    <button id="refresh">

        Refresh</button>

    <button id="init">

        Init</button>

    <div id="chart">

    </div>

JavaScript :

  var datas = [{ "value1": 10, "value2": 5, "category": 1 },

                 { "value1": 8, "value2": 7, "category": 2 },

                 { "value1": 9, "value2": 4, "category": 3 },

                 { "value1": 7, "value2": 5, "category": 4 },

                 { "value1": 11, "value2": 6, "category": 5}],

ds = new kendo.data.DataSource({

    data: datas

});

 

    $("#init").click(function () {

        var initialSeries = [];

        initialSeries.push({

            field: "value1",

            name: "data1"

        });

        initialSeries.push({

            field: "value2",

            name: "data2"

        });

        drawChart(initialSeries);

 

    });

 

    $("#refresh").click(function () {

        var costumSeries = [];

        if ($("input:first:checked", "#cbs").length == 1) {

            costumSeries.push({

                field: "value1",

                name: "data1"

            });

        }

 

        if ($("input:last:checked", "#cbs").length == 1) {

            costumSeries.push({

                field: "value2",

                name: "data2"

            });

        }

        drawChart(costumSeries);

    });

 

    function drawChart(theSeries) {

 

        var theChart = $("#chart").data("kendoChart");

        if (theChart) {

            theChart.destroy();

        }

        $("#chart").kendoChart({

            theme: $(document).data("kendoSkin") || "default",

            legend: {

                position: "bottom"

            },

            dataSource: ds,

            seriesDefaults: {

                type: "line"

            },

            series: theSeries,

            categoryAxis: {

                field: "category"

            }

        });

    }

Any improvements are welcome.

[Guillermo]

Hi all,

Another option is to play with the visual properties of the series. If you have a line chart, you can set the width = 0 to make that serie disappear. 

In my case, I have a chart with 1 visible serie CSS and 1 optional State. 

First:
Create the chart with all series:

series : [ {

width: 4,

markers : {visible : true},

name : "CSS",

field : category,

color : "#CC0000"

},{

width: 2,

markers : { visible : false},

name: "State",

field : "State" + category,

color : "#000000"}

]

Second:
To make State invisible:

var c = $("#chart").data("kendoChart");

if(c != null){

 if(scope != "state"){

  c.options.series[1].width = 0;

 }

 c.dataSource.data(data);

}

Opacity is another property to play with. The only disadvantage is that if you have a legend displayed, all series will show up.