Google Chart Tutorial

Your client, DataSet Corp, has asked for an interactive web based chart showing the change in revenue from 2005 until now. They would also like the overall average revenue to be reflected in the chart. Be sure to add a title, label axes, and reflect the red and black color scheme used by DSC.

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
	<div id="dashboard" class="db">
		<div id="chart_div" class="cd"></div>
		<div id="range_filter_div"></div>
	</div>

JavaScript

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Revenue');
    data.addColumn('number', 'Average Revenue');
    data.addRows([
      ['2004', 1000, 630],
      ['2005', 1170, 630],
      ['2006', 660, 630],
      ['2007', 1030, 630]
    ]);
    
    //add options which will set the color, axis labels and title
    var options = {
          title: 'Company Performance'
    };

/*
    //select the chart that should be displayed within the div with id 'chart'              
    var chart = new google.visualization.LineChart(document.getElementById('chart'));


    //draw the chart            
    chart.draw(data, options);
*/
    var rangeFilter = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'range_filter_div',
       
        
    });

    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div',
        options: {
            height: 400,
            width: 800,
            curveType: 'function',
            hAxis: { gridlines: {color: '#ff0000'} },
            //hAxis: { ticks: [5,10,15,20] },
            title: 'Temperaturverlauf'
        },
        view: {
            //columns: [0, 1, 2, 3, 4, 5]
            columns: [0, 1, 2]
        }
    });

    // Create the dashboard
    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
    // bind the chart to the filter
    dash.bind([rangeFilter], [chart]);
    // draw the dashboard
    dash.draw(data);

}

//load the appropriate google library
//google.load("visualization", "1", {packages:["corechart"]});

//call the draw chart function when the library has finished loading
onload = function() {
//google.setOnLoadCallback(drawChart);
    google.load('visualization', '1', 
                {packages:['corechart', 'controls'], callback: drawChart});
}