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/xy.js"></script> 10 <script src="../responsive.min.js"></script> 11 <style> 12 body, html { 13 height: 100%; 14 padding: 0; 15 margin: 0; 16 } 17 </style> 18 <script> 19 var chart = AmCharts.makeChart("chartdiv", { 20 "type": "xy", 21 "startDuration": 1.5, 22 "trendLines": [], 23 "graphs": [ 24 { 25 "title": "Diamonds", 26 "balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>", 27 "bullet": "diamond", 28 "id": "AmGraph-1", 29 "lineAlpha": 0, 30 "lineColor": "#b0de09", 31 "valueField": "value", 32 "xField": "x", 33 "yField": "y" 34 }, 35 { 36 "title": "Balls", 37 "balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>", 38 "bullet": "round", 39 "id": "AmGraph-2", 40 "lineAlpha": 0, 41 "lineColor": "#fcd202", 42 "valueField": "value2", 43 "xField": "x2", 44 "yField": "y2" 45 } 46 ], 47 "guides": [ 48 { 49 "fillAlpha": 0.3, 50 "fillColor": "#ff8000", 51 "id": "Guide-1", 52 "toValue": -2, 53 "value": -8, 54 "valueAxis": "ValueAxis-2" 55 } 56 ], 57 "valueAxes": [ 58 { 59 "id": "ValueAxis-1", 60 "axisAlpha": 0 61 }, 62 { 63 "id": "ValueAxis-2", 64 "axisAlpha": 0, 65 "position": "bottom" 66 } 67 ], 68 "allLabels": [], 69 "balloon": {}, 70 "titles": [], 71 "dataProvider": [ 72 { 73 "y": 10, 74 "x": 14, 75 "value": 59, 76 "y2": -5, 77 "x2": -3, 78 "value2": 44 79 }, 80 { 81 "y": 5, 82 "x": 3, 83 "value": 50, 84 "y2": -15, 85 "x2": -8, 86 "value2": 12 87 }, 88 { 89 "y": -10, 90 "x": -3, 91 "value": 19, 92 "y2": -4, 93 "x2": 6, 94 "value2": 35 95 }, 96 { 97 "y": -6, 98 "x": 5, 99 "value": 65, 100 "y2": -5, 101 "x2": -6, 102 "value2": 168 103 }, 104 { 105 "y": 15, 106 "x": -4, 107 "value": 92, 108 "y2": -10, 109 "x2": -8, 110 "value2": 102 111 }, 112 { 113 "y": 13, 114 "x": 1, 115 "value": 8, 116 "y2": -2, 117 "x2": -3, 118 "value2": 41 119 }, 120 { 121 "y": 1, 122 "x": 6, 123 "value": 35, 124 "y2": 0, 125 "x2": -3, 126 "value2": 16 127 } 128 ], 129 "chartCursor": {}, 130 "legend": { 131 "position": "bottom" 132 }, 133 "responsive": { 134 "enabled": true 135 } 136 }); 137 138 </script> 139 </head> 140 141 <body> 142 <div id="chartdiv" style="width: 100%; height: 100%;"></div> 143 </body> 144 145</html>