This is a migrated thread and some comments may be shown as answers.

Updating the datasource of a chart via JSON javascript

2 Answers 124 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Luke
Top achievements
Rank 1
Luke asked on 18 Dec 2013, 11:18 AM
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 Answers, 1 is accepted

Sort by
0
Accepted
Luke
Top achievements
Rank 1
answered on 18 Dec 2013, 03:49 PM
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????
0
Alexander Valchev
Telerik team
answered on 19 Dec 2013, 02:31 PM
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!
Tags
General Discussions
Asked by
Luke
Top achievements
Rank 1
Answers by
Luke
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or