Calling multiple charts using the same partial view

[Alan]

Hello

Using the MVC wrappers, what is the best way to call a kendo chart multiple times (in the same partial view) using different model values (the different model values are not important for now)?

I intent to allow the user to select the charts they require (from a treeview) and then add these charts to the page. There are hundreds of charts possible and the look of the page is not important, as it is only the SVG of the chart i'm interested in, as the charts will eventually be exported.

At the moment I have (just working with a the same demo chart from kendo demo)......

In the View

@using (Ajax.BeginForm("ChartPartial", "Export", new AjaxOptions() { UpdateTargetId = "chart0" }, new { id = "formChartPartial" }))
{
    <div style="display: none;">
        <input type="submit" id="chartExportSubmit" />
    </div>            
}

I'm using a form to pass data to the controller. Eventually i'll have other input fields containing the data needed to change the model passed to the partial view. 

Controller

Contains the logic to produce a model, which is not important at the moment as can be seen below in the partial view code

Partial View

<div class="chart-wrapper">
    @(Html.Kendo().Chart()
        .Name("chart" + Guid.NewGuid())
        .Title("Site Visitors Stats /thousands/")
        .Legend(legend => legend
            .Visible(false)
        )
        .ChartArea(chartArea => chartArea
            .Background("transparent")
        )
        .Series(series => {
            series.Bar(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
            series.Bar(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors");
        })
        .CategoryAxis(axis => axis
            .Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
            .MajorGridLines(lines => lines.Visible(false))
        )
        .ValueAxis(axis => axis
            .Numeric()
            .Max(140000)
            .Line(line => line.Visible(false))
            .MajorGridLines(lines => lines.Visible(true))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Template("#= series.name #: #= value #")
        )
    ) 
</div>

Javascript

Iterate through javascript array (selected) to find the amount of multiple charts needed. Create a div for each and change the target div on the form, finally, calling the form which fires the partial view.


        for (var i = 0; i < selected.length; i++) {
            $('#exportChartContainer').append('<div id="chart' + i + '" class="chart" style="height: 590px; width: 960px;"></div>');
            $('#formChartPartial').attr('data-ajax-update', '#chart' + i.toString());
            $('#chartExportSubmit').click();
        }


In fiddler, I get all the charts back fine from the ajax form submits, but only the final div actually contains a chart, which happens to be the final chart called - i'm thinking that by the time the charts return, the updateTargetId attribute (data-ajax-update) has already been changed to the final div and every chart is replacing the previous one, or something along those lines.

I've tried a different approach by including the ajax option 'InsertionMode = InserstionMode.InsertAfter', and targeting the same div, but the charts do not display at all.

I can probably do this using a combination of ajax requests and the javascript functions to call the charts, but I would rather use the MVC wrappers for consistency across the site, if possible.

Any ideas?

Thanks
Alan

[Atanas Korchev]

Hi Alan,

The problem could be caused by Ajax.BeginForm  not executing JavaScript code returned by partial views. One thing you can try is using $.ajax instead. Then use the jQuery append method to insert the result HTML in the div. jQuery always executes JavaScript code so the chart should be initialized as expected.

If you need further assistance please attach a runnable subset of your project so we can check it out.

Regards,
Atanas Korchev
the Telerik team