ticks on hAxis

69 views
Skip to first unread message

drigo

unread,
May 30, 2018, 4:33:40 PM5/30/18
to Google Visualization API
Hi everybody, 

I would need some help in order to use ticks on hAxis when I have strings on such an axis. 
Specifically, i have things like the following: '2018-05-01', '2018-05-02' etc. 

I would like to select few of them only in order to make my x-axis clearer. 

I have found the examples below in the google chart documentation  but they do not 
solve my issue. 

Example: 

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Following these, I wrote these attempts on my var options but unfortunately they do not work.  

<!--hAxis: { ticks: [ new Date(2018,05,01),Date(2018,05,11) ] },-->
<!--hAxis: { title: "Days", ticks: [{f:"2018-05-11", f:"2018-05-11"}] },-->
<!--hAxis:{ticks: [ Date(2018,06,01), Date(2018,05,11) ]},-->
<!--hAxis: {ticks: [{f:'2018-05-11'},{f:'2018-05-22'}]},-->
hAxis: {ticks: ['2018-05-11','2018-05-22']},

Any idea to fix this issue?

Thanks in advance. 

Drigo
 




Daniel LaLiberte

unread,
May 30, 2018, 4:51:46 PM5/30/18
to Google Visualization API
The ticks option only works with axes that have continuous values, not discrete values.  Since your data is really dates, it would probably be better if you use actual dates in your data table, and then the ticks option should work with dates as well.  

hAxis: { title: "Days", ticks: [{v: new Date(2018, 4, 1), f:"2018-05-10"},
                                            {v: new Date(2018, 4,11), f:"2018-05-11"}] },

Note that month numbers start at 0.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/b4c344a1-6323-46ad-8c85-e73312cfef1a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


--

drigo

unread,
May 30, 2018, 6:12:25 PM5/30/18
to Google Visualization API
Hi Daniel, 

thanks a lot for your message. 

I am not sure I have done what you suggested but I still have my issue. 

Here below you can find my steps.

1) 
I used actual dates in my data table. Since I did not want minutes and seconds in my output, I have converted these into the 'Y-m-d' format using the line code "$temp[] = array('v' => date('Y-m-d', strtotime($r['data'])))" my php script. 

Note that using the line code $temp[] = array('v' => (string) $r['data']) instead of the previous one makes seconds and minutes (zero and zero in my case) display in my line chart. 

2) 
After this, I have used your tip: 

hAxis: { title: "Days", ticks: [{v: new Date(2018, 5, 10), f:"2018-05-10"}, {v: new Date(2018, 5,11), f:"2018-05-11"}] },

While I can see the title, I can not see the chosen ticks. Do you have any ideas to make this work?

Thanks a lot. 

Drigo




To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.


--

Daniel LaLiberte

unread,
May 30, 2018, 7:28:25 PM5/30/18
to Google Visualization API
If your values are strings, then they are strings and not dates, and therefore the axis will be discrete, and not continuous dates.  The one exception is string values that are formatted like the Date constructor but without the "new " prefix.  E.g. "Date(2018, 5, 10)"

Note, again, that month indices in the Date constructor and this string notation start with 0, so 5 is actually June, not May.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.


--

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/118da9e8-0292-4618-8554-7eaddd0ac4ce%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.


--

drigo

unread,
May 31, 2018, 2:09:16 PM5/31/18
to Google Visualization API
Hi Daniel, 

first of all, I would like to thank you for your support. 

I am a beginner at php/google chart. So I am grateful for your patience. 

I tried to use the only exception you mentioned in the previuos message. Unfortunately, it did not work as expected. 

If you could have a look at it, it would be kind of you. 

1) I imported my date values as they were formatted like the Date constructor but without the "new " prefix.

 $temp[] = array('v' => 'Date('.date('Y',strtotime($r['data'])).','.
                                     (date('n',strtotime($r['data'])) - 1).','.
                                     date('d',strtotime($r['data'])).')');

This is demonstrated by the fact that when I use line chart without any tick options, ticks '(Y-m-a,d)' are indeed displayed. 

2) 

After this I used the following tick option: 
hAxis:{ title: "Days", ticks: [{v: 'Date(2018, 4,01)', f:"2018-05-10"},{v: 'Date(2018, 4,11)', f:"2018-05-11"}]} ,


Is it what you suggested??

Questions: 

- is there any difference between Date(2018,4,01) and Date Date(2018,4,1)? or are they both right?

- is there any way to convert datetime values using Date constructor when I load datetime values to 
the array $temp? Something like: 

$temp[] = array('v' => new Date(date('Y',strtotime($r['data'])), (date('n',strtotime($r['data'])) - 1), date('d',strtotime($r['data'])));

I think my issue is how I define this array. 

Consideration: 

I also tried to convert my date values to timestamp ($temp[] = array('v' => strtotime($r['data']));) and then use both of the 
following lines: 

<!--hAxis: {ticks: [ 1527652800, 1526011200 ] },-->
<!--hAxis: { format: 'short', ticks: [{v:1527652800, f:'date("Y-m-d", 1527652800)'}, {v:1526011200, f:'date("Y-m-d", 1526011200)'}] },-->
 but without any success. Why? I thought timestamp were numbers. So, my first attempt should have worked. 

I am now curious to understand my mistake. 

Best, 

Drigo 


 




To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.


--

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.


--

Daniel LaLiberte

unread,
May 31, 2018, 3:25:42 PM5/31/18
to Google Visualization API
On Thu, May 31, 2018 at 2:09 PM drigo <dradif...@gmail.com> wrote:
Hi Daniel, 

first of all, I would like to thank you for your support. 

I am a beginner at php/google chart. So I am grateful for your patience. 

Understood.  But for me, I am allergic to PHP, so my eyes glaze over and I can't help much with all that.  It would be better to tell me what the PHP translates into in JS in the browser.   And it would be far better if you can point to a web page that demonstrates what you are getting.


I tried to use the only exception you mentioned in the previuos message. Unfortunately, it did not work as expected. 

If you could have a look at it, it would be kind of you. 

1) I imported my date values as they were formatted like the Date constructor but without the "new " prefix.

 $temp[] = array('v' => 'Date('.date('Y',strtotime($r['data'])).','.
                                     (date('n',strtotime($r['data'])) - 1).','.
                                     date('d',strtotime($r['data'])).')');

This is demonstrated by the fact that when I use line chart without any tick options, ticks '(Y-m-a,d)' are indeed displayed. 

2) 

After this I used the following tick option: 
hAxis:{ title: "Days", ticks: [{v: 'Date(2018, 4,01)', f:"2018-05-10"},{v: 'Date(2018, 4,11)', f:"2018-05-11"}]} ,


Is it what you suggested??

That is what I was suggesting, in general.  I'm not sure this string date notation works in the context of tick values, however, though we should make sure it does.  But if you are able to generate JS code either way, why not just just the actual JS Date constructor always?  The only reason to use the string notation is if you are passing the data through some channel that requires JSON formatted data, since Date constructors are not allowed in that context. 

 
Questions: 

- is there any difference between Date(2018,4,01) and Date Date(2018,4,1)? or are they both right?
 
In JavaScript (as in a few other languages) the 0 prefix on numbers means the number is interpreted as octal.  This won't make any difference for only one digit with a 0 prefix because 08 and 09 are specially handled (in Chrome anyway) as decimal 8 and 9.  But 011 is also decimal 9.


- is there any way to convert datetime values using Date constructor when I load datetime values to 
the array $temp? Something like: 

Values of type datetime can be specified with just 3 or 4 more parameters.  e.g. new Date(2018, 4, 10, 6, 30, 37).  The 7th number, if you provide it, is for milliseconds.  And there is a special case if you use the Date constructor with a single number, which is interpreted as milliseconds since 1970.
BTW, it is strongly encouraged that you avoid use of the Date constructor with a string, since parsing is very browser dependent.  
 
$temp[] = array('v' => new Date(date('Y',strtotime($r['data'])), (date('n',strtotime($r['data'])) - 1), date('d',strtotime($r['data'])));

I think my issue is how I define this array. 

Consideration: 

I also tried to convert my date values to timestamp ($temp[] = array('v' => strtotime($r['data']));) and then use both of the 
following lines: 

<!--hAxis: {ticks: [ 1527652800, 1526011200 ] },-->
<!--hAxis: { format: 'short', ticks: [{v:1527652800, f:'date("Y-m-d", 1527652800)'}, {v:1526011200, f:'date("Y-m-d", 1526011200)'}] },-->
 but without any success. Why? I thought timestamp were numbers. So, my first attempt should have worked. 

I am now curious to understand my mistake. 
 
I don't know what you mean by a timestamp, but if it is a specific datetime value, then see above.


Best, 

Drigo 


 




To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.


--

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.


--

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

For more options, visit https://groups.google.com/d/optout.


--
Reply all
Reply to author
Forward
0 new messages