Podlipnik Podlipnik - 1 month ago 23
HTML Question

Google Charts fractionDigits

I have a problem. Im relatively new to Javascript but I am working on a project where people want to have charts about their improvements. I have sucessfuly made 2 charts, while I do have problems for the 3rd one. The numbers consist of 0.000yyyyy when y stands for random numbers, and when you hover the chart, info shows 0. I put fractionDigits in options, but cant get them to work right.

Here is the code:

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Xaurum Gold Growth');


data.addRows([
[new Date(2015 , 03 , 15),0.000125],
[new Date(2015 , 04 , 09),0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875],

]);
var options = {
hAxis: {
title: 'Time',
textStyle:{color: '#FFF'},
titleTextStyle: {
color: '#fff'
}
},
vAxis: {
title: 'Value',
textStyle:{color: '#FFF'},
titleTextStyle: {
color: '#fff'
}
},
legend: {
textStyle: {color: '#fff'}
},
NumberFormat: {
fractionDigits:15,
},
annotations: {
boxStyle: {
stroke: '#765e34',
strokeWidth: 10,
}
},
backgroundColor: "transparent",
colors: ['#876c3c'],


};

var chart = new google.visualization.LineChart(document.getElementById('charta_div'));
chart.draw(data, options);
}

Answer

to format the number in the tooltip, use NumberFormat, after data is built

  // format data
  var formatter = new google.visualization.NumberFormat({
    fractionDigits: 15
  });
  formatter.format(data, 1);

see following working snippet...

google.charts.load('current', {
  callback: drawBackgroundColor,
  packages: ['corechart']
});

function drawBackgroundColor(transparent) {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'X');
  data.addColumn('number', 'Xaurum Gold Growth');
  data.addRows([
    [new Date(2015 , 03 , 15), 0.000125],
    [new Date(2015 , 04 , 09), 0.000125202590875],
    [new Date(2015, 04, 12), 0.000126019393875]
  ]);

  // format data
  var formatter = new google.visualization.NumberFormat({
    fractionDigits: 15
  });
  formatter.format(data, 1);

  var options = {
    hAxis: {
      title: 'Time',
      textStyle:{
        color: '#FFF'
      },
      titleTextStyle: {
        color: '#fff'
      }
    },
    vAxis: {
      title: 'Value',
      textStyle:{
        color: '#FFF'
      },
      titleTextStyle: {
        color: '#fff'
      }
    },
    legend: {
      textStyle: {
        color: '#fff'
      }
    },
    annotations: {
      boxStyle: {
        stroke: '#765e34',
        strokeWidth: 10,
      }
    },
    backgroundColor: 'transparent',
    colors: ['#876c3c']
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>