We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Change Series Visibility With Checkbox

Thread ID:

Created:

Updated:

Platform:

Replies:

141190 Nov 29,2018 02:14 AM UTC Nov 29,2018 09:13 AM UTC ASP.NET MVC - EJ 2 1
loading
Tags: Chart
Lance Harwell
Asked On November 29, 2018 02:14 AM UTC

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 [Syncfusion]
Replied On November 29, 2018 09:13 AM UTC

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: 
 
 
 
Thanks, 
Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon