Google Line Chart - v and f properties settings

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