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

Passing date value for Stock Chart

13 Answers 209 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Neil
Top achievements
Rank 1
Neil asked on 13 Feb 2013, 02:46 PM
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

13 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 15 Feb 2013, 04:30 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Neil
Top achievements
Rank 1
answered on 18 Feb 2013, 10:13 AM
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

0
Alexander Valchev
Telerik team
answered on 20 Feb 2013, 12:42 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Neil
Top achievements
Rank 1
answered on 21 Feb 2013, 01:00 PM
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
0
Neil
Top achievements
Rank 1
answered on 23 Feb 2013, 03:55 PM
Hey any luck with this data ?
0
Alexander Valchev
Telerik team
answered on 25 Feb 2013, 11:49 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Neil
Top achievements
Rank 1
answered on 25 Feb 2013, 11:55 AM
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
0
Neil
Top achievements
Rank 1
answered on 25 Feb 2013, 01:37 PM
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
0
Neil
Top achievements
Rank 1
answered on 25 Feb 2013, 04:34 PM
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
0
Neil
Top achievements
Rank 1
answered on 27 Feb 2013, 09:10 AM
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
0
Armin
Top achievements
Rank 1
answered on 20 Aug 2014, 02:56 PM
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.
0
Armin
Top achievements
Rank 1
answered on 21 Aug 2014, 08:06 AM
Never mind, i found the error. The date value has to be mm/dd/yyyy hh:mm
0
Deepesh
Top achievements
Rank 1
Iron
answered on 26 Nov 2021, 11:50 AM

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
Telerik team
commented on 29 Nov 2021, 12:25 PM

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.

Regards,

Nikolay

Tags
Charts
Asked by
Neil
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Neil
Top achievements
Rank 1
Armin
Top achievements
Rank 1
Deepesh
Top achievements
Rank 1
Iron
Share this question
or