How to render multiple PivotCharts on the same page in 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>