#9001

by amcharts

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chart_levels_per_grade"></div>

CSS

#chart_levels_per_grade {
    width : 100%;
    height : 500px;
    font-size : 11px;
}

JavaScript

var chartData = [{"Grade":"DIESEL","Volume":23248.04,"Capacity":106000,"Value":23248.04,"Count":null,"Percentage":22,"PercentageOfTotal":100}, 
{"Grade":"DIESEL50PPM","Volume":5155,"Capacity":14000,"Value":5155,"Count":null,"Percentage":37,"PercentageOfTotal":100}, 
{"Grade":"ULP93","Volume":181069.51,"Capacity":387000,"Value":181069.51,"Count":null,"Percentage":47,"PercentageOfTotal":100}, 
{"Grade":"ULP95","Volume":9047.55,"Capacity":23000,"Value":9047.55,"Count":null,"Percentage":39,"PercentageOfTotal":100}];

// apply colors to each data point individually
var colors = ['#FF6600', '#FCD202', '#B0DE09', '#0D8ECF', '#2A0CD0', '#CD0D74', '#CC0000', '#00CC00', '#0000CC', '#DDDDDD', '#999999', '#333333', '#990000'];

for(var x in chartData) {
    chartData[x].color = colors.shift();
}

var chart = AmCharts.makeChart('chart_levels_per_grade', {

    "type": "serial",
        "fontFamily": "Helvetica, Arial",
        "fontSize": 12,
        //"titles": titles,
        "theme": "smartfuel",
        "dataProvider": chartData,
        "categoryField": 'Grade',
        "valueField": "Value",
        "titleField": "Grade",
        "labelText": "[[Grade]]: [[Value]]",
        "startDuration": 0,
        "graphs": [{
        "balloonText": "[[Grade]]: [[Percentage]]% - Value: [[Value]], Capacity: [[Capacity]]",
            "fillAlphas": 0.9,
            "lineAlpha": 0.2,
            "type": "column",
            "valueField": "Value",
            "colorField": "color"
    }, {
        "balloonText": "[[Grade]]: [[Percentage]]% - Value: [[Value]], Capacity: [[Capacity]]",
            "fillAlphas": 0.2,
            "lineAlpha": 0.2,
            "type": "column",
            "valueField": "Capacity",
            "colorField": "color"
    }],
        "plotAreaFillAlphas": 0.1,
        "categoryAxis": {
        "gridPosition": "start"
    },
        "valueAxes": [{
        //maximum: 100, 
        gridCount: 10,
        autoGridCount: false,
        stackType: "regular"
   ...