Chart with positive range fills
HTML
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 340px;"></div>
CSS
body {
font-size:12px;
color:#000000;
background-color:#ffffff;
font-family:verdana, helvetica, arial, sans-serif;
}
JavaScript
var chart;
var chartData = [];
var chartCursor;
// generate some random data
function generateChartData() {
var firstDate = new Date();
var temperature = 29;
firstDate = addMinutes(firstDate, -20);
chartData.push({ date: addMinutes(firstDate, -7), visits: 29.5, baseline: 29.5 });
chartData.push({ date: addMinutes(firstDate, -6), visits: 29.5, baseline: 29.5 });
chartData.push({ date: addMinutes(firstDate, -5), visits: 30.5, baseline: 30.5 });
chartData.push({ date: addMinutes(firstDate, -4), visits: 29.5, baseline: 29.5 });
chartData.push({ date: addMinutes(firstDate, -3), visits: 28.5, baseline: 28.5 });
chartData.push({ date: addMinutes(firstDate, -2), visits: 27.5, baseline: 28 });
chartData.push({ date: addMinutes(firstDate, -1), visits: 28.5, baseline: 28.5 });
chartData.push({ date: firstDate, visits: 29.5, baseline: 29.5 });
}
function addMinutes(date, minutes) {
return new Date(date.getTime() + minutes*60000);
}
function varyTemperature(temperature) {
var min = -0.2;
var max = 0.2;
var random = Math.random() * (max - min) + min;
return temperature + random;
}
// create chart
AmCharts.ready(function () {
// generate some data first
generateChartData();
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "http://www.amcharts.com/lib/images/";
chart.marginTop = 0;
chart.marginRight = 10;
chart.autoMarginOffset = 5;
chart.zoomOutButton = {
backgroundColor: '#000000',
backgroundAlpha: 0.15
};
chart.dataProvider = chartData;
chart.categoryField = "date";
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "mm"; // our data is in minutes, so we set minPeriod to mm
categoryAxis.dashLength = 1;
categoryAxis.gridAlpha = 0.15;
categoryAxis.axisColor = "#DADADA";
...