#6489

by amcharts

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
	width	: 100%;
	height	: 200px;
}

JavaScript

var linechartData;
function generateChartData() {
    linechartData = []; //reset every time
    var numData = 20; //number of data points

    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - numData);      // - numData

    for (var i = 0; i < numData; i++) {
        // we create date objects here. In your data, you can have date strings
        // and then set format of your dates using chart.dataDateFormat property,
        // however when possible, use date objects, as this will speed up chart rendering.
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i); //+

        var rates = Math.round(Math.random() * 100);
        linechartData.push({
            date: newDate,
            rates: rates
        });
    }
}

generateChartData();

// SERIAL CHART
    var LineChart = new AmCharts.AmSerialChart();
    LineChart.pathToImages = "http://www.amcharts.com/lib/3/images/";
    LineChart.dataProvider = linechartData;
    LineChart.categoryField = "date";
    LineChart.balloon.bulletSize = 5;
    LineChart.zoomOutText = "";

    var goal_line = [{
        "finalDate": linechartData[linechartData.length-1].date,
        "finalValue": 80,
        "initialDate": linechartData[0].date,
        "initialValue": 80,
        "lineColor": "#ff0000"
    }];
    LineChart.trendLines = goal_line;



    // AXES
    // category - X axis
    var categoryAxis = LineChart.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
    categoryAxis.equalSpacing = true;
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
    categoryAxis.position = "bottom";
    categoryAxis.startOnAxis = true;
    categoryAxis.dashLength = 1;
    categoryAxis.minorGridEnabled = false;
    categoryAxis.axisColor = "#ccc";
    categoryAxis.fontSize = 8;
    categoryAxis.color = "#444";
    categoryAxis.boldPeriodBeginning = false;
    categoryAxis.labelsEnabled =...