2 charts with shared datasource

[Alex]

I have 2 charts that I'm defining using the mvc wrappers. They both operate on the same data, which I'm loading using Ajax binding.  So that they do not make 2 separate calls I wanted to define a shared dataSource, but I've been unable to figure out how to do this when the charts are defined using MVC. Here's a cut down version of my chart definitions.

@(Html.Kendo().Chart<OtpDelayStat>()

        .Name("OtpBreakdown")

        .DataSource(ds => ds.Read(r => r.Action("GetOtpBreakdown", "Reports").Data("OtpBreakdownData")))

        .Series(series =>

        {

          series.Column(m => m.OutDelay).Name("Out Delay").Color("#F93");

        })

    )

@(Html.Kendo().Chart<Collins.Hermes.WebMessenger.Models.Reports.OtpDelayStat>()

        .Name("OtpBreakdown2")        

        .Series(series =>

        {

          series.Column(m => m.ScheduledLength).Name("Schedule").Stack("Scheduled Times").Color("#090");

          series.Column(m => m.OnTimeArrival).Name("On-Time Arrival").Stack("Scheduled Times").Color("#090").Opacity(0.5);          

        })        

    )

Is there a way to define a shared dataSource in MVC alone? if not is there a sensible way to do it in javascript? (I tried assigning the datasource from one grid to another in a javascript event, but this only seemed to work properly the 2nd time the event occurred. I also tried doing it in jquery document.ready, but the charts don't seem to have been created at that point.

[T. Tsonev]

Hello,

Sharing data sources between components is not supported when using the MVC wrappers.

One possible workaround is to declare the data source and charts in JavaScript. For example:

var ds = new kendo.data.DataSource({
    transport: {
        read: {
            url: @Url.Action("GetOtpBreakdown", "Reports"),
            data: OtpBreakdownData,
            dataType: "json"
        }
    }
});

$("#OtpBreakdown").kendoChart({
    dataSource: ds,
    // ...
});

$("#OtpBreakdown2").kendoChart({
    dataSource: ds,
    // ...
});

You can get a snapshot of your current settings generated by the MVC wrappers by inspecting the generated HTML.

Please feel free to submit this idea to UserVoice. We'll consider our options for enabling it in future releases.

Greetings,
Tsvetomir Tsonev
the Telerik team

[Mike]

Is shared datasource still not available with the MVC wrappers? I'm looking to the same thing.

[T. Tsonev]

Hi,

I'm afraid the MVC suite doesn't yet provide a stand-alone data source wrapper. Please, cast your vote for this feature on our UserVoice portal:
Allow use of shared DataSource for multiple controls using MVC wrappers

Regards,
T. Tsonev
Telerik

 

 

[Mike]

Thanks. I really hope Telerik decides to add this feature.

[Sébastien]

Hello

We are facing similar issue.

here is what we would like to achieve under our dashboard

-display 3 kendo Chart instantly without data

-charts and grid point to 3 kendo DataSources

-Kendo Datasources call AsyncController Action methods

We expect graphs and grids to get updated with their data on their action callback.

Could you please provide an exemple with one graph and confirm it handles DataSOurce calling Async Controller Action

Thanks

[Sébastien]

Hello

 

We managed to solve our problem with the following approach:

http://jayeshgoyani.blogspot.fr/2013/05/how-to-add-multiple-lines-series.html

Kendo Datasource seems to work with async controller action, but it is still necessary to

-Convert your Model to the right Json format for your series

-Redraw your chart when your datasource is ready

 

Thanks