#7432

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	: 500px;
}

JavaScript

var chartData = generateChartData();

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "none",
    "pathToImages": "http://www.amcharts.com/lib/3/images/",
    "legend": {
        "useGraphSettings": true
    },
    "dataProvider": chartData,
    "valueAxes": [{
        "id":"v1",
        "axisColor": "#FF6600",
        "axisThickness": 2,
        "gridAlpha": 0.5,
        "axisAlpha": 1,
         "autoGridCount":0,
         "gridCount":5,
        "position": "left",
        "minimum": 100,
        "maximum": 150
    }, {
        "id":"v2",
        "axisColor": "#FCD202",
         /*"synchronizeWith":"v1",
         "synchronizationMultiplier":5,*/
        "axisThickness": 2,
         "autoGridCount":0,
         "gridCount":5,
        "gridAlpha": 0.5,
        "axisAlpha": 1,
        "position": "right",
        "minimum": 0,
        "maximum": 10000
    }],
    "graphs": [{
        "valueAxis": "v1",
        "lineColor": "#FF6600",
         "lineThickness":3,
        "bullet": "round",
        "bulletBorderThickness": 1,
        "hideBulletsCount": 30,
        "title": "red line",
        "valueField": "visits",
		"fillAlphas": 0
    }, {
        "valueAxis": "v2",
        "lineColor": "#FCD202",
        "bullet": "square",
        "bulletBorderThickness": 1,
        "hideBulletsCount": 30,
        "title": "yellow line",
        "valueField": "hits",
         "type":"column",
		"fillAlphas": 0.5
    }],
    "chartScrollbar": {},
    "chartCursor": {
        "cursorPosition": "mouse"
    },
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
        "axisColor": "#DADADA",
        "minorGridEnabled": true
    }
});

chart.addListener("dataUpdated", zoomChart);
zoomChart();


// generate some random data, quite different range
function generateChartData() {
    var chartData = [];
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 100);

    for (var i = 0; i < 100; i++) {
       ...