Google Line Chart - v and f properties settings - php

Question

I am trying to have my line chart to show the result within tooltip as a string format (e.g: Jun 28, 2015 - Jul 4, 2015) while having my hAxis to display its values as date format (e.g: Jun 29).
Similar as Analytics:
However when I draw the chart with the returned Json data shown below:
{
"cols": [{
"id": "A",
"label": "Date Range",
"pattern": "",
"type": "string"
}, {
"id": "B",
"label": "Sessions",
"pattern": "",
"type": "number"
}, {
"id": "C",
"label": "Pageviews",
"pattern": "",
"type": "number"
}],
"rows": [{
"c": [{
"v": "Date(2015,5,23)",
"f": "Jun 23, 2015 - Jun 27, 2015"
}, {
"v": 1645
}, {
"v": 5237
}]
}, {
"c": [{
"v": "Date(2015,5,28)",
"f": "Jun 28, 2015 - Jul 04, 2015"
}, {
"v": 2189
}, {
"v": 6977
}]
}, {
"c": [{
"v": "Date(2015,6,05)",
"f": "Jul 05, 2015 - Jul 11, 2015"
}, {
"v": 2168
}, {
"v": 6862
}]
}, {
"c": [{
"v": "Date(2015,6,12)",
"f": "Jul 12, 2015 - Jul 18, 2015"
}, {
"v": 1661
}, {
"v": 5735
}]
}, {
"c": [{
"v": "Date(2015,6,19)",
"f": "Jul 19, 2015 - Jul 23, 2015"
}, {
"v": 1109
}, {
"v": 3826
}]
}]
}
My chart is showing the hAxis with f property's value instead of v property's value as per shown below:
The data type for the hAxis is set as string.
With the information given, may I ask how I can achieve my desired results?

Answer 1

Have you tried setting the 'options' -> 'vAxis' -> 'ticks' parameter?
Then your json data would look something like this:
{
"cols": [your columns],
"rows": [your rows],
"options": {
"vaxis": {
"ticks": ["jun 29", "jul 6", "jul 13"]
}
}
}
Here's a link to google charts documentation on line charts, I hoe this helps :-)
Edit:
Here's a working jsfiddle. I don't know what method you are using to load your data but this worked for me.
For some reason, the labels were displayed correctly after I set the width and height parameters in options.

Answer 2

Based on the working jsfiddle provided by #bjarkig82. I have figured on how to fix the issue and achieve my objective.
First, the data type for column date needs to be changed from string to date
var cols = [{
"id": "A",
"label": "Date Range",
"pattern": "",
"type": "date"
}, {
"id": "B",
"label": "Sessions",
"pattern": "",
"type": "number"
}, {
"id": "C",
"label": "Pageviews",
"pattern": "",
"type": "number"
}];
var rows = [{
"c": [{
"v": "Date(2015,5,23)",
"f": "Jun 23, 2015 - Jun 27, 2015"
}, {
"v": 1645
}, {
"v": 5237
}]
}, {
"c": [{
"v": "Date(2015,5,28)",
"f": "Jun 28, 2015 - Jul 04, 2015"
}, {
"v": 2189
}, {
"v": 6977
}]
}, {
"c": [{
"v": "Date(2015,6,05)",
"f": "Jul 05, 2015 - Jul 11, 2015"
}, {
"v": 2168
}, {
"v": 6862
}]
}, {
"c": [{
"v": "Date(2015,6,12)",
"f": "Jul 12, 2015 - Jul 18, 2015"
}, {
"v": 1661
}, {
"v": 5735
}]
}, {
"c": [{
"v": "Date(2015,6,19)",
"f": "Jul 19, 2015 - Jul 23, 2015"
}, {
"v": 1109
}, {
"v": 3826
}]
}];
Secondly, I comment the section of code shown below or it will cause my string date (e.g: Jun 28, 2015 - Jul 4, 2015) to show as date (e.g: Jun 28, 2015) within the tooltip instead.
var formatter = new google.visualization.DateFormat({ pattern: "EEEE, MMM dd, yyyy" });
formatter.format(data, 0);
To understand better, please check out this jsfiddle