amcharts Line with filled value ranges
HTML
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
JavaScript
var chart;
var chart2;
var chartData = [];
var chartData2 = [];
// generate some random data
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 10);
for (var i = 0; i < 10; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var visits = Math.round(Math.random() * 40) ;
var goods = Math.round(Math.random() * 20) ;
var loves = Math.round(Math.random() * 30) ;
chartData.push({
date: newDate,
visits: visits,
goods:goods,
loves:loves
});
var newDate2 = new Date(firstDate);
newDate2.setDate(newDate2.getDate() + i);
var visits = Math.round(Math.random() * 40) ;
chartData2.push({
date: newDate2,
visits: visits
});
}
}
AmCharts.ready(function() {
// generate some random data first
generateChartData();
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "http://www.amcharts.com/lib/images/";
chart.marginLeft = 0;
chart.marginRight = 0;
chart.marginTop = 0;
chart.autoMarginOffset = 5;
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 = "DD"; // our data is daily, so we set minPeriod to DD
// value axis
var valueAxis = new AmCharts.ValueAxis();
valueAxis.inside = true;
valueAxis.tickLength = 0;
valueAxis.axisAlpha = 0;
valueAxis.minimum = 0;
valueAxis.maximum = 50;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.dashLength = 3;
graph.lineColor = "#7717D7";
graph.valueField = "visits";
graph.dashLength = 3;
graph.bullet =...