CODEWITHSUNDEEP
chartsgoogle-visualization
Frank
Frank

Reputation: 95

About google chart js

I'm using the Google Charts API to include various graphs on a webapp I'm working on.What chart type I`m using is Area Charts,Line Charts OR Column Charts.

When i switch display of the chart into week display,i want the title of any point is like the below.How should i do?Which param should i set.

target effect

Upvotes: 0

Views: 81

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

from the pic, it looks as though you're referring to the title of the tooltip
this is the formatted value of the x-axis

each cell in the data table has a value, and a formatted value
which can be set using object notation... 

{
  v: 1,
  f: 'Jan 1, 2017 - Jan, 7 2017'
}

or using the following data table methods... 

setValue(row, col, val)
setFormattedValue(row, col, formattedVal)
setCell(row, col, val, formattedVal)

in the following example, the value of the x-axis is the week number (zero-based),
and the formatted value is the date range.
a date formatter is used to build the formatted value... 

var xValue = {
  v: (i - startDate.getTime()) / oneWeek,
  f: formatDate.formatValue(dateBegin) + ' - ' + formatDate.formatValue(dateEnd)
};

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var formatDate = new google.visualization.DateFormat({
    pattern: 'MMM dd, yyyy'
  });

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Week');
  data.addColumn('number', 'y0');

  var oneWeek = (1000 * 60 * 60 * 24 * 7);
  var startDate = new Date(2017, 0, 1);
  var endDate = new Date();
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneWeek) {
    // x value
    var dateBegin = new Date(i);
    var dateEnd = new Date(i + oneWeek - 1);
    var xValue = {
      v: (i - startDate.getTime()) / oneWeek,
      f: formatDate.formatValue(dateBegin) + ' - ' + formatDate.formatValue(dateEnd)
    };

    // y value (y = 2x + 8)
    var yValue = 2 * xValue.v + 8;

    // add data row
    data.addRow([
      xValue,
      yValue
    ]);
  }

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

Upvotes: 2

Related Questions