amcharts Line with trend lines

by superhead

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 chartData = [{
    date: new Date(2012, 0, 1),
    value: 8},
{
    date: new Date(2012, 0, 1),
    value: 8},
{
    date: new Date(2012, 0, 2),
    value: 10},
{
    date: new Date(2012, 0, 3),
    value: 12},
{
    date: new Date(2012, 0, 4),
    value: 14},
{
    date: new Date(2012, 0, 5),
    value: 11},
{
    date: new Date(2012, 0, 6),
    value: 6},
{
    date: new Date(2012, 0, 7),
    value: 7},
{
    date: new Date(2012, 0, 8),
    value: 9},
{
    date: new Date(2012, 0, 9),
    value: 13},
{
    date: new Date(2012, 0, 10),
    value: 15},
{
    date: new Date(2012, 0, 11),
    value: 19},
{
    date: new Date(2012, 0, 12),
    value: 21},
{
    date: new Date(2012, 0, 13),
    value: 22},
{
    date: new Date(2012, 0, 14),
    value: 20},
{
    date: new Date(2012, 0, 15),
    value: 18},
{
    date: new Date(2012, 0, 16),
    value: 14},
{
    date: new Date(2012, 0, 17),
    value: 16},
{
    date: new Date(2012, 0, 18),
    value: 18},
{
    date: new Date(2012, 0, 19),
    value: 17},
{
    date: new Date(2012, 0, 20),
    value: 15},
{
    date: new Date(2012, 0, 21),
    value: 12},
{
    date: new Date(2012, 0, 22),
    value: 10},
{
    date: new Date(2012, 0, 23),
    value: 8}];


AmCharts.ready(function() {
    // SERIAL CHART        
    chart = new AmCharts.AmSerialChart();
    chart.pathToImages = "http://www.amcharts.com/lib/images/";
    chart.dataProvider = chartData;
    chart.marginTop = 0;
    chart.marginRight = 10;
    chart.autoMarginOffser = 0;
    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                 
    categoryAxis.gridAlpha = 0.10;
    categoryAxis.axisAlpha = 0;
    categoryAxis.inside = true;

    // value
    var valueAxis = new AmCharts.ValueAxis();
   ...