How to add a new series dynamically in Chart?

1 min read

Essential Chart supports dynamically customizing all the properties with the instance of Chart in client-side. You can create an instance for chart, by calling the ejChart constructor method with the string “instance” as parameter. To add a new series dynamically, add a series object to the series collection of chart instance. The following code illustrates this.

CSHTML

    @(Html.EJ().Chart("container")
        .Series(ser =>
        {
            ser.Points(points =>
            {
                    points.X("India").Y(25).Add();
                    points.X("Australia").Y(32).Add();
                    points.X("China").Y(41).Add();
                    points.X("Japan").Y(30).Add();
                    points.X("France").Y(28).Add();
            }).Add();
         })
    )
    <input type="button" onclick="AddSeries()" value="Add Series" />
    <script type="text/javascript">
        function AddSeries() {
            //Creating an instance of Chart
            var Chart = $("#container").ejChart("instance");
            //Adding a new series dynamically using Chart instance
            Chart.model.series[Chart.model.series.length] = { points: [{ x: 'Australia', y: 20 }, { x: 'China', y: 15 }], name: 'Dynamic Series' }
            //Redrawing chart after updating series collection
            Chart.redraw();
        }
    </script>

Screenshots:

Chart before adding dynamic series

Figure 1: Chart without series

Chart after adding dynamic series

Figure 2: After adding series

Sample link:

A sample for dynamically adding a new series is available in the following link: