English 中文(简体)
Google Charts Tutorial

Google Charts Useful Resources

Selected Reading

Google Charts - Combination Chart
  • 时间：2024-12-22

Google Charts - Combination Chart

Previous Page Next Page  

Combination chart helps in rendering each series as a different marker type from the following pst: pne, area, bars, candlesticks, and stepped area. To assign a default marker type for series, use the seriesType property. Series property is to be useed to specify properties of each series inspanidually. We ve already seen the configuration used to draw this chart in Google Charts Configuration Syntax chapter. So, let s see the complete example.

Configurations

We ve used ComboChart class to show combination based chart.

//combination chart
var chart = new google.visuapzation.ComboChart(document.getElementById( container ));

Example

googlecharts_combination_chart.htm

<html>
   <head>
      <title>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 ]});     
      </script>
   </head>
   
   <body>
      <span id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </span>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visuapzation.arrayToDataTable([
               [ Fruit ,  Jane ,  John ,  Average ],
               [ Apples , 3, 2, 2.5],
               [ Oranges , 2, 3, 2.5],
               [ Pears , 1, 5, 3],
               [ Bananas , 3, 9, 6],
               [ Plums , 4, 2, 3]      
            ]);
              
            // Set chart options
            var options = {
               title :  Fruits distribution ,
               vAxis: {title:  Fruits },
               hAxis: {title:  Person },
               seriesType:  bars ,
               series: {2: {type:  pne }}
            };

            // Instantiate and draw the chart.
            var chart = new google.visuapzation.ComboChart(document.getElementById( container ));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Result

Verify the result.