Question

my application is asp.net MVC, using Telerik MVC charts. I am trying to hide and show series using Javascript:

Here is the chart:

@(Html.Telerik().Chart<MyVDC.Models.ChartData.PatientGroupData>()
          .Name("Chart")
           .Title(title => title
            .Text("Representative Sales vs. Total Sales"))
            .Series(series =>
            {
                //series.Line(s => s.Diastolic).Name("Diastolic");
                series.Line(s => s.Systolic).Name("Systolic");
                series.Line(s => s.HeartRate).Name("Heart Rate");
            })
             .CategoryAxis(axis => axis
                .Categories(s => s.Day).Labels(labels => labels.Template("${ formatDate(value) }"))
    )
           .DataBinding(dataBinding => dataBinding
                            .Ajax().Select("_PatientGroupChartData", "BP"))

                         )

Here is the script for showing Diastolic series:

 function ShowDiastolic() {
        var chart = $("#Chart").data("tChart");
        chart.options.series.push({ color: "red", data: [chart.Diastolic], name: "Diastolic", type: "Line" });
        chart.refresh();
    }

I did not have any luck, I would appreciate your suggestions. Thanks in advance.

Answer 1

I found it should be like this:
chart.options.series.push({ color: “red”, data: [11, 11, 23, 13], name: “Diastolic”, type: “Line” });

Also the chart should not have any series to start with.