CODEWITHSUNDEEP
javascriptgoogle-visualization
Gerico
Gerico

Reputation: 5169

Format google line chart tooltip data to use a percentage

I have a line chart with data coming from a test JSON file, like so:

{
  "cols": [
        {"id":"Day","label":"Day","type":"number"},
        {"id":"Failed","label":"Checks Failed","type":"number"},
        {"id":"Passed","label":"Checks Passed","type":"number"},
      ],
  "rows": [
        {"c":[{"v":"1","f":null},{"v": "25","f":null},{"v": "72","f":null}]},
        {"c":[{"v":"2","f":null},{"v": "6","f":null},{"v": "67","f":null}]},
        {"c":[{"v":"3","f":null},{"v": "6","f":null},{"v": "32","f":null}]},
        {"c":[{"v":"4","f":null},{"v": "6","f":null},{"v": "7","f":null}]},
        {"c":[{"v":"5","f":null},{"v": "6","f":null},{"v": "57","f":null}]},
      ]
}

I have my chart script:

var graph_1 = $.ajax({
    url: "/linegraph.json",
    dataType: "json",
    async: false
}).responseText;

var data = new google.visualization.DataTable(graph_1);

var linechart_1 = new google.charts.Line(document.getElementById('lg1'));

var lg1_options = {
  legend: {position: 'none'},
  height: 100,
  vAxis: {format: '#%'}
};

linechart_1.draw(data, lg1_options);

The format option doesn't seem to be giving me the results other suggest it should. My tooltip just shows a plain number, whereas I'd like to see the number followed by %. Where am I going wrong?

Upvotes: 0

Views: 428

Answers (1)

Charles Clayton
Charles Clayton

Reputation: 17966

The Material Charts are in beta. The appearance and interactivity are largely final, but the way options are declared is not. If you are converting a Classic Line Chart to a Material Line Chart, you'll want to replace this line:

chart.draw(data, options);

...with this:

chart.draw(data, google.charts.Line.convertOptions(options));

Docs

So you'll want to replace your code with this:

linechart_1.draw(data, google.charts.Line.convertOptions(lg1_options));

Note that the #% formatter forces it to interpret your values as percentages, ie. 5 == 500%, not 5%, so you probably want to use format:'#\'%\''

JSFiddle

Upvotes: 1

Related Questions