Updating the datasource of a chart via JSON javascript

3 posts, 1 answers
  1. Luke
    Luke avatar
    6 posts
    Member since:
    Dec 2013

    Posted 18 Dec 2013 Link to this post

    So I have a chart which is configured using the MVC style configuration...

    @(Html.Kendo().Chart<DIMVC.ViewModel.CompanyProduction>(Model.CompanyProduction)
         .Name("DINETChart")
         .Title("Files sent through DINET")
         .Legend(legend => legend
             .Position(ChartLegendPosition.Bottom)
         )
         .ChartArea(chartArea => chartArea
             .Background("transparent")
         )
         .SeriesDefaults(seriesDefaults =>
             seriesDefaults.Line().Style(ChartLineStyle.Smooth)
         )
        .Series(series => {
             series.Line(model => model.SentFiles, model => model.Note)
                   .Name("Sent Files")
                   .Notes(notes => notes.Label(label => label.Position(ChartNoteLabelPosition.Outside)).Position(ChartNotePosition.Top));
        ....  { lots more series added here }
         .CategoryAxis(axis => axis
             .Categories(model => model.MonthDisplay)
            .Labels(labels => labels.Rotation(-90))
         )
         .ValueAxis(axis => axis.Numeric()
              .Labels(labels => labels.Format("{0:N0}"))
             .MajorUnit(10000)
         )
         .Tooltip(tooltip => tooltip
         .Visible(true)
         .Format("{0:N0}")
         .Template("${(value).toFixed(2)} ${series.name} <br /> ${((value / (dataItem.ReceivedFiles + dataItem.SentFiles)) * 100).toFixed(2)}%")
         )
         .Events(e => e
         .SeriesClick("onSeriesClick")
    )

    I also have a slider on the page. When the slider value is changed I handle this event.
    @(Html.Kendo().RangeSlider()
    .Name("yearRange")
    .Min(2000)
    .Max(DateTime.Today.Year)
    .SmallStep(1)
    .LargeStep(5)
    .Values(Model.MinYear, Model.MaxYear)
    .Events(e => e.Change("yearRangeChange"))
    )

        function yearRangeChange(e)
        {
             var url = "/FetchData/";

             $.ajax({
                 type: "GET",
                 url: url,
                 data: { startYear: e.values[0], endYear: e.values[1] },
                 dataType: "json",
                 success: function (json) {

                $("#DINETChart").kendoChart({
                    dataSource: {
                       data: json
                }
            });

             var chart = $("#DINETChart").data("kendoChart");
            chart.refresh();
         }
     });
    }

    now when the chart is updated the grid is just blank.

    The json request is successfully called and the data is retrieved.
    but after the chart is populated the chart is blank.
  2. Answer
    Luke
    Luke avatar
    6 posts
    Member since:
    Dec 2013

    Posted 18 Dec 2013 Link to this post

    this has now been solved by the StackOverflow community

    http://stackoverflow.com/questions/20656822/how-do-i-update-a-kendoui-chart-via-javascript-json?noredirect=1#comment30931454_20656822

    whats the point in Premium Forums????
  3. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 19 Dec 2013 Link to this post

    Hello Luke,

    The premium forum threads have status of support tickets - they have a guaranteed response time within a given time frame.
    According to the support options, as a trial user you are entitled with 48 hours response time in Kendo UI Premium forums. For more information please check the FAQ section and this blog post.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top