- Google Charts Tutorial
- Google Charts - Home
- Google Charts - Overview
- Google Charts - Environment Setup
- Configuration Syntax
- Google Charts - Area Charts
- Google Charts - Bar Charts
- Google Charts - Bubble Charts
- Google Charts - Calendar Charts
- Google Charts - Candlestick Charts
- Google Charts - Column Charts
- Google Charts - Combination Chart
- Google Charts - Histogram Charts
- Google Charts - Line Charts
- Google Charts - Maps
- Google Charts - Organization Chart
- Google Charts - Pie Charts
- Google Charts - Sankey Charts
- Google Charts - Scatter Charts
- Stepped Area Charts
- Google Charts - Table Chart
- Google Charts - Timeline Charts
- Google Charts - TreeMap Chart
- Google Charts - Trendline Charts
- Google Charts Useful Resources
- Google Charts - Quick Guide
- Google Charts - Useful Resources
- Google Charts - Discussion
Google Charts - Basic Stepped Chart
Following is an example of a basic stepped area chart. 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 SteppedAreaChart class to show stepped area chart.
//SteppedAreaChart chart var chart = new google.visualization.SteppedAreaChart(document.getElementById('container'));
Example
googlecharts_stepped_basic.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" 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'], ['Alfred Hitchcock (1935)', 8.4, 7.9], ['Ralph Thomas (1959)', 6.9, 6.5], ['Don Sharp (1978)', 6.5, 6.4], ['James Hawes (2008)', 4.4, 6.2] ]); var options = { title: 'The decline of \'The 39 Steps\'', vAxis: {title: 'Accumulated Rating'} }; // 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>
Result
Verify the result.
googlecharts_stepped_charts.htm
Advertisements