Calling multiple charts using the same partial view

2 posts, 0 answers
  1. Alan
    Alan avatar
    12 posts
    Member since:
    Aug 2012

    Posted 01 May 2013 Link to this post

    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
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 03 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top