CODEWITHSUNDEEP
javascriptgoogle-visualization
user5174952
user5174952

Reputation: 147

Google Line Chart Add Hover Title To X Value

When I hover over a point in my line chart/graph I get only the Y value and not the X value.

What I get:

36
Speed: 120

What I want:

Distance: 36

Speed: 120

Code:

<script type="text/javascript" src="https://www.google.com/jsapi" ></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', "Distance");
      data.addColumn('number', "Speed");

      data.addRows(<?php echo json_encode($DistanceSpeedArray,  JSON_NUMERIC_CHECK); ?>);

        var options = {
         focusTarget: 'category',

      backgroundColor: 'none',
      chartArea: {
            backgroundColor: 'transparent',
            left: 40,
            top: 40,
            width: 1200,
            height: 350
        },


      legend: {
          position: 'top'
      },
      hAxis: {title: 'Distance (KM)',  titleTextStyle: {color: 'black'}},
      //vAxis: {title: 'Speed (KM/H)',  titleTextStyle: {color: 'black'}},
    colors: ['green'],


      crosshair: {
          orientation: 'vertical'
      },
      animation: {
          startup: true,
          duration: 5000
      },
      }; 

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

      chart.draw(data, options);
}

The above code is a complete code including the focusTarget: 'category' which still returns only the Y title. I have also included a screenshot.enter image description here

Upvotes: 1

Views: 876

Answers (2)

Dr.Molle
Dr.Molle

Reputation: 117334

You may apply a format to the Distance-column

new google.visualization.PatternFormat("Distance: {0}")
    .format(data, [0], 0);

https://jsfiddle.net/6tf2fatz/

Upvotes: 1

Purvesh Desai
Purvesh Desai

Reputation: 1805

Basically you need to add focusTarget: 'category' for focus on a grouping of all data points along the major axis. Try below code,

<script type="text/javascript" src="https://www.google.com/jsapi" ></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Distance');
    data.addColumn('number', "Speed");

    data.addRows(<?php echo json_encode($DistanceSpeedArray,  JSON_NUMERIC_CHECK); ?>);

    ...

    var options = { focusTarget: 'category' };

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

Upvotes: 0

Related Questions