Google Charts - Google Charts tutorial - Material Column Chart - chart js - google graphs - google charts examples




What is Material Column Chart?

  • A material column chart is a vertical bar chart rendered in the browser using SVG or VML is appropriate for the user's browser.
  • Material column charts display tooltips when the user hovers over the data for a horizontal version of this chart
  • A material column chart is a chart or graph that presents grouped data with rectangular columns lengths proportional to the values that they represent.
  • The Material Column Chart can be plotted vertically or horizontally or in x axis and in y axis.
  • X axis of the material column chart shows the specific categories which is being compared, and Y axis represents a discrete value
  • Material Column Charts is used for more complex comparisons of data with grouped column charts and stacked column charts

Configuration

  • The code which is given below shows us the configuration for Material Column Chart and We have used Bar class to show material chart.

Syntax

//classic chart
var chart = new google.visualization.ColumnChart(document.getElementById('container'));
//Material chart
var chart = new google.charts.Bar(document.getElementById('container'));
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team
  • The sample code which is given below gives us the sample code for material column chart

Sample Code:

 Tryit<html>
<head>
<title>Wikitechy Google Charts Tutorial - Wikitechy</title>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart','bar']});     
   </script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Purchase'],
	  ['2013',  800,      590],
      ['2014',  900,      600],
      ['2015',  1000,      740],
      ['2016',  1100,       880],
      ['2017',  1300,      940]
      ]);

   var options = {
      title: 'Sales and Purchase Compare',
   };  

   // Instantiate and draw the chart.
   var chart = new google.charts.Bar(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 - Material Column Chart

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.

×