MicroCharts

Micro charts with amCharts

HTML

<link rel="stylesheet" href="http://www.amcharts.com/lib/style.css" type="text/css">
<script src="http://localhost:56980/eBM/eBM/app/view/chart/amcharts.js" type="text/javascript"></script>
<!-- first chart group -->
<div class="chart-block">
    <p><b>Some simple sparklines and micro column chart:</b>
    </p>Alaska, 120
    <div id="line1" style="vertical-align: middle; display: inline-block; width: 100px; height: 30px;"></div>6%
    <div id="column1" style="vertical-align: middle;display: inline-block; width: 110px; height: 30px;"></div>
</div>
<!-- second chart group -->
<div class="chart-block">
    <p><b>More advanced, with different line and fill colors:</b>
    </p>Alaska, 120
    <div id="line2" style="vertical-align: middle; display: inline-block; width: 100px; height: 30px;"></div>6%
    <div id="column2" style="vertical-align: middle;display: inline-block; width: 110px; height: 30px;"></div>
</div>
<!-- third chart group -->
<div class="chart-block">
    <p><b>Thermometer example:</b>
    </p>Alaska, 66%
    <div id="thermometer1" style="vertical-align: middle; display: inline-block; width: 100px; height: 20px;"></div>
    <br />Alabama, 39%
    <div id="thermometer2" style="vertical-align: middle;display: inline-block; width: 100px; height: 20px"></div>
</div>
<!-- fourth chart group -->
<div class="chart-block">
    <p><b>Simple percent chart example:</b>
    </p>Alaska, 66%
    <div id="percent1" style="vertical-align: middle; display: inline-block; width: 100px; height: 20px;"></div>
    <br />Alabama, 39%
    <div id="percent2" style="vertical-align: middle;display: inline-block; width: 100px; height: 20px;"></div>
</div>
<!-- fifth chart group -->
<div class="chart-block">
    <p><b>Simple percent chart example:</b>
    </p>Alaska, 71%
    <div id="pie1" style="vertical-align: middle; display: inline-block; width: 20px; height: 20px;"></div>
    <br />Alabama, 45%
    <div id="pie2" style="vertical-align: middle; display: inline-block; width:...

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

AmCharts.ready(function () {

		    // line chart, with a bullet at the end
		    var chart = new AmCharts.AmSerialChart();
		    chart.dataProvider = [{
		        day: 1,
		        value: 120
		    }, {
		        day: 2,
		        value: 124
		    }, {
		        day: 3,
		        value: 127
		    }, {
		        day: 4,
		        value: 122
		    }, {
		        day: 5,
		        value: 121
		    }, {
		        day: 6,
		        value: 123
		    }, {
		        day: 7,
		        value: 118
		    }, {
		        day: 8,
		        value: 113
		    }, {
		        day: 9,
		        value: 122
		    }, {
		        day: 10,
		        value: 125,
		        bullet: "round"
		    }];
		    chart.categoryField = "day";
		    chart.autoMargins = false;
		    chart.marginLeft = 0;
		    chart.marginRight = 5;
		    chart.marginTop = 0;
		    chart.marginBottom = 0;

		    var graph = new AmCharts.AmGraph();
		    graph.valueField = "value";
		    graph.bulletField = "bullet";
		    graph.showBalloon = false;
		    graph.lineColor = "#a9ec49";
		    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;
		    categoryAxis.startOnAxis = true;
		    chart.write("line1");


		    // small column chart
		    var chart = new AmCharts.AmSerialChart();
		    chart.dataProvider = [{
		        day: 1,
		        value: -5
		    }, {
		        day: 2,
		        value: 3
		    }, {
		        day: 3,
		        value: 7
		    }, {
		        day: 4,
		        value: -3
		    }, {
		        day: 5,
		        value: 3
		    }, {
		        day: 6,
		        value: 4
		    }, {
		        day: 7,
		        value: 6
		    }, {
		        day: 8,
		        value: -3
		    }, {
		        day: 9,
		        value: -2
		    }, {
		        day: 10,
		        value: 6
		    }];
		 ...