1<html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 7 <!-- AmCharts includes --> 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 12 <!-- Export plugin includes and styles --> 13 <script src="../export.js"></script> 14 <link type="text/css" href="../export.css" rel="stylesheet"> 15 16 <style> 17 body, html { 18 height: 100%; 19 padding: 0; 20 margin: 0; 21 overflow: hidden; 22 background-color: #282828; 23 font-size: 11px; 24 font-family: Verdana; 25 } 26 #chartdiv { 27 width: 100%; 28 height: 100%; 29 } 30 </style> 31 32 <script type="text/javascript"> 33 var chart = AmCharts.makeChart( "chartdiv", { 34 "type": "serial", 35 "theme": "dark", 36 "dataProvider": [ { 37 "year": 2005, 38 "income": 23.5, 39 "expenses": 18.1 40 }, { 41 "year": 2006, 42 "income": 26.2, 43 "expenses": 22.8 44 }, { 45 "year": 2007, 46 "income": 30.1, 47 "expenses": 23.9 48 }, { 49 "year": 2008, 50 "income": 29.5, 51 "expenses": 25.1 52 }, { 53 "year": 2009, 54 "income": 24.6, 55 "expenses": 25 56 } ], 57 "categoryField": "year", 58 "startDuration": 1, 59 "rotate": true, 60 "categoryAxis": { 61 "gridPosition": "start" 62 }, 63 "valueAxes": [ { 64 "position": "bottom", 65 "title": "Million USD", 66 "minorGridEnabled": true 67 } ], 68 "graphs": [ { 69 "type": "column", 70 "title": "Income", 71 "valueField": "income", 72 "fillAlphas": 1, 73 "balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>" 74 }, { 75 "type": "line", 76 "title": "Expenses", 77 "valueField": "expenses", 78 "lineThickness": 2, 79 "bullet": "round", 80 "balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>" 81 } ], 82 "legend": { 83 "useGraphSettings": true 84 }, 85 "creditsPosition": "top-right", 86 "export": { 87 "enabled": true, 88 "fileName": "exportedChart", 89 90 // set background color for exported image 91 "backgroundColor": "#282828", 92 93 // set column names when exporting as data 94 "exportTitles": true, 95 "columnNames": { 96 "year": "Year", 97 "income": "Income, USD", 98 "expenses": "Expenses, USD" 99 } 100 } 101 } ); 102 </script> 103 </head> 104 <body> 105 <div id="chartdiv"></div> 106 </body> 107</html>