Bar Chart

by myrluk3

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
  width: 100%;
  height: 500px;
  font-size: 10px;
}

JavaScript

var data = [{
      component: 'CASE_REPORT_1',
      fitzgerald: 77.64,
      petersboyd: 76.33,
      wightman: 76.85,
      mississauga: 76.33
    }, {
      component: 'CASE_REPORT_2',
      fitzgerald: 79.6,
      petersboyd: 78.44,
      wightman: 79.39,
      mississauga: 77.58
    }, {
      component: 'CASE_REPORT_3',
      fitzgerald: 79.4,
      petersboyd: 80.07,
      wightman: 80.67,
      mississauga: 80.04
    }, {
      component: 'CASE_REPORT_4',
      fitzgerald: 80.72,
      petersboyd: 80.76,
      wightman: 80.89,
      mississauga: 81.36
    }, {
      component: 'CASE_REPORT_5',
      fitzgerald: 80.69,
      petersboyd: 80.31,
      wightman: 80.83,
      mississauga: 80.83
    }, {
      component: 'EXAM_1',
      fitzgerald: 84.12,
      petersboyd: 82.37,
      wightman: 84.13,
      mississauga: 83.36
    }, {
      component: 'EXAM_2',
      fitzgerald: 80.21,
      petersboyd: 81.91,
      wightman: 81.25,
      mississauga: 79.45
    }, {
      component: 'Final Mark',
      fitzgerald: 82.07,
      petersboyd: 81.29,
      wightman: 81.52,
      mississauga: 81.28
    }, {
      component: 'MIDTERM',
      fitzgerald: 84.85,
      petersboyd: 84.69,
      wightman: 84.87,
      mississauga: 84.80
    }, {
      component: 'MR_GB',
      fitzgerald: 0,
      petersboyd: 0,
      wightman: 0,
      mississauga: 0
    }];

var chart = AmCharts.makeChart("chartdiv", {
  type: "serial",
  theme: "light",
  legend: {
    horizontalGap: 10,
    maxColumns: 1,
    position: "right",
    useGraphSettings: true,
    markerSize: 10
  },
  dataProvider: data,
  valueAxes: [{
    //stackType: "regular",
    axisAlpha: 0.5,
    gridAlpha: 0
  }],
  graphs: [{
    balloonText: "<b>[[title]]</b><br><span style='font-size:12px'>[[category]]: <b>[[value]]</b></span>",
    fillAlphas: 0.8,
    labelText: "[[value]]",
    lineAlpha: 0.3,
    title: "FitzGerald",
    type: "column",
    color: "#000000",
    valueField: "fitzgerald",
   ...