Google Charts - Google Charts tutorial - Stacked Stepped Chart - chart js - google graphs - google charts examples




What is Stacked Stepped Chart?

  • Stacked Stepped Chart is a multi-series Step Area Chart that displays the trend of the value each series contributes over time or categories
  • Stacked stepped chart is rendered within the browser using SVG or VML and it displays tips when hovering over steps.
  • Stacked Stepped chart can display series containing data points with positive and negative values and the series which is given with positive values is stacked only with the series which contains positive values
  • Stacked Stepped chart uses vertical and horizontal lines to connect the data points in a series forming a step-like progression.
  • Stacked Stepped Chart point an angle and are replaced with horizontal segments so the whole chart reminds of stairs.

Configuration:

  • The syntax which is given below gives us the configuration for Stacked Stepped Chart and we have used isStacked configuration to show stacked chart

Syntax:

// Set chart options
var options = {
   isStacked: true
};
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 of Stacked Stepped Chart

Sample Code:

googlecharts-stepped-stacked.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" src="https://www.google.com/jsapi"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart']});     
   </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([
      ['Director (Year)',  'Rotten Tomatoes', 'IMDB'],
      ['Ronald Donald (1935)', 6.4,         8.9],
      ['Agent foxx (1959)',     5.9,         10.0],
      ['Mike King (1978)',        8.5,         9.4],
      ['Ryan Harrison (2008)',      7.4,         9.2]
   ]);

   var options = {
      title: 'Fast and Furious',
      vAxis: {title: 'Accumulated Rating'},
      isStacked: true      
   };
		
   // Instantiate and draw the chart.
   var chart = new google.visualization.SteppedAreaChart(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 Stacked Stepped 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.

×