Category / Section
How to render multiple PivotCharts on the same page in MVC?
1 min read
This KB illustrates that how to render multiple PivotCharts on the same page in MVC.
Solution
You can render multiple PivotCharts on the same page in MVC by using the following code examples.
MVC
@Html.EJ().Pivot().PivotChart("PivotChart1").Url("../wcf/OlapChartService.svc").CommonSeriesOptions(comm => { comm.Type(SeriesType.Column).Tooltip(tool => { tool.Visible(true); }); }).Size(size => size.Height("460px").Width("950px")).PrimaryXAxis(primaryXAxis => primaryXAxis.Title(title => title.Text("Fiscal Year")).LabelRotation(0)).PrimaryYAxis(primaryYAxis => primaryYAxis.Title(title => title.Text("Customer Count"))).Legend(legend => legend.Visible(true).RowCount(2)).ClientSideEvents( oEve => { oEve.BeforeServiceInvoke("beforeServiceCall"); }) <script type="text/javascript"> $(function () { var isValid = true; $(document).ajaxSuccess(function (event, xhr, settings) { if ($.parseJSON(settings.data).action == "initialize" && isValid) { var interval = setInterval(function () { if ($("#PivotChart1").find("svg").length > 0) { isValid = false; $("#PivotChart2").ejPivotChart({ url: "/wcf/OlapChartService.svc", beforeServiceInvoke: "beforeServiceCall" }); clearInterval(interval); } }, 500); } }); }); function beforeServiceCall(e) { this.model.customObject = e.element[0].id } </script>