V3: MicroCharts

Micro charts with amCharts

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<link rel="stylesheet" href="http://www.amcharts.com/lib/style.css">
<div class="chart-block">
<div id="column2" style="vertical-align: middle;display: inline-block; width: 110px; height: 30px;"></div>
</div>

CSS

.warning {
    border: 1px dotted #fdd;
    padding: 10px;
    color: #555;
    clear: both;
}

.chart-block {
    width: 45%;
    float: left; 
    margin-bottom: 20px;
}

p {
    margin-bottom: 10px!important;
}

JavaScript

// column chart with different negative colors
		    var chart = new AmCharts.AmSerialChart();
		    chart.dataProvider = [{
		        level: -5,
		        value: 25, 
                color: 'blue'
		    }, {
		        level: -4,
		        value: 23, 
                color: 'blue'
		    }, {
		        level: -3,
		        value: 17, 
                color: 'blue'
		    }, {
		        level: -2,
		        value: 13, 
                color: 'blue'
		    }, {
		        level: -1,
		        value: 3, 
                color: 'blue'
		    }, {
		        level: 1,
		        value: 4, 
                color: 'red'
		    }, {
		        level: 2,
		        value: 6, 
                color: 'red'
		    }, {
		        level: 3,
		        value: 13, 
                color: 'red'
		    }, {
		        level: 4,
		        value: 20, 
                color: 'red'
		    }, {
		        level: 5,
		        value: 26, 
                color: 'red'
		    }];
		    chart.categoryField = "level";
		    chart.autoMargins = false;
		    chart.marginLeft = 0;
		    chart.marginRight = 0;
		    chart.marginTop = 0;
		    chart.marginBottom = 0;

		    var graph = new AmCharts.AmGraph();
		    graph.valueField = "value";
		    graph.type = "column";
		    graph.fillAlphas = 1;
		    graph.showBalloon = false;
		    graph.lineColor = "";
            graph.fillColorsField = 'color';
		    graph.negativeFillColors = "#289eaf";
		    graph.negativeLineColor = "#289eaf";
		    chart.addGraph(graph);

		    var valueAxis = new AmCharts.ValueAxis();
		    valueAxis.gridAlpha = 0;
		    valueAxis.axisAlpha = 0;
		    chart.addValueAxis(valueAxis);

		    var categoryAxis = chart.categoryAxis;
		    categoryAxis.gridAlpha = 0;
		    categoryAxis.axisAlpha = 0;
		    chart.write("column2");