CODEWITHSUNDEEP
javascriptgoogle-visualization
Jorge Sampayo
Jorge Sampayo

Reputation: 868

How to update dynamically the tooltip of a Google Visualization chart after being initialized?

The graph is rendered when the page loads. Then, a socket sends data to update column by column. With this, visually the data is updated correctly because the column grows but the tooltip always shows zero.

See this fiddle: http://jsfiddle.net/sw2mq7Lq/1/

function example_callback(){
  window.data_table_chart_receivable.setValue(1,1,10000); /* Bars graph */
  window.data_table_chart_receivable.setValue(1,2,10000); /* Line graph */
  window.data_table_chart_receivable.setValue(1,3,10000); /* Tooltip */

  window.chart_receivable.draw( window.data_table_chart_receivable, window.options_chart_receivable );
}

The example_callback() is simulating data inserted after the page load, inserting data for the column Nov. The column visually is different from zero but the tooltip still shows zero.

And the column Feb that is inserted in the page load shows correctly the tooltip.

How I can update the value of the tooltips after being initialized?

Inspecting in Chrome shows that the value is updated to 100000, but the format is not updated and still shows $ 0.00:

enter image description here

Upvotes: 1

Views: 503

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

Tooltips display the formatted value, so you just need to re-format the data.

See example (from provided fiddle)... 

function draw_chart_receivable() {
  var data_table = new google.visualization.DataTable();

  data_table.addColumn({"type":"string","label":"Mes"});
  data_table.addColumn({"type":"number","label":"Ventas"});
  data_table.addColumn({"type":"number","label":"Ventas"});
  data_table.addColumn({"type":"number","role":"tooltip"});

  data_table.addRow([{v: "2015-10-01", f: "Oct"}, {v: 0.0}, {v: 0.0}, {v: 0.0}]);
  data_table.addRow([{v: "2015-11-01", f: "Nov"}, {v: 0.0}, {v: 0.0}, {v: 0.0}]);
  data_table.addRow([{v: "2015-12-01", f: "Dic"}, {v: 0.0}, {v: 0.0}, {v: 0.0}]);
  data_table.addRow([{v: "2016-01-01", f: "Ene"}, {v: 0.0}, {v: 0.0}, {v: 0.0}]);
  data_table.addRow([{v: "2016-02-01", f: "Feb"}, {v: 22609.45}, {v: 22609.45}, {v: 22609.45}]);
  data_table.addRow([{v: "2016-03-01", f: "Mar"}, {v: 0.0}, {v: 0.0}, {v: 0.0}]);

  var formatter = new google.visualization.NumberFormat({decimalSymbol: ".", groupingSymbol: ",", prefix: "$ "});
  formatter.format(data_table, 1);
  formatter.format(data_table, 3);

  var chart = new google.visualization.ComboChart(document.getElementById('chart_receivable'));

  options = {fontSize: 14, height: 320, width: "100%", colors: ["#e7e7e7","#95d600"], animation: {duration: 1000, startup: true, easing: "out"}, chartArea: {width: "100%", height: "80%"}, hAxis: {baselineColor: "#CCCCCC", textStyle: {color: "#999999"}}, vAxis: {baselineColor: "#CCCCCC", textPosition: "none", ticks: [0,22609], gridlines: {count: 0}, gridlineColor: "white"}, legend: {position: "none"}, tooltip: {textStyle: {color: "#95d600", fontSize: 12}}, seriesType: "bars", bar: {groupWidth: "90%"}, series: [{enableInteractivity: false, tooltip: "one", dataOpacity: 0.4},{type: "area", lineWidth: 3, pointSize: 10, dataOpacity: 0.7}], hasCurrency: true}

  chart.draw(data_table, options);

  window.options_chart_receivable = options;
  window.data_table_chart_receivable = data_table;
  window.chart_receivable = chart;
  window.formatter = formatter;

  example_callback();
};

google.load('visualization', '1.0', {packages: ['corechart'], callback: draw_chart_receivable});

function example_callback(){
  window.data_table_chart_receivable.setValue(1,1,10000);
  window.data_table_chart_receivable.setValue(1,2,10000);
  window.data_table_chart_receivable.setValue(1,3,10000);

  // re-format data
  window.formatter.format(window.data_table_chart_receivable, 1);
  window.formatter.format(window.data_table_chart_receivable, 3);

  window.chart_receivable.draw( window.data_table_chart_receivable, window.options_chart_receivable );
}
<script src="https://www.google.com/jsapi"></script>
<div id="chart_receivable"></div>

You could also use setFormattedValue but then you would need to perform the formatting manually...

Upvotes: 1

Related Questions