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

Error with null data values in Kendo line chart

2 Answers 247 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Josh
Top achievements
Rank 1
Josh asked on 11 Sep 2013, 09:18 PM
I have a KendoChart that is set up as a line which displays gaps for missing values.  I receive the following error when I try to pass in data with null values:

SCRIPT5007: Unable to get value of the property 'value': object is null or undefined
kendo.all.js, line 72292 character 21

value = defined(item.value) && defined(item.value[field]) ? item.value[field] : item.fields[field];

My chart settings: 
$("#chart").kendoChart({
        title: {
            font: "20px sans-serif",
            weight: "bold",
            color: "#1a4a65",
            text: "Index Price Data"
        },
        legend: {
            font: "10px sans-serif",
            weight: "bold",
            color: "#1a4a65",
            position: "top"
        },
        categoryAxis: {
            type: "date",
            //baseUnits:"months",
            //field:"contractMonth",
            labels: {
                 font: "10px sans-serif",
                rotation: -90,
                dateFormats: {
                    days: "M/d/yyyy",
                    months: "M/d/yyyy"
                },
            },
            title: {
                font: "14px sans-serif",
                color: "#1a4a65",
                //text:"Contract Month",
            }
        },
        valueAxis: {
            labels: {
                font: "10px sans-serif",
                format: "{0:c}",
            },
            majorUnit: .2,
            title: {
                font: "14px sans-serif",
                color: "#1a4a65",
                text: "$/BBL",
            },
        },
        tooltip: {
            visible: true,
            radius: "5px",
            background: "#1a4a65",
            color: "#ffffff",
            font: "14px sans-serif",
            format: "{0:c}"
        },
        transitions: false,
        seriesDefaults: {
            type: "line",
            missingValues: "gap"
        },
    });

My series settings are set dynamically:
var chart = $("#chart").data("kendoChart");
var chartOptions = chart.options;
var categoryDates = [];
chartOptions.categoryAxis.title.text = "Price Date";
chartOptions.categoryAxis.baseUnits = "days";
chartOptions.categoryAxis.field = "priceDate";
var seriesPrices = new kendo.data.ObservableArray([]);
chartOptions.series.push([]);
chartOptions.series[0].data = seriesPrices;
chartOptions.series[0].type = "line";
chartOptions.series[0].missingValues = "gap";
chartOptions.series[0].color = "#1a4a65";
chartOptions.series[0].field = "price";
chartOptions.series[0].name = self.get('selectedIndexName');
chartOptions.categoryAxis.categories = categoryDates;
chart.redraw();

categoryDates : [
Sat Aug 10 00:00:00 CDT 2013,
Sun Aug 11 00:00:00 CDT 2013,
Mon Aug 12 00:00:00 CDT 2013,
Tue Aug 13 00:00:00 CDT 2013,
Wed Aug 14 00:00:00 CDT 2013,
Thu Aug 15 00:00:00 CDT 2013,
Fri Aug 16 00:00:00 CDT 2013,
Sat Aug 17 00:00:00 CDT 2013,
Sun Aug 18 00:00:00 CDT 2013,
Mon Aug 19 00:00:00 CDT 2013,
Tue Aug 20 00:00:00 CDT 2013,
Wed Aug 21 00:00:00 CDT 2013,
Thu Aug 22 00:00:00 CDT 2013,
Fri Aug 23 00:00:00 CDT 2013,
Sat Aug 24 00:00:00 CDT 2013,
Sun Aug 25 00:00:00 CDT 2013,
Mon Aug 26 00:00:00 CDT 2013,
Tue Aug 27 00:00:00 CDT 2013,
Wed Aug 28 00:00:00 CDT 2013,
Thu Aug 29 00:00:00 CDT 2013,
Fri Aug 30 00:00:00 CDT 2013,
Sat Aug 31 00:00:00 CDT 2013
]

seriesPrices: {
price: 3.1, priceDate: Sat Aug 10 00:00:00 CDT 2013,
price: 3.2, priceDate: Sun Aug 11 00:00:00 CDT 2013,
price: 3.3, priceDate: Mon Aug 12 00:00:00 CDT 2013,
price: null, priceDate: Tue Aug 13 00:00:00 CDT 2013,
price: null, priceDate: Wed Aug 14 00:00:00 CDT 2013,
price: null, priceDate: Thu Aug 15 00:00:00 CDT 2013,
price: null, priceDate: Fri Aug 16 00:00:00 CDT 2013,
price: null, priceDate: Sat Aug 17 00:00:00 CDT 2013,
price: null, priceDate: Sun Aug 18 00:00:00 CDT 2013,
price: null, priceDate: Mon Aug 19 00:00:00 CDT 2013,
price: null, priceDate: Tue Aug 20 00:00:00 CDT 2013,
price: null, priceDate: Wed Aug 21 00:00:00 CDT 2013,
price: null, priceDate: Thu Aug 22 00:00:00 CDT 2013,
price: null, priceDate: Fri Aug 23 00:00:00 CDT 2013,
price: null, priceDate: Sat Aug 24 00:00:00 CDT 2013,
price: null, priceDate: Sun Aug 25 00:00:00 CDT 2013,
price: 4.1, priceDate: Mon Aug 26 00:00:00 CDT 2013,    //non-null price
price: null, priceDate: Tue Aug 27 00:00:00 CDT 2013,
price: null, priceDate: Wed Aug 28 00:00:00 CDT 2013,
price: null, priceDate: Thu Aug 29 00:00:00 CDT 2013,
price: null, priceDate: Fri Aug 30 00:00:00 CDT 2013,
price: null, priceDate: Sat Aug 31 00:00:00 CDT 2013
}


The chart displays correctly if I pass in the following data.  However, the chart does not display the empty dates after the last non-null point (8/27-8/31)
categoryDates : [
Sat Aug 10 00:00:00 CDT 2013, 
Sun Aug 11 00:00:00 CDT 2013,
Mon Aug 12 00:00:00 CDT 2013,
Tue Aug 26 00:00:00 CDT 2013
]

seriesPrices: {
price: 3.1, priceDate: Sat Aug 10 00:00:00 CDT 2013, 
price: 3.2, priceDate: Sun Aug 11 00:00:00 CDT 2013,
price: 3.3, priceDate: Mon Aug 12 00:00:00 CDT 2013,
price: 4.1, priceDate: Tue Aug 2600:00:00 CDT 2013
}

If I pass in the following data, the chart displays the entire range of dates (8/10 - 8/31), but the point for 8/26 is displayed on 8/13 and it connected to the previous points:
categoryDates : [
Sat Aug 10 00:00:00 CDT 2013, 
Sun Aug 11 00:00:00 CDT 2013,
Mon Aug 12 00:00:00 CDT 2013,
Tue Aug 13 00:00:00 CDT 2013,
Wed Aug 14 00:00:00 CDT 2013,
Thu Aug 15 00:00:00 CDT 2013, 
Fri Aug 16 00:00:00 CDT 2013,
Sat Aug 17 00:00:00 CDT 2013,
Sun Aug 18 00:00:00 CDT 2013,
Mon Aug 19 00:00:00 CDT 2013,
Tue Aug 20 00:00:00 CDT 2013, 
Wed Aug 21 00:00:00 CDT 2013,
Thu Aug 22 00:00:00 CDT 2013,
Fri Aug 23 00:00:00 CDT 2013,
Sat Aug 24 00:00:00 CDT 2013,
Sun Aug 25 00:00:00 CDT 2013, 
Mon Aug 26 00:00:00 CDT 2013,
Tue Aug 27 00:00:00 CDT 2013,
Wed Aug 28 00:00:00 CDT 2013,
Thu Aug 29 00:00:00 CDT 2013,
Fri Aug 30 00:00:00 CDT 2013, 
Sat Aug 31 00:00:00 CDT 2013
]

seriesPrices: {
price: 3.1, priceDate: Sat Aug 10 00:00:00 CDT 2013, 
price: 3.2, priceDate: Sun Aug 11 00:00:00 CDT 2013,
price: 3.3, priceDate: Mon Aug 12 00:00:00 CDT 2013,
price: 4.1, priceDate: Tue Aug 2600:00:00 CDT 2013
}

Please advise on how I can set up the chart to correctly display my data (all dates shown on chart, even if there is null price data for that date). 

Thank you!












2 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 13 Sep 2013, 01:46 PM
Hello Josh,

Could you try to update to the latest internal build because we have fixed some major problems with the chart aggregates. Could you please tell me if you find something wrong with this build. Thank you for the understanding.

Regards,
Hristo Germanov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Josh
Top achievements
Rank 1
answered on 30 Sep 2013, 03:17 PM
This appears to have been fixed with the update. 

Thank you
Tags
Charts
Asked by
Josh
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Josh
Top achievements
Rank 1
Share this question
or