Google Charts - Google Charts tutorial - Combination Chart - chart js - google graphs - google charts examples




What is Combination Chart in google charts?

  • Combination chart helps in rendering each series as a different marker type from the following list,
    • line,
    • area,
    • bars,
    • candlesticks,
    • and stepped area.
  • To assign a default marker type for series, use the seriesType property.
  • Series property is to be used to specify properties of each series individually.
 learn google charts  tutorial - combination chart- google  charts example

learn google charts tutorial - combination chart- google charts example

Configurations

  • You have used ComboChart class to show combination based chart.
//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Example

 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']});     
   </script>
</head>
<body>
<div id="container" style="width: 650px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = google.visualization.arrayToDataTable([
      ['Fruit', 'Arnold', 'Vincent', 'John'],
      ['Apricot', 4, 3, 3.5],
      ['Blueberry', 3, 4, 3.5],
      ['Fig', 2, 6, 4],
      ['Guava', 4, 10, 7],
      ['Pear', 5, 3, 4]      
    ]);
  
   // Set chart options
   var options = {
      title : 'Fruits distribution',
      vAxis: {title: 'Fruits'},
      hAxis: {title: 'Person'},
      seriesType: 'bars',
      series: {2: {type: 'line'}}
   };

   // Instantiate and draw the chart.
   var chart = new google.visualization.ComboChart(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 - Combination 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.

×