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.
you may apply format distance-column
new google.visualization.patternformat("distance: {0}") .format(data, [0], 0);
Comments
Post a Comment