Scatter Chart Example

An example of a Google Scatter Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
       <div id="chart_div" style=""></div>

JavaScript

google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();        
          data.addColumn('string', 'Status');
          data.addColumn('number', 'Value');
          data.addColumn({type: 'string', role: 'style'});
          data.addRow(['Environmental', 1, slicesColor]);
          data.addRow(['Best Available Data', 300, slicesColor]);
          data.addRow(['Approach Roadways', 4, slicesColor]);
          data.addRow(['Structure', 1, slicesColor]);
          data.addRow(['Hydraulics', 5, slicesColor]);
          data.addRow(['Geotechnical', 3, slicesColor]);

        var myColors = { '1' : 'green', '2': '#000000', '3': 'yellow', '4': 'orange', '5': 'red'  };

        var slicesColor = {};

        for( var i=0; i < data.getNumberOfRows(); i++){
          slicesColor[i] = {color: myColors[data.getValue(i, 0)] };
        }

        var options = {
          legend: { position: "none" },
          slices: slicesColor,
          title: 'Risk Categories'
        }

            // Create and draw the visualization.
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);   

    }