Log Scale Example

An example of Log Scale.

by Denis Tverdokhlebov

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
      <div id="dashboard">
        <div id="chart"></div>
        <div id="chart-slider"></div>
      </div>

CSS

#chart-slider {
  display:none;
}

JavaScript

/**
 * Annotated Google Line Chart with Date Range Selector
 * @author @superpikar <[email protected]
 */

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

const arrData = [
  { date: '2017-01-01', dateLabel: 'метка 1', title: '1' },
  { date: '2017-02-01', dateLabel: 'метка 2', title: '2' },
  { date: '2017-03-01', dateLabel: 'метка 3', title: '3' },
];

function seeMeetingDetail (key) {
  const data = arrData[key];
  console.log(data);
  alert(`${data.dateLabel} - ${data.title}`);
}

function renderHtmlTooltip(key, val) {
  return `
    <div class="chart-tooltip">
      <dl>
        <dt>${val.dateLabel}</dt>
        <dd>${val.title}</dd>
      </dl>
      <a class="btn btn-default btn-xs" onClick="seeMeetingDetail(${key})">See Detail</a>
    </div>
  `;
}

function drawChart() {  
  const arrDataMap = arrData.map((val, key) => {
    return [new Date(val.date), key+1, val.title, renderHtmlTooltip(key, val)];
  });
  
  const chartData = new google.visualization.DataTable();
  chartData.addColumn('date', 'Date'); 
  chartData.addColumn('number', 'x value');
  chartData.addColumn({type:'string', role:'annotation'});
  chartData.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
  chartData.addRows(arrDataMap);
  const chartOptions = {
    legend: 'none',
    tooltip: {
      isHtml: true,
      trigger: 'selection'
    },
    pointSize: 15,
    lineWidth: 7,
    vAxis : {
      gridlines : {
        count : 0
      }
    },
  };
  const dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
  const dateSlider = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'chart-slider',
    options: {
      filterColumnIndex: 0,
      ui: {
        chartType: 'LineChart',
        chartOptions: {
          chartArea: {height: '50'},
          hAxis: {
            baselineColor: 'none'
          },
         ...