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

What is Basic Stepped Chart?

  • Basic Stepped Chart has a character label for an on-page button which opens in an in-page dialog box that enables users to edit, change and customize the chart.
  • Basic Stepped Chart has a vector of column names of the numerical variables to be plotted and is displayed as a separate line which is used.
  • The default opacity for Basic Stepped Chart has the colored area under an area chart series, where 0.0 is fully transparent and 1.0 is fully opaque.
  • Basic Stepped Chart has a list of configuration options for Google Basic Stepped Chart.
  • Basic Stepped Chart names the character column which contains the category labels which is used for the x-axes.


  • The syntax which is given below gives us the configuration for Basic Stepped Chart and we have used SteppedAreaChart class to show stepped area chart.


//SteppedAreaChart chart
var chart = new google.visualization.SteppedAreaChart(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 of Basic Stepped Chart

Sample Code:


<title>Google Charts Tutorial</title>
   <script type="text/javascript" src=""></script>
   <script type="text/javascript" src=""></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart']});     
<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'],
      ['Stephenaie Travis  (1935)', 7.4,       8.9],
      ['Scarlet Phoneix (1959)',   7.9,      8.5],
      ['Max Matt (1978)',        7.5,         8.4],
      ['Stephen Montemgory (2008)',9.4,       8.2]

   var options = {
      title: 'The detective agents and their mysteries',
      vAxis: {title: 'Accumulated Rating'}      
   // Instantiate and draw the chart.
   var chart = new google.visualization.SteppedAreaChart(document.getElementById('container'));
   chart.draw(data, options);
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team


Related Searches to Google Charts - Basic 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 to your ad blocking whitelist or disable your adblocking software.