Change Series Visibility With Checkbox

[Lance Harwell]

I'm using an EJS chart which has 8 different series. I have all but 1 of these visibility property set to false on load. In addition, I have 8 EJS checkboxes that correspond to each chart series. I would like to be able to toggle visibility client side when the corresponding checkbox is toggled. I am pasting an example of each control below. Can you help me understand how I should go about this?

series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("ChartTimeString")

   .YName("Prior7Days").DataSource(ViewBag.WaitingRoomPTDatasource).Name("Prior7Days").Visible(false).Add();

@Html.EJS().CheckBox("chkPrior7").Label("Prior 7 Days").Name("chkPrior7").CssClass("lbl").Checked(false).Render()

[Dharanidharan Dharmasivam]

Hi Lance, 

 

Greetings from Syncfusion. 

 

We have analyzed your query with the provided code snippet. We have prepared a sample in which we have eight check boxes for eight series. Using the change event of check box, we can toggle the visibility of the series. Find the code snippet below to achieve this requirement.  

 

[ChartFeatures.cshtml] 

 

@Html.EJS().CheckBox("chkPrior7").Checked(false).Change("Series1Visibility").Render() 

 

function Series1Visibility(args) { 

        var index = 0;  

        ChartRefresh(index, args.checked); 

    } 

 

function ChartRefresh(seriesIndex, seriesVisibility) {            

        Get instance of chart 

        var chartObj = document.getElementById('container').ej2_instances[0]; 

        Apply the series visibility based on check box and then refresh the chart 

        chartObj.series[0].visible = seriesVisibility; 

        chartObj.refresh(); 

    } 

 

 

This can be changed based on your scenario. 

Screenshot: 

 

 

Sample: http://www.syncfusion.com/downloads/support/forum/141190/ze/chartSample-809878915  

 

Thanks, 

Dharani.