0
I’m populating a Area Chart from the datatable returned by
Analytics API, but column Labels are populated with metric names ga:sessions, ga:pageviews,ga:goalsCompletionsAll, ga:bounces, etc....
The intention is to make the reading easier, so looking for a way to replace the value of the label, I found the option ticks, but it had no effect:
'ticks' => [ ['v' => 'ga:goalsCompletionsAll', 'f' => 'Objetivos completados'] ],
The result is:
google.load('visualization', '1.0', {
'packages': ['corechart']
});
google.setOnLoadCallback(drawChart_conversion);
function drawChart_conversion() {
var data = new google.visualization.DataTable("{\"cols\":[{\"id\":\"ga:date\",\"label\":\"ga:date\",\"type\":\"date\"},{\"id\":\"ga:sessions\",\"label\":\"ga:sessions\",\"type\":\"number\"},{\"id\":\"ga:pageviews\",\"label\":\"ga:pageviews\",\"type\":\"number\"},{\"id\":\"ga:goalCompletionsAll\",\"label\":\"ga:goalCompletionsAll\",\"type\":\"number\"}],\"rows\":[{\"c\":[{\"v\":\"Date(2016, 02, 21)\"},{\"v\":\"20912\"},{\"v\":\"60184\"},{\"v\":\"6386\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 20)\"},{\"v\":\"27073\"},{\"v\":\"70853\"},{\"v\":\"7425\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 19)\"},{\"v\":\"27603\"},{\"v\":\"79345\"},{\"v\":\"8738\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 18)\"},{\"v\":\"27830\"},{\"v\":\"84522\"},{\"v\":\"9350\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 17)\"},{\"v\":\"29514\"},{\"v\":\"77769\"},{\"v\":\"7936\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 16)\"},{\"v\":\"30244\"},{\"v\":\"82223\"},{\"v\":\"8605\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 15)\"},{\"v\":\"33329\"},{\"v\":\"89677\"},{\"v\":\"9227\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 14)\"},{\"v\":\"35109\"},{\"v\":\"97420\"},{\"v\":\"10222\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 13)\"},{\"v\":\"28073\"},{\"v\":\"65107\"},{\"v\":\"5984\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 12)\"},{\"v\":\"29413\"},{\"v\":\"69381\"},{\"v\":\"6604\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 11)\"},{\"v\":\"36198\"},{\"v\":\"95145\"},{\"v\":\"9865\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 10)\"},{\"v\":\"40324\"},{\"v\":\"101335\"},{\"v\":\"10038\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 09)\"},{\"v\":\"42686\"},{\"v\":\"92811\"},{\"v\":\"8538\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 08)\"},{\"v\":\"28007\"},{\"v\":\"81052\"},{\"v\":\"8973\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 07)\"},{\"v\":\"28904\"},{\"v\":\"80751\"},{\"v\":\"8635\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 06)\"},{\"v\":\"23209\"},{\"v\":\"65989\"},{\"v\":\"7249\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 05)\"},{\"v\":\"22088\"},{\"v\":\"59370\"},{\"v\":\"6216\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 04)\"},{\"v\":\"29197\"},{\"v\":\"85678\"},{\"v\":\"9060\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 03)\"},{\"v\":\"30952\"},{\"v\":\"95124\"},{\"v\":\"10687\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 02)\"},{\"v\":\"33903\"},{\"v\":\"101749\"},{\"v\":\"11771\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 01)\"},{\"v\":\"30964\"},{\"v\":\"83933\"},{\"v\":\"8927\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 29)\"},{\"v\":\"28980\"},{\"v\":\"85747\"},{\"v\":\"9282\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 28)\"},{\"v\":\"22790\"},{\"v\":\"61742\"},{\"v\":\"6594\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 27)\"},{\"v\":\"21750\"},{\"v\":\"58801\"},{\"v\":\"6404\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 26)\"},{\"v\":\"13476\"},{\"v\":\"39905\"},{\"v\":\"4441\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 25)\"},{\"v\":\"21799\"},{\"v\":\"58781\"},{\"v\":\"6350\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 24)\"},{\"v\":\"32734\"},{\"v\":\"91558\"},{\"v\":\"9594\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 23)\"},{\"v\":\"32281\"},{\"v\":\"96403\"},{\"v\":\"10349\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 22)\"},{\"v\":\"37484\"},{\"v\":\"105435\"},{\"v\":\"11150\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 21)\"},{\"v\":\"29868\"},{\"v\":\"81317\"},{\"v\":\"8537\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 20)\"},{\"v\":\"28819\"},{\"v\":\"81865\"},{\"v\":\"8759\"}]}]}");
var chart_div = document.getElementById('googlechart_conversion');
var options = {
"hAxis": {
"titleTextStyle": {
"color": "#333"
},
"gridlines": {
"color": "transparent"
}
},
"vAxis": {
"ticks": [{
"v": "ga:pageviews",
"f": "teste"
}],
"minValue": 0
},
"pointsVisible": true,
" pointSize": 5,
"width": "100%",
"height": "200",
"chartArea": {
"width": "100%",
"height": "80%"
}
};
var chart = new google.visualization.AreaChart(chart_div);
chart.draw(data, options);
}<script src="https://www.google.com/jsapi"></script>
<div id="googlechart_conversion"></div>