Below we have an example where x values in dataPoint are date object.
Below we have an example where x values in dataPoint are timeStamps (integers). It should be kept in mind that when giving values in x as dateTime stamps, one should remember to set xValueType to “dateTime”. You should also note that timestamps used are in milliseconds. You can convert Unix timestamp to milliseconds by multiplying it by 1000.
If date time values are stored in UTC format (on the server), it can be converted to local Time using Date.UTC function. The UTC() method returns the number of milliseconds between a specified date and midnight of January 1, 1970, according to universal time.
Example: x: new Date (Date.UTC (2012, 10, 20))
lets understand this concept with the help of an example.
There are often requirements where it is required to format date in a custom way. To read more on formatting dateTime values read formatting date and time.
Below is an example that shows abbreviated name of a month on axis.
Also See:
Comments 55
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix
Hello, i am using line graph with fallowing data, x-axis not scaling to day from hour, idea here is i want x-axis to scale, could you tell what is wrong
[{“dataPoints”:[{“x”:1395637200000,”y”:26588.0},{“x”:1395723600000,”y”:68615.0},{“x”:1395810000000,”y”:67831.0},{“x”:1395896400000,”y”:35920.0}],”legendText”:”Enterprise”,”showInLegend”:true,”type”:”line”,”xValueType”:”dateTime”}]
I would like to have vertical gridlines at the beginning of each month and then have the month name beneath the axis and centered horizontally between the gridlines. Is this capability already there? If not, I could perhaps try to do it myself …
Tad,
You can use StripLines for the same.
Anjali,
Thanks for the suggestion! After looking at the StripLines page, however, that doesn’t quite seem to be what I want to show. Can the “Formatting Date” example be modified so that (1) there are tick marks on the x-axis at the beginning of every month and (2) the month names are centered between the tick marks below the x-axis?
Tad
tad,
As of now it is not possible to show labels between grid lines / tick marks.
I would like to have date(2014-10-11) on my xaxle and time(0:1:1.23) om my yaxle. is there a way to do that?
jerkermontelius,
Time values are not supported on y axis.
Any other alternatives to plot time on y Axis?
bodgan,
Sorry but we don’t have any workaround as of now.
Hi!
I am also looking for a x axis date and y axis time option, I looked at morris.js and they have a simple (?) solution:
yLabelFormat A function that accepts y-values and formats them for display as y-axis labels.
eg: function (y) { return y.toString() + ‘km’; }
Overhere: http://morrisjs.github.io/morris.js/lines.html
Is that easy to implement? I really love canvasjs so I hope you can make something like that!
Greetings and thanks!
Marco
marco,
Thanks for your suggestion. We already have this (formatter function) feature on our roadmap – but don’t have a timeline yet.
I’m using timestamps as x-values and I like very much the automatic scaling behaviour from months to days to hours if I zoom in/out.
Now I want to change date/time formatting, eg. time format to 24 hours (hh:mm without TT) and tried this with xAxis valueFormat, but then x-values are formatted always the same, regardless of the zooming level.
I wrote also a german culture definition and monthnames works nice, but there is no possibility to change the datetime formatstring. Is there maybe any other way?
Hi ! Since it’s been some time, maybe you have found a way to do this.
I’m trying to do the same thing and was testing the formatDate function, however, I don’t know how to detect the automatic formatting (in order to change it depending on what it is) within the function.
Did you find any workaround ?
Yes, this is possible now using rangeChanging event and valueFormatString. Here is an example.
Time values not supported on y axis, thats something very common we plot: “This day took so much time!!”
Why the month is not correct? please look at first chart ….
novice,
In JavaScript, Months are indexed from 0 to 11. Please refer to this post.
I tried to use your example for Date time example using TimeStamps with following data.
I am getting weird time on x axis (500 ms, 000 ms, 200 ms etc)
I am doing any mistake here?
{ x: 1428728497, y :23.866878382365},
{ x: 1428728557, y :20.422467549642},
{ x: 1428728617, y :14.559834416707},
{ x: 1428728677, y :14.363437143962},
{ x: 1428728737, y :18.799813715617},
{ x: 1428728797, y :19.133904647827},
{ x: 1428728857, y :18.570691426595},
{ x: 1428728917, y :19.195905558268},
{ x: 1428728977, y :20.945813369751},
{ x: 1428729037, y :18.404485066732},
{ x: 1428729097, y :20.908483505249},
{ x: 1428729157, y :18.282356389364},
{ x: 1428729217, y :22.355866495768},
{ x: 1428729277, y :19.75818494161},
{ x: 1428729337, y :20.750552622477},
{ x: 1428729397, y :16.754368209839},
{ x: 1428729457, y :20.546474202474},
{ x: 1428729517, y :22.450552622477},
{ x: 1428729577, y :17.373915227254},
{ x: 1428729637, y :19.719595718384},
{ x: 1428729697, y :20.314526875814},
{ x: 1428729757, y :22.298607126872},
{ x: 1428729817, y :20.596392695109},
{ x: 1428729877, y :23.759210205078},
{ x: 1428729937, y :22.395275878906},
{ x: 1428729997, y :21.49378789266},
{ x: 1428730057, y :27.279175313314},
{ x: 1428730117, y :51.119049962362},
{ x: 1428730177, y :47.204738108317},
{ x: 1428730237, y :28.098966725667},
{ x: 1428730297, y :20.719780858358},
{ x: 1428730357, y :20.87958577474},
{ x: 1428730417, y :30.556852086385},
{ x: 1428730477, y :37.925203831991},
{ x: 1428730537, y :35.507149759928},
{ x: 1428730597, y :34.366343561808},
{ x: 1428730657, y :28.153739293416},
{ x: 1428730717, y :27.860219955444},
{ x: 1428730777, y :27.905272293091},
{ x: 1428730837, y :18.990245310465},
{ x: 1428730897, y :21.615537134806},
{ x: 1428730957, y :21.23920211792},
{ x: 1428731017, y :17.422957229614},
{ x: 1428731077, y :8.6352157592773},
{ x: 1428731137, y :13.338976923625},
{ x: 1428731197, y :12.926325480143},
{ x: 1428731257, y :13.236938095093},
{ x: 1428731317, y :15.778014882406},
{ x: 1428731377, y :16.093700281779},
{ x: 1428731437, y :15.09569384257},
{ x: 1428731497, y :14.178426106771},
{ x: 1428731557, y :13.171423339844},
{ x: 1428731617, y :16.358667246501},
{ x: 1428731677, y :12.741273117065},
{ x: 1428731737, y :13.40145149231},
{ x: 1428731797, y :11.223570378621},
{ x: 1428731857, y :14.365817642212},
{ x: 1428731917, y :9.2164938608805},
{ x: 1428731977, y :11.219588343302},
{ x: 1428732037, y :10.306739171346},
{ x: 1428732097, y :11.521423085531},
{ x: 1428732157, y :8.7259704589844},
{ x: 1428732217, y :10.556772613525},
{ x: 1428732277, y :13.724550247192},
{ x: 1428732337, y :13.580624898275},
{ x: 1428732397, y :13.931787745158},
{ x: 1428732457, y :19.498254394531},
{ x: 1428732517, y :18.695894495646},
{ x: 1428732577, y :28.103886413574},
{ x: 1428732637, y :26.222127151489},
{ x: 1428732697, y :28.62385597229},
{ x: 1428732757, y :24.048002115885},
{ x: 1428732817, y :27.798343276978},
{ x: 1428732877, y :24.662589136759},
{ x: 1428732937, y :28.181807072957},
{ x: 1428732997, y :25.727720896403},
{ x: 1428733057, y :27.727224858602},
{ x: 1428733117, y :26.784706115723},
{ x: 1428733177, y :25.495252990723},
{ x: 1428733237, y :24.584916814168},
{ x: 1428733297, y :24.999391174316},
{ x: 1428733357, y :23.689236577352},
{ x: 1428733417, y :23.175502268473},
{ x: 1428733477, y :24.488683700562},
{ x: 1428733537, y :24.549731063843},
{ x: 1428733597, y :21.211827341715},
{ x: 1428733657, y :21.072584660848},
{ x: 1428733717, y :18.530957285563},
{ x: 1428733777, y :20.250311406453}
Anil,
Chart automatically shows labels based on the range of values that you have provided. But you can override the same by setting valueFormatString property.
I want to plot a graph date and time along y axis speed. i want to put the date time format as (2012, 00, 1 22:12:12). how can i do this.
aftab,
Do you mean to say a chart with speed on y axis and dateTime on x axis ?
My JSON is not scaling the date. It shows only time o xAxis. Here is my stringifyed JSON:
[
{
“type”: “area”,
“xValueType”: “dateTime”,
“showInLegend”: true,
“legendText”: “Portal principal”,
“dataPoints”: [
{
“x”: 1393856201,
“y”: 2
},
{
“x”: 1410626011,
“y”: 1
},
{
“x”: 1435072710,
“y”: 2
},
{
“x”: 1435080731,
“y”: 1
},
{
“x”: 1435083830,
“y”: 2
},
{
“x”: 1435083903,
“y”: 1
},
{
“x”: 1435138285,
“y”: 2
},
{
“x”: 1435256090,
“y”: 1
}
]
},
{
“type”: “area”,
“xValueType”: “dateTime”,
“showInLegend”: true,
“legendText”: “Portal da Entrada”,
“dataPoints”: [
{
“x”: 1412590825,
“y”: 2
},
{
“x”: 1435072770,
“y”: 1
}
]
}
]
Whats is wrong guys?
This is not UNIX timestamp format. Maybe you should mention that?
Thanks for pointing. I’ve updated the same.
This is going to sound horribly stupid, but in the first example, why is the graph off by one month?
E.g. In the code it says:
{ x: new Date(2012, 01, 1), y: 26}, (January 1st)
But the graph shows FEBRUARY 1st?
0 is Jan and 1 is Feb in JavaScript. Please refer to this thread.
How Can i Use Time
Eg :
12:45:22
10:41:56
14:05:26
The X-Axis bugs out when using “column” as the chart type. Adds months that are out of place
Can you please create a jsfiddle for this.
I have to show Financial Quarters on my X-axis as Q1 FY 2015, Q2 FY 2015, etc. Pleas suggest how can I achieve this.
You can consider using stripline for each quarter with different color.
May be I was not clear in my question. I want to show Q1 FY 2015, Q2 FY 2015 on x-axis as scale and I get Time stamp in my JSON. Please suggest.
Can you send us some snapshots / rough sketch, so that we can suggest you the best approach.
How do I change the sort order? I would like the newest date to be on the Left side, not on the right side. It doesn’t matter how I create the array, ChartJS just sorts the dates from oldest (left) to newest (right) – I am European, I would like it the other way around please? I cant work out how to do it.
Currently, the dates are sorted automatically from oldest to latest dates.
We will be implementing this feature in the upcoming version.
Come can i publish time, eg:
05:30
05:31
05:32
05:33
Help appreciated.
You can set valueFormatString and xValueFormatString as “HH:MM”. You can learn more about formatting dates here.
How to make x-axis auto adjusting when multiple dateTime values accumulating in a graph?
By default axis labels will auto adjust if you don’t set interval of axis. In case you are facing any issue please create a jsfiddle so that we can have a look.
How to Create a Range chart using Time(X axis) and day(Y-axis)? Please help.
Hi sandy,
There are two ways in which you can actually do the required. Firstly, you can change the graph into Range Bar which will bring the y axis down horizontally and x-axis vertically, or you can use this example to generate a range graph with time on x-axis and date on y-axis.
Does CanvasJS support a graph with incontinuous Date-Time x-axis? My goal is to draw a stock trend chart for a single day with several trading time-slots, for example, 9 a.m – 11:30 am, then 1 p.m to 4 p.m.
But between 11:30 a.m to 1 p.m, there would be a long straight line representing the non-trading period, which is what I want to get rid of.
Is there a way to make the ending point of the first trading time-slot also the starting point of the second on the x-axis in one single graph?
Thanks!
Hi,
I hope Empty/ Null Data Points will fulfil your requirement. If not any example with pictorial representation will help us to understand better.
Goodd article. I will be dealing with many of these issues as well..
How to get make a multi line chart with the last 30 days on X-axis?
Amar,
You can shift the dataPoints as the length crosses 30. Here is an example.
Hi, after reading this amazing post i am too cheerful to share
my familiarity here with colleagues.
can i add only date on X axis and string value on Y axis. i.e. I have to draw graphs based on date value. Is it possible ?
Yes, x axis support date-time values as mentioned in the documentation. As of now y axis doesn’t support label/text. But using labelFormatter you can map y values to corresponding label. Here is an example.
Hi,
I have a problem and your fiddle exactly shows it.
I do not see any custom labels and in addition the x-axis labels are not aligned with the data points.
The first label is so far left, that one can see only the end… and the third data point has no label at all
Whenever I have the x-axis as datetime (using seconds or js dates), the x-axis labels are out of my control.
Regards,
Christian
Sorry, my mistake with the custom labels. In your fiddle they are related to the y-axis and that works. Anyhow my problem with the x-Axis can still be seen in the fiddle.
I have data for a daily price, but there are no prices on weekends, I don’t want to use null points to continue the line over the gap – I want the gap to be removed so the x axis goes Thurs, Fri, Mon, Tues… can this be done?
also where are you getting my avatar from for this comment box? lol
I switched to label: datestring rather than x: new Date(datestring)
=)
You can achieve this by just passing labels and Y-values as shown in this example.