Hide Zero values in a line chart

2 posts, 0 answers
  1. Kevin
    Kevin avatar
    4 posts
    Member since:
    Nov 2012

    Posted 09 Jan 2013 Link to this post

    Hi,
    Is there anyway to hide data points with zero (0) value in a line chart? I'm currently using the line chart and can't seem to find an easy way to do this. Basically a line shows up at the 0 value on the graph and I rather not show the line at all.Provide me any solution how to remove the lines showing zero.Here i'm providing the code below


    $.ajax({
                        type: "POST",
                        contentType: "application/json;charset=utf-8",
                        url: "dataVizWebService.asmx/GetSellInOfficeTrends",
                        dataType: "json",
                        success: function (data) {

                            $("#chart").kendoChart({
                                dataSource: {
                                    data: data.d,
                                    value: "#={0}>0"
                                },
                                legend: {
                                    position: "bottom"
                                },
                                title: {
                                    text: "Population"
                                },
                                series: [
                                            {
                                                type: "line",
                                                field: "Population2010",
                                                name: "Population2010",
                                                axis: "Year",
                                                color: "#4a7ebb"
                                            }, {
                                                type: "line",
                                                field: "Population2011",
                                                name: "Population2011",
                                                axis: "Year",
                                                color: "#be4b48"
                                            }, {
                                                type: "line",
                                                field: "Population2012",
                                                name: "Population2012",
                                                axis: "Year",
                                                color: "#98b954"
                                            }, {
                                                type: "line",
                                                missingValues: "zero",
                                                field: "Population2013",
                                                name: "Population2013",
                                                axis: "Year",
                                                dashType: "dash",
                                                color: "#000000"
                                            }
                                            ],
                                valueAxis: [{
                                    name: "Year",
                                    title: { text: "Population in Millions" }
                                }],
                                categoryAxis: {
                                    field: "Week",
                                    majorTickType: "none",
                                    labels: {
                                        skip: 0
                                    }
                                },
                                tooltip: {
                                    visible: true
                                }
                            })
                        }
                    });

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 11 Jan 2013 Link to this post

    Hi Kevin,

    I am afraid hiding the data points with 0 value is not supported in Kendo UI Chart. If you don't want to have a point in the line chart you need to set value "null" for that point. For a working example check this jsBin example.

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