1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2<html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 7 <title>amCharts Responsive Example</title> 8 <script src="http://www.amcharts.com/lib/3/amcharts.js"></script> 9 <script src="http://www.amcharts.com/lib/3/serial.js"></script> 10 <script src="http://www.amcharts.com/lib/3/themes/dark.js"></script> 11 <script src="../responsive.min.js"></script> 12 <style> 13 body, html { 14 height: 100%; 15 padding: 0; 16 margin: 0; 17 } 18 </style> 19 <script> 20 AmCharts.makeChart("chartdiv", { 21 "type": "serial", 22 "theme": "dark", 23 "dataProvider": [{ 24 "year": 2005, 25 "income": 23.5, 26 "expenses": 18.1 27 }, { 28 "year": 2006, 29 "income": 26.2, 30 "expenses": 22.8 31 }, { 32 "year": 2007, 33 "income": 30.1, 34 "expenses": 23.9 35 }, { 36 "year": 2008, 37 "income": 29.5, 38 "expenses": 25.1 39 }, { 40 "year": 2009, 41 "income": 24.6, 42 "expenses": 25 43 }], 44 "categoryField": "year", 45 "startDuration": 1, 46 "rotate": true, 47 "categoryAxis": { 48 "gridPosition": "start" 49 }, 50 "valueAxes": [{ 51 "position": "top", 52 "title": "Million USD", 53 "minorGridEnabled": true 54 }], 55 "graphs": [{ 56 "type": "column", 57 "title": "Income", 58 "valueField": "income", 59 "fillAlphas":1, 60 "balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>" 61 }, { 62 "type": "line", 63 "title": "Expenses", 64 "valueField": "expenses", 65 "lineThickness": 2, 66 "bullet": "round", 67 "balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>" 68 }], 69 "legend": { 70 "useGraphSettings": true 71 }, 72 "creditsPosition": "top-right", 73 "responsive": { 74 "enabled": true 75 } 76 }); 77 </script> 78 </head> 79 80 <body style="background-color:#282828;"> 81 <div id="chartdiv" style="width: 100%; height: 100%;"></div> 82 </body> 83 84</html>