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.
Configuration:
- 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.
Syntax:
//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:
googlecharts-stepped-basic.html
Tryit<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'],
['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);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>