2X faster development
The ultimate ASP.NET MVC UI toolkit to boost your development speed.
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: Figure 1: Chart without series
Figure 2: After adding series Sample link: A sample for dynamically adding a new series is available in the following link: |
2X faster development
The ultimate ASP.NET MVC UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.