#8277
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/xy.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;
font-size: 11px;
}
JavaScript
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"valueAxes": [{
"position":"bottom",
"axisAlpha": 0,
"dashLength": 1,
"labelFunction": function (value) {
var date = new Date(value);
return AmCharts.formatDate(date, "DD-MM-YYYY HH");
}
}, {
"axisAlpha": 0,
"dashLength": 1,
"position": "left",
"title": "Y Axis"
}],
"graphs": [{
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"lineThickness": 2,
"title": "red line",
"lineColor": "#FF6600",
"useLineColorForBulletBorder": true,
"yField": "value",
"xField": "date"
}, {
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"lineThickness": 2,
"title": "red line",
"lineColor": "#FF6600",
"useLineColorForBulletBorder": true,
"yField": "value2",
"xField": "date"
}],
"chartCursor": {
"cursorPosition": "mouse",
"pan": true
},
exportConfig:{
menuRight: '20px',
menuBottom: '50px',
menuItems: [{
icon: 'http://www.amcharts.com/lib/3/images/export.png',
format: 'png'
}]
},
"dataProvider": [{
"date": 1396393041000,
"value": 1.23
}, {
"date": 1396393132000,
"value": 2.42
}, {
"date": 1396504330000,
"value2": 5.31
}, {
"date": 1396509176000,
"value2": 6.33
}]
}
);