javascript - Google Line Chart Add Hover Title To X Value -


when hover on point in line chart/graph y value , not x value.

what get:


36
speed: 120


what 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 complete code including focustarget: 'category' still returns y title. have included screenshot.enter image description here

you may apply format distance-column

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

https://jsfiddle.net/6tf2fatz/


Comments

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

Delphi 7 and decode UTF-8 base64 -

html - Is there any way to exclude a single element from the style? (Bootstrap) -