Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
​
<style>
    html { height: 100% }
    body { height: 100%; margin: 5; }
    
    #chart_div {
        width: 90%;
        height: 80%;
    }   
</style>
    
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
​
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
​
function drawChart() {
​
    var data = new google.visualization.DataTable();
​
    var arrayCycleName = ['Cycle_1', 'Cycle_3', 'Cycle_3'];
​
    var arrayModNames = ['mod_1', 'mod_2', 'mod_3', 'mod_4'];
​
    var arrayCycle_1_Data = [50,30,10,15];
    var arrayCycle_2_Data = [40,20,42,44];
    var arrayCycle_3_Data = [30,34,36,40];
    
    var arrayCycles = [arrayCycle_1_Data, arrayCycle_2_Data, arrayCycle_3_Data]
    
    data.addColumn('string', 'CycleName');
    for (var i = 0; i < arrayCycleName.length; ++i) {
        data.addColumn('number', arrayCycleName[i]);
    }
    
    for (var i = 0; i < arrayModNames.length; ++i) {
        var row = [];
        row.push(arrayModNames[i]);
        for (var j = 0; j < arrayCycles.length; ++j) {
            row.push(arrayCycles[j][i]);
        }
        console.log(row);
        data.addRow(row);
    }
    console.log(data);
    
    var options = {
        title: 'charts',
        vAxis: {
            minValue: 0
        }
    };
​
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
​
</script>
</head>
​
<body>
    <div id="chart_div"></div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
antojurkovicpro
0viewers