Chart Display Issues

4 posts, 0 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 16 Nov 2015 Link to this post

    I have a column chart, defined in MVC as below:-

     

    @(Html.Kendo().Chart<Dashboard.Models.BarChartDataItem>(Model)
                .Name((string)ViewBag.ChartName)
                 .Title((string)ViewBag.ChartTitle)
                 .Theme("bootstrap")
                
     
                .Legend(legend => legend
                    .Position(ChartLegendPosition.Top)
                    .Visible(false)
                )
     
                .Series(series =>
                {
                    series.Column(model => model.BarValue).Name("Actual").Tooltip(t=>t.Visible(true).Template("<div><p>Category:#=dataItem.AxisDescription#</p><p>Contribution: £#=dataItem.DisplayBarValue#</p></div>"));
                })
                .ChartArea(area => area
                    .Height(350)
                    .Background("transparent")
                    )
     
                        .ValueAxis(axis => axis.Numeric()
                    .Labels(labels => labels.Format("{0:N2}"))
                    .Title((string)ViewBag.Yaxis)
                    .AxisCrossingValue(0, int.MinValue)
     
     
     
                    .Line(line => line.Visible(false))
                )
     
                 .CategoryAxis(axis => axis
                   .Labels(false))
                .CategoryAxis(axis => axis
     
                    .Categories(model => model.AxisValue)
                    .Labels(labels => labels.Rotation(-45).Padding(5))
                    .MajorGridLines(lines => lines.Visible(false))
                     .Title((string)ViewBag.Xaxis)
     
     
                )
                  
                .Events(e=>e.SeriesClick("seriesClick"))
     
                .Tooltip(tooltip => tooltip
                    .Visible(true)
     
                    .Format("{0:N2}")
                )
     
    )

    I then use the SeriesClick event, to implement a data drill-down, which refreshes with the chart with new data (based on the level of drill-down and the value of the clicked column), based on an Ajax call, which gets new JSON data.

     

    function PODDrillDown(pod,conscode,specialtycode,directorateCode, period)
           {
     
               var directorate = directorateCode;
               selectedDirectorate = directorateCode;
               selectedspec = specialtycode;
               selectedcons = conscode;
               selectedPOD = pod;
     
               var chartData;
     
               $.ajax({
     
                   type: "POST",
                   async: true,
                   contentType: "application/json;charset=utf-8",
                   url: "@Url.Content("~/ChartMaker/GetHRGChapterBarChartData")",
                   data: '{"id":2,"periodID":' + period + ',"DirectorateCode":"' + directorate + '","SpecCode":"' + specialtycode + '","ConsCode":"' + conscode + '","POD":"' + pod + '" }',
               dataType: "json",
               success: function (data) {
                   if (data.Success == true) {
                       
                       chartData = data.chartData;
     
                       var dataSource = new kendo.data.DataSource({
                           data: chartData
                       });
     
                       var chart = $("#Chart_ID_1").data("kendoChart");
                       chart.dataSource = dataSource;
                       chart.options.title.text = data.ChartTitle;
                       chart.options.valueAxis.title.text = data.YAxisTitle;
                       chart.options.categoryAxis[1].title.text = data.XAxisTitle;
                       chart.dataSource.read();
                       chart.refresh();
     
     
     
     
     
                   }
                   else {
     
                       alert(data.Error);
                   }
     
               },
               error: function () {
                   alert("An error has occurred");
               }
     
           });
     
           }

     This works well, however with one particular drill-down , the chart doesn't render properly. The series labels are shown, the value axis seems scaled correctly, but the columns aren't rendered (I've attached an image of the chart). I can't see any issues with the data, all the data calls return data in the same structure, and no errors are thrown.

     

    The Ajax call returns the data below :-

     

    {"ChartTitle":"Performance for Consultant 4835","XAxisTitle":"Point of Delivery","YAxisTitle":"Contribution (£)","Success":true,"Message":"Data retrieved","Error":null,"chartData":[{"BarValue":-2476080.767381317,"AxisValue":"Other","AxisCode":"OTHER","ExtraValue":4,"AxisDescription":"Other","DisplayBarValue":"-2,476,081"},{"BarValue":-2476080.7673813165,"AxisValue":"Block","AxisCode":"BLOCK","ExtraValue":4,"AxisDescription":"Block","DisplayBarValue":"-2,476,081"}]}

     Is this a bug in the chart, or is it something in the code?

    Thanks

  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 18 Nov 2015 Link to this post

    Hello,

    This seems like a bug of the value axis that occurs when the values difference is smaller than the axis rounding. I have logged the issue and we will look into it. I am not sure if this is applicable in your scenario, but you can avoid the problem by setting fixed minimum or maximum value:
    .ValueAxis(axis => axis.Numeric()
        .Min(0)

    Note that the code that you are currently using to update the dataSource is incorrect. A new dataSource instance should be set with the setDataSource method. You could also just change the existing dataSource data via the data method. Also, the recommended approach to change the options is to use the setOptions method.

    Regards,
    Daniel
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 18 Nov 2015 in reply to Daniel Link to this post

    Thanks for the response. Do you have a timescale on when this may be fixed?

     Setting the axis limits explicitly in the definition isn't an option, as they will change for each drill-down (both positive and negative).

     I will look into using the setDataSource method, although it's working fine apart from the display bug.

     

  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 20 Nov 2015 Link to this post

    Hello again,

    The problem has been fixed and the fix will be available in the next internal build.

    Regards,
    Daniel
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready