Google Charts - Google Charts tutorial - Basic Line Chart with Crosshairs - chart js - google graphs - google charts examples




What are Crosshairs in Basic Line Chart?

  • Crosshairs are thin vertical and horizontal lines centered on a data point in a chart.
  • Crosshairs can appear from focus or from selection, or else it can appear from both that is focus and selection
  • Crosshairs is a pair of perpendicular lines (horizontal and vertical), moving with the mouse.
  • Crosshairs are interactive labels that appear when users hover over data points on the chart.
  • Highly customizable, crosshairs can display any combination of tokens and text and hence they can be shared across multiple charts in a graphset and be set to display under trigger modes.
 basic line chart with crosshairs

Learn google charts - google charts tutorial - basic line chart with crosshairs - google charts examples - google charts programs

Basic Line Chart with Crosshairs

Configuration

  • Here the code which is given below shows us the configuration for basic line chart with crosshairs and we have added crosshair configuration to show crosshairs on the selection

sample code

// Set chart options
var options ={
crosshair:{
color:'#000',
trigger:'selection'
}
};
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team
  • The program which is given below shows us the full program of basic line chart with crosshairs which is given below.

sample code

googlecharts_line_crosshairs.html

 Tryit
<html>
<head>
<title>wikitechy Google Charts Tutorial</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart','line']});  
</script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
functiondrawChart() {
   // Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', ' Average Month');
data.addColumn('number', 'Vostok');
data.addColumn('number', 'McMurdo');
data.addColumn('number', 'London');
data.addColumn('number', ‘sydney');
data.addColumn('number', ‘Amundsen');
data.addColumn('number', ‘Rotheron Point');
data.addColumn('number', ‘New York’);
data.addRows([
      ['Jan',  7.0, -0.2, -0.9, 3.9],
      ['Feb',  6.9, 0.8, 0.6, 4.2],
      ['Mar',  9.5,  5.7, 3.5, 5.7],
      ['Apr',  14.5, 11.3, 8.4, 8.5],
      ['May',  18.2, 17.0, 13.5, 11.9],
      ['Jun',  21.5, 22.0, 17.0, 15.2],
      ['Jul',  25.2, 24.8, 18.6, 17.0],
      ['Aug',  26.5, 24.1, 17.9, 16.6],
      ['Sep',  23.3, 20.1, 14.3, 14.2],
      ['Oct',  18.3, 14.1, 9.0, 10.3],
      ['Nov',  13.9,  8.6, 3.9, 6.6],
      ['Dec',  9.6,  2.5,  1.0, 4.8]
   ]);

   // Set chart options
var options = {'title' : 'Comparative Climate data',
hAxis: {
title: 'Month',
      },
vAxis: {
title: ' Average Monthly Temperature',
      }, 
      'width':550,
      'height':400,	
	crosshair: {
color: '#000',
trigger: 'selection'
      }
   };

   // Instantiate and draw the chart.
var chart = new google.visualization.LineChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Output:


Related Searches to Google Charts - Basic Line Chart with Crosshairs

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×