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




What is 100% Stacked Stepped Chart?

  • A 100% Stacked Stepped Chart is a multi-series Stepped Chart that displays the trend of the percentage each value contributes over time or categories.
  • A 100% Stacked Stepped chart can display series which contains data points with negative values and a series with negative values is stacked with other series which contains negative values.
  • A 100% Stacked Stepped chart uses vertical lines to connect the data points in a series forming a step-like progression.
  • The 100% Stacked Stepped Chart series is plotted using the 100%StackedSteppedSeriesView class, which belongs to the Stepped Series Views view group.
  • The 100% Stacked Stepped Chart Series do not use the shortest distance to connect two data points.

Configuration:

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

Syntax:

// Set chart options
var options = {
   isStacked: 'percent'
};
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 100% Stacked Stepped Chart

Sample Code:

googlecharts-stepped-percent.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'],
      ['Hitchcock Mike (1935)', 7.4,         9.9],
      ['Thomas Alfred (1959)',     10.0,         8.5],
      ['Donna Jennifer Alexander (1978)',        7.5,         9.4],
      ['James Hawkins Ronaldo (2008)',      8.4,         9.2]
   ]);

   var options = {
      title: 'National Treasure Book of Secrets',
      vAxis: {title: 'Accumulated Rating'},
      isStacked: 'percent'      
   };
		
   // 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 Chart - 100% 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.

×