Google Charts to create BoxPlot chart - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

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

Description

Google Charts to create BoxPlot chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Column Chart Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
      <div id="chart_div" style="width: 900px; height: 500px;"></div> 
      <script type="text/javascript">
google.setOnLoadCallback(drawChart);/*  ww  w.  ja  v a2s .c o m*/
function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'Midterm');
    data.addColumn({id:'i0', type:'number', role:'interval'});
    data.addColumn({id:'i1', type:'number', role:'interval'});
    data.addColumn({id:'i2', type:'number', role:'interval'});
    data.addColumn({id:'tt', type:'string', role:'tooltip'});
    data.addColumn('number', 'Final');
    data.addColumn({id:'i0', type:'number', role:'interval'});
    data.addColumn({id:'i1', type:'number', role:'interval'});
    data.addColumn({id:'i2', type:'number', role:'interval'});
    data.addColumn({id:'tt', type:'string', role:'tooltip'});
    data.addRows([
        ['Algebra', 100, 40, 50, 60, 'Algebra Midterm: 40, 50, 60', 100, 45, 53, 74, 'Algebra Final: 45, 53, 74'],
        ['Geometry', 100, 61, 71, 84, 'Geometry Midterm: 61, 71, 84', 100, 55, 62, 69, 'Geometry Final: 55, 62, 69']]);
  var options = {
    title: 'Math Test Results',
    width: 500,
    hAxis: {title: 'Subject'},
    vAxis: {minValue: 0, maxValue: 100},
    intervals: { 'lineWidth':1, 'boxWidth': .8, style: 'boxes' },
    colors:['red','green'],
    dataOpacity: 0
  };
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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

Related Tutorials