javascript html ajax google-visualization pygooglechart

Is there any solution for intersecting two lines in google charts api shows information for both lines?

I am using google charts api for some graph.following is code which i am using

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      1170],
          ['2006',  660,       1120],
          ['2007',  1030,      540],
	  ['2008',  660,       660],
          ['2009',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

where two lines are intersecting each other two times and because of that it is showing information only for one line . Is there any way so that i can show information for both of lines when cursor is over that point?

Solution

try using...

focusTarget: 'category'

in the configuration options, see following example...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      1170],
      ['2006',  660,       1120],
      ['2007',  1030,      540],
      ['2008',  660,       660],
      ['2009',  1030,      540]
    ]);

    new google.visualization.LineChart(document.getElementById('chart_div')).draw(data, {
      focusTarget: 'category',
      title: 'Company Performance',
      curveType: 'function',
      legend: { position: 'bottom' }
    });
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

EDIT

another option would be to provide your own tooltip

see following example, pretty basic but shows the logic...

add a tooltip column, after each value column

then populate the tooltip column with an html string

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      1170],
      ['2006',  660,       1120],
      ['2007',  1030,      540],
      ['2008',  660,       660],
      ['2009',  1030,      540]
    ]);

    // add tooltip columns
    data.insertColumn(2, {type: 'string', role: 'tooltip', p: {html: true}});
    data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

    // build tooltip values
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      data.setValue(i, 2, getTooltip(i, 1, 3));
      data.setValue(i, 4, getTooltip(i, 3, 1));
    }

    // set tooltip content
    function getTooltip(row, col1, col2) {
      var tooltip = '<div class="tooltipLabel">' + data.getValue(row, 0) + '</div>';
      tooltip += '<div><span class="tooltipLabel">' + data.getColumnLabel(col1) + '</span>: ' + data.getValue(row, col1) + '</div>';
      if (data.getValue(row, col1) === data.getValue(row, col2)) {
        tooltip += '<div><span class="tooltipLabel">' + data.getColumnLabel(col2) + '</span>: ' + data.getValue(row, col2) + '</div>';
      }
      return tooltip;
    }

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {
      curveType: 'function',
      legend: { position: 'bottom' },
      pointSize: 5,
      tooltip: {
        isHtml: true
      }
    });
  },
  packages: ['corechart']
});

div {
  padding: 6px 6px 6px 6px;
  font-name: Arial;
}

.tooltipLabel {
  font-weight: bold;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>