dynamically switching on and off series

8 posts, 1 answers
  1. Aboo
    Aboo avatar
    4 posts
    Member since:
    May 2012

    Posted 02 May 2012 Link to this post

    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
  2. Answer
    Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 02 May 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Aboo
    Aboo avatar
    4 posts
    Member since:
    May 2012

    Posted 02 May 2012 Link to this post

    i couldnt find that in the documentation .. would be grateful if you can link me . so that i understand more abt its capabilities
  5. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 02 May 2012 Link to this post

    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!
  6. Gergely
    Gergely avatar
    1 posts
    Member since:
    Mar 2012

    Posted 10 May 2012 Link to this post

    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?

  7. Thorne
    Thorne avatar
    3 posts
    Member since:
    Jul 2012

    Posted 22 Jul 2012 Link to this post

    Has there been a resolution to Gergely's line problem? 
  8. Barbaros Saglamtimur
    Barbaros Saglamtimur avatar
    110 posts
    Member since:
    Jul 2012

    Posted 31 Jul 2012 Link to this post

    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.
  9. Guillermo
    Guillermo  avatar
    11 posts
    Member since:
    Feb 2012

    Posted 02 Aug 2012 Link to this post

    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. 
Back to Top
Kendo UI is VS 2017 Ready