amCharts: base sample
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
CSS
#chartdiv {
height: 400px;
margin: 10px;
}
.amChartsButtonSelected {
background-color:#CC0000;
border-style:solid;
border-color:#CC0000;
border-width:1px;
color:#FFFFFF;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
}
.amChartsButton {
background-color:#EEEEEE;
border-style:solid;
border-color:#CCCCCC;
border-width:1px;
color:#000000;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
}
JavaScript
var chart;
var chartData = [{
"country": "USA",
"visits": 4025,
"forceShow":true
}, {
"country": "China",
"visits": 1882,
"forceShow":true
}, {
"country": "Japan",
"visits": 1809,
"forceShow":false
}, {
"country": "Germany",
"visits": 1322,
"forceShow":false
}, {
"country": "UK",
"visits": 1122,
"forceShow":false
}];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";
chart.startDuration = 1;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 90;
categoryAxis.forceShowField = "forceShow";
categoryAxis.gridPosition = "start";
categoryAxis.autoGridCount = false;
categoryAxis.gridCount = 1;
// GRAPH
var graph = new AmCharts.AmGraph();
graph.valueField = "visits";
graph.balloonText = "[[category]]: <b>[[value]]</b>";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 0.8;
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.zoomable = false;
chartCursor.categoryBalloonEnabled = false;
chart.addChartCursor(chartCursor);
chart.write("chartdiv");
});