javascriptjquerychartsgoogle-visualizationpygooglechart

How to add decimal point and Lacs inside tooltip in a google chart?

I am using google chart.I have created a chart according to my data. Now I want to modify my tooltip. There are two things I want to modify.

1 decimal point in every data with containing the word Lacs. Suppose I have data like 31.221(from my picture). I want it to show 31.2 Lacs.

How can I do this? Please share with me if any one has any idea about it.

enter image description here

My codes are:

HTML:

<div id="chart_div" style="height: 400px; margin: 0 auto"></div>

Script:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLogScales);

function drawLogScales() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'X');
      data.addColumn('number', 'ELSS 13%');
      data.addColumn('number', 'ULIP 9%');
      data.addColumn('number', 'SSY 8.6%');
      data.addColumn('number', 'PPF 8.1%');
      data.addColumn('number', 'LIC 6%');
      data.addColumn('number', 'NSC 5.95%');
      data.addColumn('number', 'TD 5.95%');
      data.addColumn('number', 'FD 5.5%');

      data.addRows([
        ["0",0,0,0,0,0,0,0,0],["2016",1.695,1.635,1.629,1.6215,1.59,1.58925,1.58925,1.5825], ["2017", 3.61035, 3.41715,3.398094,3.3743415,3.2754,3.273060375,3.273060375, 3.2520375], ["2018", 5.7746955, 5.3596935,5.319330084,5.269163162, 5.061924,    5.057057467, 5.057057467, 5.013399563],  ["2019", 8.220405915, 7.477065915,7.405792471,7.317465378,    6.95563944,  6.947202387, 6.947202387, 6.871636538],  ["2020", 10.98405868, 9.785001847,9.671690624,9.531680073,    8.962977806, 8.949810929, 8.949810929, 8.832076548], ["2021", 14.10698631, 12.30065201,12.13245602,11.92524616, 11.09075647, 11.07157468, 11.07157468, 10.90034076], ["2022", 17.63589453, 15.04271069,14.80484723,14.5126911,  13.34620186, 13.31958337, 13.31958337, 13.0823595], ["2023", 21.62356082, 18.03155466,17.7070641,17.30971908,   15.73697398, 15.70134858, 15.70134858, 15.38438927], ["2024", 26.12962373, 21.28939458,20.85887161,20.33330632, 18.27119241, 18.22482882, 18.22482882, 17.81303068], ["2025", 31.22147481, 24.84044009,24.28173457,23.60180413, 20.95746396, 20.89845614, 20.89845614, 20.37524737], ["2026", 36.97526654, 28.7110797,27.99896374,27.13505027,  23.8049118,  23.73116428, 23.73116428, 23.07838598], ["2027", 43.47705119, 32.93007687,32.03587462,30.95448934, 26.8232065,  26.73241855, 26.73241855, 25.9301972], ["2028", 50.82406785, 37.52878379,36.41995984,35.08330298,  30.02259889, 29.91224746, 29.91224746, 28.93885805], ["2029", 59.12619667, 42.54137433,41.18107639,39.54655052, 33.41395483, 33.28127618, 33.28127618, 32.11299524], ["2030", 68.50760223, 48.00509802,46.35164896,44.37132111, 37.00879212, 36.85076211, 36.85076211, 35.46170998]
      ]);


      var options = {
        'title' : 'Accumulation of Rs. 150000 invested every year in 80C instruments',
        colors: ['#F69688', '#A8423F', '#86A44A','#6E548D','#3D96AE','#DA8137','#403152','#CE8E8D'],
        backgroundColor: 'transparent',
        hAxis: {
          title: 'Years',
          logScale: true
        },
        vAxis: {
          title: 'Accumulated amounts (in lakhs)',
          logScale: false,
          gridlines: { color: 'transparent' }
        }     

      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
   </script>
Solution

  • you can use NumberFormat to format the data 

    // create formatter
var formatter = new google.visualization.NumberFormat({
  pattern: '0.0',
  suffix: ' Lacs'
});

// format number columns
for (var i = 1; i < data.getNumberOfColumns(); i++) {
  formatter.format(data, i);
}

    which is then displayed in the tooltip

    see following example...

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

function drawLogScales() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'X');
  data.addColumn('number', 'ELSS 13%');
  data.addColumn('number', 'ULIP 9%');
  data.addColumn('number', 'SSY 8.6%');
  data.addColumn('number', 'PPF 8.1%');
  data.addColumn('number', 'LIC 6%');
  data.addColumn('number', 'NSC 5.95%');
  data.addColumn('number', 'TD 5.95%');
  data.addColumn('number', 'FD 5.5%');

  data.addRows([
    ["0",0,0,0,0,0,0,0,0],["2016",1.695,1.635,1.629,1.6215,1.59,1.58925,1.58925,1.5825], ["2017", 3.61035, 3.41715,3.398094,3.3743415,3.2754,3.273060375,3.273060375, 3.2520375], ["2018", 5.7746955, 5.3596935,5.319330084,5.269163162, 5.061924,    5.057057467, 5.057057467, 5.013399563],  ["2019", 8.220405915, 7.477065915,7.405792471,7.317465378,    6.95563944,  6.947202387, 6.947202387, 6.871636538],  ["2020", 10.98405868, 9.785001847,9.671690624,9.531680073,    8.962977806, 8.949810929, 8.949810929, 8.832076548], ["2021", 14.10698631, 12.30065201,12.13245602,11.92524616, 11.09075647, 11.07157468, 11.07157468, 10.90034076], ["2022", 17.63589453, 15.04271069,14.80484723,14.5126911,  13.34620186, 13.31958337, 13.31958337, 13.0823595], ["2023", 21.62356082, 18.03155466,17.7070641,17.30971908,   15.73697398, 15.70134858, 15.70134858, 15.38438927], ["2024", 26.12962373, 21.28939458,20.85887161,20.33330632, 18.27119241, 18.22482882, 18.22482882, 17.81303068], ["2025", 31.22147481, 24.84044009,24.28173457,23.60180413, 20.95746396, 20.89845614, 20.89845614, 20.37524737], ["2026", 36.97526654, 28.7110797,27.99896374,27.13505027,  23.8049118,  23.73116428, 23.73116428, 23.07838598], ["2027", 43.47705119, 32.93007687,32.03587462,30.95448934, 26.8232065,  26.73241855, 26.73241855, 25.9301972], ["2028", 50.82406785, 37.52878379,36.41995984,35.08330298,  30.02259889, 29.91224746, 29.91224746, 28.93885805], ["2029", 59.12619667, 42.54137433,41.18107639,39.54655052, 33.41395483, 33.28127618, 33.28127618, 32.11299524], ["2030", 68.50760223, 48.00509802,46.35164896,44.37132111, 37.00879212, 36.85076211, 36.85076211, 35.46170998]
  ]);

  // create formatter
  var formatter = new google.visualization.NumberFormat({
    pattern: '0.0',
    suffix: ' Lacs'
  });

  // format number columns
  for (var i = 1; i < data.getNumberOfColumns(); i++) {
    formatter.format(data, i);
  }

  var options = {
    title : 'Accumulation of Rs. 150000 invested every year in 80C instruments',
    titleTextStyle: {
      fontSize: 20
    },
    colors: ['#F69688', '#A8423F', '#86A44A','#6E548D','#3D96AE','#DA8137','#403152','#CE8E8D'],
    backgroundColor: 'transparent',
    hAxis: {
      title: 'Years',
      logScale: true
    },
    vAxis: {
      title: 'Accumulated amounts (in lakhs)',
      logScale: false,
      gridlines: { color: 'transparent' }
    }

  };

  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" style="height: 400px; margin: 0 auto"></div>