2 charts with shared datasource

7 posts, 0 answers
  1. Alex
    Alex avatar
    16 posts
    Member since:
    Oct 2011

    Posted 12 Jul 2012 Link to this post

    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.
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 13 Jul 2012 Link to this post

    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
    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
  4. Mike
    Mike avatar
    16 posts
    Member since:
    Feb 2014

    Posted 19 May 2014 in reply to T. Tsonev Link to this post

    Is shared datasource still not available with the MVC wrappers? I'm looking to the same thing.
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 20 May 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Mike
    Mike avatar
    16 posts
    Member since:
    Feb 2014

    Posted 20 May 2014 in reply to T. Tsonev Link to this post

    Thanks. I really hope Telerik decides to add this feature.
  7. Steeve
    Steeve avatar
    2 posts
    Member since:
    Jan 2016

    Posted 07 Nov in reply to T. Tsonev Link to this post

    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

  8. Steeve
    Steeve avatar
    2 posts
    Member since:
    Jan 2016

    Posted 08 Nov in reply to Steeve Link to this post

    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

     

     

     

Back to Top
UI for ASP.NET MVC is VS 2017 Ready