Kendo chart not displaying data as expected

Question

I have been having an issue with the kendo chart.

From the snippet below, if you open Kendo Dojo and paste it you will notice that the category axis only shows one month "Nov" when it contains data that spans 4 months.

This data is grouped by symbol in the datasource and there are 2 groups, group "2. AAL only has one record" but If i were to add another record into the datasource with the symbol "2. AAL" it shows exactly what i need but i seems like because there is only one record for that group, it ignores the other records for the other months and group.

With the current data i would expect to have the chart across 4 months with a line joining the point of the symbol "2. AAPL" while the point for symbol "2. AAL" is on its own. But the chart displaying all the points from the data provided.

Please any help will be very appreciated.

Thanks.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/line-charts/grouped-data">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

    <script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
    <div class="demo-section k-content">
        <div id="chart"></div>
    </div>
    <script>
      var datatest = [
     
    {
        "date": "12/30/2011",
        "close": 405,
        "volume": 6414369,
        "open": 403.51,
        "high": 406.28,
        "low": 403.49,
        "symbol": "2. AAPL"
    },
    {
        "date": "11/30/2011",
        "close": 382.2,
        "volume": 14464710,
        "open": 381.29,
        "high": 382.276,
        "low": 378.3,
        "symbol": "2. AAL"
    },
    {
        "date": "10/31/2011",
        "close": 404.78,
        "volume": 13762250,
        "open": 402.42,
        "high": 409.33,
        "low": 401.05,
        "symbol": "2. AAPL"
    },
    {
        "date": "9/30/2011",
        "close": 381.32,
        "volume": 19553550,
        "open": 387.12,
        "high": 388.89,
        "low": 381.18,
        "symbol": "2. AAPL"
    }
      ];
        
        var stocksDataSource = new kendo.data.DataSource({
        data: datatest,

            group: {
                field: "symbol"
            },

            sort: {
                field: "date",
                dir: "asc"
            },

            schema: {
                model: {
                    fields: {
                        date: {
                            type: "date"
                        }
                    }
                }
            }
        });

        function createChart() {
            $("#chart").kendoChart({
                title: { text: "Stock Prices" },
                dataSource: stocksDataSource,
                series: [{
                    type: "line",
                    field: "close",
                    name: "#= group.value # (close)"
                }],
                legend: {
                    position: "bottom"
                },
                valueAxis: {
                    labels: {
                        format: "${0}",
                        skip: 2,
                        step: 2
                    }
                },
                categoryAxis: {
                    field: "date",
                    labels: {
                        format: "MMM"
                    }
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>


</body>
</html>

score 1 · Accepted Answer · answered Jan 09 '15 at 14:53

After some time investigating, i came across the scatterline chart which doesn exactly what i want.

My initial work was done using a line chart but i tried the scatteredline chart and it worked.

See code below.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/scatter-charts/grouped-data">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

    <script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
    <div class="demo-section k-content">
        <div id="chart"></div>
    </div>
    <script>
      var datatest = [
     
    {
        "date": "12/30/2011",
        "close": 450,
        "volume": 6414369,
        "open": 403.51,
        "high": 406.28,
        "low": 403.49,
        "symbol": "2. AAPL"
    },
    {
        "date": "11/30/2011",
        "close": 382.2,
        "volume": 14464710,
        "open": 381.29,
        "high": 382.276,
        "low": 378.3,
        "symbol": "2. AAL"
    },
    {
        "date": "10/31/2011",
        "close": 404.78,
        "volume": 13762250,
        "open": 402.42,
        "high": 409.33,
        "low": 401.05,
        "symbol": "2. AAPL"
    },
    {
        "date": "9/30/2011",
        "close": 350.32,
        "volume": 19553550,
        "open": 387.12,
        "high": 388.89,
        "low": 381.18,
        "symbol": "2. AAPL"
    }
      ];
        
        var stocksDataSource = new kendo.data.DataSource({
        data: datatest,

            group: {
                field: "symbol"
            },

            sort: {
                field: "date",
                dir: "asc"
            },

            schema: {
                model: {
                    fields: {
                        date: {
                            type: "date"
                        }
                    }
                }
            }
        });

        function createChart() {
            $("#chart").kendoChart({
                title: { text: "Stock Prices" },
                dataSource: stocksDataSource,
                series: [{
                    type: "scatterLine",
                    xField: "date",
                    yField: "close",
                    name: "#= group.value # (close)"
                }],
                legend: {
                        visible: true,
                        position: "bottom"
                    },
                yAxis: {
                    labels: {
                        format: "${0}",
                        skip: 2,
                        step: 2
                    }
                },
                xAxis: {
                    labels: {
                        format: "MMM"
                    }
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>


</body>
</html>

Kendo chart not displaying data as expected

1 Answers1