This is a migrated thread and some comments may be shown as answers.

dynamically switching on and off series

7 Answers 478 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Aboo
Top achievements
Rank 1
Aboo asked on 02 May 2012, 01:28 PM
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

7 Answers, 1 is accepted

Sort by
0
Accepted
Hristo Germanov
Telerik team
answered on 02 May 2012, 03:32 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Aboo
Top achievements
Rank 1
answered on 02 May 2012, 03:44 PM
i couldnt find that in the documentation .. would be grateful if you can link me . so that i understand more abt its capabilities
0
Hristo Germanov
Telerik team
answered on 02 May 2012, 04:05 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gergely
Top achievements
Rank 1
answered on 10 May 2012, 12:04 PM

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?

0
Thorne
Top achievements
Rank 1
answered on 23 Jul 2012, 04:07 AM
Has there been a resolution to Gergely's line problem? 
0
Barbaros Saglamtimur
Top achievements
Rank 1
answered on 31 Jul 2012, 08:03 AM
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.
0
Guillermo
Top achievements
Rank 1
answered on 02 Aug 2012, 06:21 PM
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. 
Tags
Charts
Asked by
Aboo
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Aboo
Top achievements
Rank 1
Gergely
Top achievements
Rank 1
Thorne
Top achievements
Rank 1
Barbaros Saglamtimur
Top achievements
Rank 1
Guillermo
Top achievements
Rank 1
Share this question
or