Google Charts - Google Charts tutorial - Area Chart with Inverted Axes - chart js - google graphs - google charts examples




What is Inverted Axes?

  • Inverted Axes represents the percentages which is done using numbers is known as Inverted Axes which is done over time
  • Inverted Axes use X axes and Y axes to connect the axis points which is done in a chart forming a progression which is used for inverting the axis
  • Inverted Axes which are used in axis points are connected by X and Y axes which are used in area chart.

Configuration:

Here the code which is given below shows us the configuration for Inverted Axes

Code:

// Set chart options
var options = {
   orientation: 'vertical'
};
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

The sample code which is given below shows us the full program of Inverted Axes which is used.

Sample Code:

googlecharts-area-inverted.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">
     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([
      ['Year', 'Asia', 'Europe'],
	  ['2012',  900,      390],
      ['2013',  1000,      400],
      ['2014',  1170,      null],
      ['2015',  1250,       480],
      ['2016',  1530,      540]
      ]);

   var options = {
      title: 'Population (in millions)',
      hAxis: {
         title: 'Year',  
         titleTextStyle: {
            color: '#333'
         }
      },
      vAxis: {
         minValue: 0
      }
   };  

   // Instantiate and draw the chart.
   var chart = new google.visualization.AreaChart(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 - Area Chart with Inverted Axes

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.

×