amcharts Column rotated series
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
Chart div:
<div id="chartdiv" style="height: 250px; border: 2px dotted #c33; margin: 5px 0 20px 0;"></div>
<br />
Legend div:
<div id="legenddiv" style="border: 2px dotted #3f3; margin: 5px 0 20px 0;"></div>
CSS
body { font-family: Verdana; padding: 15px;}
#legenddiv {
height: 100px !important; /* force that height */
overflow: auto;
position: relative;
}
JavaScript
var chart;
var chartData = [{category:" "}];
AmCharts.ready(function() {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.autoMarginOffset = 0;
chart.dataProvider = chartData;
chart.categoryField = "category";
chart.startDuration = 1;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 45; // this line makes category values to be rotated
categoryAxis.gridAlpha = 0;
categoryAxis.fillAlpha = 1;
categoryAxis.fillColor = "#FAFAFA";
categoryAxis.gridPosition = "start";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 5;
valueAxis.title = "Visitors from country";
valueAxis.axisAlpha = 0;
chart.addValueAxis(valueAxis);
// GRAPH
for (var i = 0; i < 15; i ++) {
chartData[0]["val"+i] = Math.floor(Math.random() * 20);
var graph = new AmCharts.AmGraph();
graph.valueField = "val" +i;
graph.title = "Graph \t#"+i;
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
chart.addGraph(graph);
}
// LEGEND
var legend = new AmCharts.AmLegend();
legend.valueText="ciao";
chart.addLegend(legend, "legenddiv");
// WRITE
chart.write("chartdiv");
});