|
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.
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.
