V3: Bar floating
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 320px;"></div>
JavaScript
var chart;
var chartData = [];
var names = ["joe", "abby", "tom", "john", "debbie", "foo"];
var colors = ["red", "yellow", "green", "green", "green"];
// generate some random data, quite different range
function generateChartData() {
var MAX_VAL = 50;
var INCR = 10;
var firstDate = new Date();
var date2 = new Date();
firstDate.setDate(firstDate.getDate() - 50);
date2.setDate(date2.getDate() - 40);
var indx = 0;
for (var i = 0; i < 50; i+=10) {
var newDate = new Date(firstDate);
var newDate2 = new Date(date2);
newDate.setDate(newDate.getDate() + i);
newDate2.setDate(newDate2.getDate() + i);
var visits = Math.round(Math.random() * 40) - 20;
chartData.push({
date: newDate,
date2: newDate2,
color: colors[indx],
name: names[indx]
});
indx++;
}
}
AmCharts.ready(function () {
generateChartData();
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
// chart.dataDateFormat = "YYYY-MM-DD";
chart.rotate = true;
chart.categoryField = "date2";
// chart.valueField = "date";
chart.columnWidth = 4.8;
chart.startDuration = 1; // length of draw effect
// AXES
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelsEnabled = false;
categoryAxis.gridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = "start";
// categoryAxis.offset = 200;
categoryAxis.parseDates = true;
categoryAxis.minPeriod = "DD";
categoryAxis.dateFormats = [{
period: 'fff',
format: 'JJ:NN:SS'
}, {
period: 'ss',
format: 'JJ:NN:SS'
}, {
period: 'mm',
format: 'JJ:NN'
}, {
period: 'hh',
format: 'JJ:NN'
}, {
period: 'DD',
format: 'MMM DD'
}, {
period: 'WW',
format: 'MMM DD'
}, {
period: 'MM',
format: 'MMM YYYY'
}, {
period: 'YYYY',
format:...