Passing date value for Stock Chart

[Neil]

Hey Kendo,

Im using kendo stock chart to plot some stuff and it works great, when date is 30 points with 30 dates. Which looks something like :
Date: 01/01/2012
Point: 5
.... and so on

But what about if my date is a DateTime for example :

Date: 01/01/2012 00:10:00
Point: 5

Date: 01/01/2012 00:55;00
Point: 11

and so on


Is that not supported in stock charts ? Because by the looks of it I cant get it going 

Regards,
Neil

[Alexander Valchev]

Hello Neil,

If I understood correctly, you are wondering whether the stock chart can work with hours. This is supported, for convenience I prepared a small example: http://jsbin.com/ogaqug/2/edit

In case you would like to set the base time interval for the axis labels to be hours, you may use the baseUnit option.

Regards,
Alexander Valchev
the Telerik team

[Neil]

Hey,
Thank You very much for You reply. I did try to figure this out and try not to bother you but it looks like, I will need more of Your help.

So when I try this stock chart with daily data which looks like this :

[{"Day":"\/Date(1333234800000+0100)\/","DayCount":527,"DayTarget":144},{"Day":"\/Date(1333321200000+0100)\/","DayCount":457,"DayTarget":144},{"Day":"\/Date(1333407600000+0100)\/","DayCount":800,"DayTarget":144},{"Day":"\/Date(1333494000000+0100)\/","DayCount":378,"DayTarget":144},{"Day":"\/Date(1333580400000+0100)\/","DayCount":683,"DayTarget":144},{"Day":"\/Date(1333666800000+0100)\/","DayCount":721,"DayTarget":144},{"Day":"\/Date(1333753200000+0100)\/","DayCount":962,"DayTarget":144},{"Day":"\/Date(1333839600000+0100)\/","DayCount":635,"DayTarget":144},{"Day":"\/Date(1333926000000+0100)\/","DayCount":500,"DayTarget":144},{"Day":"\/Date(1334012400000+0100)\/","DayCount":417,"DayTarget":144},{"Day":"\/Date(1334098800000+0100)\/","DayCount":671,"DayTarget":144},{"Day":"\/Date(1334185200000+0100)\/","DayCount":1510,"DayTarget":144},{"Day":"\/Date(1334271600000+0100)\/","DayCount":1630,"DayTarget":144}]

it works perfectly fine, but when I have date and when I want to use minutes as the base unit it doesnt really work,

and the data looks exactly the same, only the field name changes

[{"ColumnValue":0,"Count10Min":4,"Slice":"\/Date(1333234800000+0100)\/"},{"ColumnValue":0,"Count10Min":1,"Slice":"\/Date(1333235400000+0100)\/"},{"ColumnValue":0,"Count10Min":0,"Slice":"\/Date(-62135596800000+0000)\/"},{"ColumnValue":0,"Count10Min":4,"Slice":"\/Date(1333236600000+0100)\/"},{"ColumnValue":0,"Count10Min":4,"Slice":"\/Date(1333237200000+0100)\/"},{"ColumnValue":0,"Count10Min":4,"Slice":"\/Date(1333237800000+0100)\/"},{"ColumnValue":0,"Count10Min":1,"Slice":"\/Date(1333238400000+0100)\/"},{"ColumnValue":0,"Count10Min":3,"Slice":"\/Date(1333239000000+0100)\/"},{"ColumnValue":0,"Count10Min":0,"Slice":"\/Date(-62135596800000+0000)\/"}]

Could this be because of the date format ? Because I use this data on a line chart just by itself and it works perfectly fine.
Thank You for Your help kendo,
regards,
Neil

[Alexander Valchev]

Hi Neil,

The problem should not be caused by the date. Internally the DataSource uses kendo.parseDate to parse JSON date into JavaScript one. If you try to parse the dates manually, everything works fine:

kendo.parseDate("\/Date(1333234800000+0100)\/");
// Sun Apr 01 2012 02:00:00 GMT+0300 (FLE Daylight Time)
kendo.parseDate("\/Date(1333235400000+0100)\/");
// Sun Apr 01 2012 02:10:00 GMT+0300 (FLE Daylight Time)

Could you please provide your Chart and DataSource configuration so I can examine them?

Regards,
Alexander Valchev
the Telerik team

[Neil]

Hi there,
Thank You for Your reply, its really important for me to get this goinf, so your help is appreciated a lot.
If You try to input the same data in the example you wrote the whole page crashes.

But here is my code for that stock chart (with minutes):


 function createPremierStockChart(month) {
                            $("#stockchart").kendoStockChart({
                            theme: $(document).data("kendoSkin") || "default",
                            dataSource: {
                                transport: {
                                    read: {
                                        url: "/JSONdata/drill2.json",                                       
                                        dataType: "json"
                                    }
                                }
                            },
                        title: {
                            text: "The Boeing Company (NYSE:BA)"
                        },                        
                        series: [{
                            type: "line",
                            field: "Count10Min"
                        }],
                        dateField: "Slice"
                    });
}

And here is a fragment of data from drill2.json

{"ColumnValue":0,"Count10Min":4,"Slice":"\/Date(1333234800000+0100)\/"},{"ColumnValue":0,"Count10Min":1,"Slice":"\/Date(1333235400000+0100)\/"},{"ColumnValue":0,"Count10Min":0,"Slice":"\/Date(-62135596800000+0000)\/"},{"ColumnValue":0,"Count10Min":4,"Slice":"\/Date(1333236600000+0100)\/"},{"ColumnValue":0,"Count10Min":4,"Slice":"\/Date(1333237200000+0100)\/"},{"ColumnValue":0,"Count10Min":4,"Slice":"\/Date(1333237800000+0100)\/"},{"ColumnValue":0,"Count10Min":1,"Slice":"\/Date(1333238400000+0100)\/"},{"ColumnValue":0,"Count10Min":3,"Slice":"\/Date(1333239000000+0100)\/"},{"ColumnValue":0,"Count10Min":0,"Slice":"\/Date(-62135596800000+0000)\/"},{"ColumnValue":0,"Count10Min":4,"Slice":"\/Date(1333240200000+0100)\/"},{"ColumnValue":0,"Count10Min":0,"Slice":"\/Date(-62135596800000+0000)\/"},{"ColumnValue":0,"Count10Min":0,"Slice":"\/Date(-62135596800000+0000)\/"},{"ColumnValue":0,"Count10Min":2,"Slice":"\/Date(1333242000000+0100)\/"},{"ColumnValue":0,"Count10Min":2,"Slice":"\/Date(1333242600000+0100)\/"}

Thanks again.
Regards,
Neil

[Neil]

Hey any luck with this data ?

[Alexander Valchev]

Hi Neil,

The problem comes from the fact that some of the data is incorrect (the negative timestamps).

kendo.parseDate("\/Date(-62135596800000+0000)\/")
Mon Jan 01 1 02:00:00 GMT+0200 (FLE Standard Time)
kendo.parseDate("\/Date(-62135596800000+0000)\/")
Mon Jan 01 1 02:00:00 GMT+0200 (FLE Standard Time)

Could you please check your data? Are you sure that all timestamps are correct?

If you exclude them from the data, the chart renders fine. For your convenience I prepared an example: http://jsbin.com/otojiv/2/edit

Having date from year 1, will force the chart to render too many points which will most likely cause the page to crash. If the data is correct, but cannot be parsed by the default kendo method, I suggest you to use the parse function of the dataSource.schema where you can parse the timestamp send from the server manually.

Kind regards,
Alexander Valchev
the Telerik team

[Neil]

Thank You very much for You reply,

Its interesting couse I use exactly the same date on another kendo chart which is simply a line and it works perfectly fine ( attached a pic) I will try the parse function and let You know how it went. Its a bit strange tho, that I would have to parse it for one kind o chart and not for the other one, although they both use the same js.
Thank You,
Ill get back to You
Neil

[Neil]

Could You also please help with the kendo.datetime parse function.
As You suggested in this example  http://jsbin.com/otojiv/2/edit ,I should try parse my datetime values with kendo.parse function, 
Im a but lost with the syntax how to try parse each value before it is rendered.
Sorry if Im being too needy its just Im really stuck with this timedate issue.#
Regards,
neil

[Neil]

Hey,
Did some digging and found something regarding the negative date values, heres a link : 
http://msdn.microsoft.com/en-us/library/bb412170.aspx and look for 

DateTime Wire Format .

 

So apparently it needs to be de-serialized and Ive tried in your latest jsfiddle example to do this:
kendo.toString("\/Date(-62135596800000+0000)\/", "dd/MM/yyyy HH:mm:ss") ;

Is this syntax okay, couse I failed with this.

Again,
Please help,
regards,
Neil

[Neil]

Hey, Ive solved my problem, all it was that in a 1000s of datapoints my program sends to kendo there was couple wrong datapoint which were the negative ones.
Thank You

[Armin]

Hello Alexander,
your colleague Iliana suggested in this post to use stock charts. In order to achieve that i need a different time frame and so i came across this post here. I used your suggestion and made a stock chart with more then 2800 values that are each 15 minutes apart. My code looks like this:

<div id="stock-chart"></div>
<script>
    function createChart() {
        $("#stock-chart").kendoStockChart({
            dataSource: {
                data: [
                {"Date":"01/04/2014 00:00:00", "Value":34.081},
                {"Date":"01/04/2014 00:15:00", "Value":31.463},
                {"Date":"01/04/2014 00:30:00", "Value":28.136},
                {"Date":"01/04/2014 00:45:00", "Value":24.223},
                {"Date":"01/04/2014 01:00:00", "Value":22.541},
                {"Date":"01/04/2014 01:15:00", "Value":20.097},
                {"Date":"01/04/2014 01:30:00", "Value":17.076},
                {"Date":"01/04/2014 01:45:00", "Value":14.596},
                {"Date":"01/04/2014 02:00:00", "Value":11.601},
                {"Date":"01/04/2014 02:15:00", "Value":9.701},
                ...
                {"Date":"30/04/2014 22:15:00", "Value":22.003},
                {"Date":"30/04/2014 22:30:00", "Value":25.84},
                {"Date":"30/04/2014 22:45:00", "Value":27.862},
                {"Date":"30/04/2014 23:00:00", "Value":32.221},
                {"Date":"30/04/2014 23:15:00", "Value":37.652},
                {"Date":"30/04/2014 23:30:00", "Value":46.373},
                {"Date":"30/04/2014 23:45:00", "Value":51.84}
                ]
            },
            dateField: "Date",
            series: [{
                type: "line",
                field: "Value"
            }],
            navigator: {
                series: {
                    type: "area",
                    field: "Value"
                }
            }
        });
    }
    $(document).ready(createChart);
</script>

Although my data only consists of dates between one month in 2014, i'll get a navigator that would take me to 2016 and beyond and the first point would be from 21:15 instead of 00:00. Not to mention missing points, when setting a small scope. I already tinkered with navigator.categoryAxis.baseUnit, but to no avail. It's my understanding from the documentation that the default base unit is determined automatically from the minimum difference between subsequent categories. That doesn't seem to work or am i doing something wrong? Any help would be appreciated.

[Armin]

Never mind, i found the error. The date value has to be mm/dd/yyyy hh:mm

[Deepesh]

Hello Kendo Team,

I am using stock chart in Angular where I am using categoryField in three series for dates. Date field values are like "01-Jan-2021" and I am using new Date() to parse in kendo acceptable format as per this doc.

Chart is rendering properly but dates are incorrect. For example I have data set where I have data for multiple dates(with other attributes) like: "01-Jan-2021", "03-Jan-2021" and so on. But when chart loads, it is showing me start from "27-Dec-2020" which is not present in the data set and all dates are incorrect in the chart however same data set working fine with Line chart. Could you please help me on this.

I checked navigator date ranges while change the date ranges, it is showing correct dates. Only issue with X axis dates(labels).

Thanks in advance.

 

Regards,

Deepesh

[Nikolay]

Hi Deepesh,

Is it possible that you have set a categoryAxis.labels.step or categoryAxis.labels.skip? This might be affecting the rendering of the labels. Also, the categoryAxis.autoBaseUnitSteps and categoryAxis.baseUnit or categoryAxis.baseUnitStep can be interfering with the rendered labels.

Feel free to assemble and share a runnable Dojo demo where the problem is replicated and isolated so I can investigate further.

• https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.baseunitstep

Regards,

Nikolay