Chart Display Issues

[AP]

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

[Daniel]

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

[AP]

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.

 

[Daniel]

Hello again,

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

Regards,
Daniel
Telerik