Create various chart from same data - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

  1. HOME
  2. Javascript
  3. Google Chart
  4. Chart Configuration

Description

Create various chart from same data

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>GROUPED COLUMN GOOGLE CHARTS</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

div[name=chart] {
   width: 650px;
   height: 300px;
   padding:50px;
}
label {/*from  w w  w .j a  v a  2  s.c o  m*/
   font:11px sans-serif;
}


      </style> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
      <script src="http://www.gstatic.com/charts/loader.js"></script> 
      <label>Grouped Bar</label> 
      <div name="chart" id="groupedBar" style></div> 
      <label>Stacked Bar</label> 
      <div name="chart" id="stackedBar" style></div> 
      <label>Sankey</label> 
      <div name="chart" id="sankey" style></div> 
      <label>Cleveland Plot</label> 
      <div name="chart" id="cleveland" style></div> 
      <script type="text/javascript">
var data = [
    ['Season', 'Type', 'Number'],
    ['Winter', 'Sales', 1000],
    ['Winter', 'Expenses', 400],
    ['Winter', 'Profit', 250],
    ['Spring', 'Sales', 1170],
    ['Spring', 'Expenses', 460],
    ['Spring', 'Profit', 250],
    ['Summer', 'Sales', 660],
    ['Summer', 'Expenses', 1120],
    ['Summer', 'Profit', 300],
    ['Fall', 'Sales', 1030],
    ['Fall', 'Expenses', 540],
    ['Fall', 'Profit', 350]
];
google.charts.load("43", {
    'packages': ['bar', 'sankey', 'scatter']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    new google.charts.Bar(document.getElementById('groupedBar')).draw(
    new google.visualization.arrayToDataTable(restructure(data)),
    google.charts.Bar.convertOptions({}));
    new google.charts.Bar(document.getElementById('stackedBar')).draw(
    new google.visualization.arrayToDataTable(restructure(data)),
    google.charts.Bar.convertOptions({
        isStacked: true
    }));
    new google.visualization.Sankey(document.getElementById('sankey')).draw(
    new google.visualization.arrayToDataTable(data), {});
    new google.charts.Scatter(document.getElementById('cleveland')).draw(
    new google.visualization.arrayToDataTable(restructure(data)),
    google.charts.Bar.convertOptions({
        orientation: 'vertical',
        axes: {
            x: {
                0: {
                    side: 'top'
                }
            }
        }
    }));
}
function restructure(input) {
    var temp = input[1][0],
        output = [
            [input[0][0]],
            [temp]
        ],
        len = input[1].length,
        j = 1;
    for (var i = 1; i < input.length; i++) {
        if (input[i][0] != temp) {
            temp = input[i][0];
            output[++j] = [temp];
        }
        output[j].push(input[i][len - 1]);
        if (j == 1) {
            output[0].push(input[i][1]);
        }
    }
    return output;
}
var restructuredData = [
    ["Season", "Sales", "Expenses", "Profit"],
    ["Winter", 1000, 400, 250],
    ["Spring", 1170, 460, 250],
    ["Summer", 660, 1120, 300],
    ["Fall", 1030, 540, 350]
];

      </script>  
   </body>
</html>

Related Tutorials