This page lists files in the current directory. You can view content, get download/execute commands for Wget, Curl, or PowerShell, or filter the list using wildcards (e.g., `*.sh`).
wget 'https://sme10.lists2.roe3.org/pmnl3/js/amcharts/plugins/responsive/examples/funnel.html'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>amCharts Responsive Example</title>
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/funnel.js" type="text/javascript"></script>
<script src="../responsive.min.js" type="text/javascript"></script>
<style>
body, html {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript">
var chart = AmCharts.makeChart("chartdiv", {
"type": "funnel",
"theme": "none",
"dataProvider": [{
"title": "Website visits",
"value": 200
}, {
"title": "Downloads",
"value": 123
}, {
"title": "Requested price list",
"value": 98
}, {
"title": "Contaced for more info",
"value": 72
}, {
"title": "Purchased",
"value": 35
}, {
"title": "Contacted for support",
"value": 35
}, {
"title": "Purchased additional products",
"value": 26
}],
"balloon": {
"fixedPosition": true
},
"legend": {},
"valueField": "value",
"titleField": "title",
"marginRight": 240,
"marginLeft": 50,
"startX": -500,
"depth3D":100,
"angle":40,
"outlineAlpha":1,
"outlineColor":"#FFFFFF",
"outlineThickness":2,
"labelPosition": "right",
"balloonText": "[[title]]: [[value]]n[[description]]",
"responsive": {
"enabled": true
}
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 100%;"></div>
</body>
</html>wget 'https://sme10.lists2.roe3.org/pmnl3/js/amcharts/plugins/responsive/examples/gauge.html'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>amCharts Responsive Example</title>
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/gauge.js" type="text/javascript"></script>
<script src="../responsive.min.js" type="text/javascript"></script>
<style>
body, html {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript">
var chart = AmCharts.makeChart("chartdiv", {
"type": "gauge",
"titles": [{
"text": "Speedometer",
"size": 15
}],
"axes": [{
"startValue": 0,
"axisThickness": 1,
"endValue": 220,
"valueInterval": 10,
"bottomTextYOffset": -20,
"bottomText": "0 km/h",
"bands": [{
"startValue": 0,
"endValue": 90,
"color": "#00CC00"
},
{
"startValue": 90,
"endValue": 130,
"color": "#ffac29"
},
{
"startValue": 130,
"endValue": 220,
"color": "#ea3838",
"innerRadius": "95%"
}
]
}],
"arrows": [{}],
"responsive": {
"enabled": true
}
});
setInterval(randomValue, 2000);
// set random value
function randomValue() {
var value = Math.round(Math.random() * 200);
chart.arrows[0].setValue(value);
chart.axes[0].setBottomText(value + " km/h");
}
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 100%;"></div>
</body>
</html>wget 'https://sme10.lists2.roe3.org/pmnl3/js/amcharts/plugins/responsive/examples/index.html'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amCharts Responsive Example</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css"rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
.ui-resizable-helper {
border: 1px dotted gray;
}
.resizable {
display: block;
width: 800px;
height: 500px;
padding: 0;
border: 2px solid #ddd;
overflow: hidden;
position: relative;
}
iframe {
width: 100%;
height: 100%;
}
#controls {
background: #ccc;
opacity: 0.5;
padding: 5px 8px;
font-size: 14px;
font-weight: bold;
font-family: Verdana;
margin-bottom: 10px;
}
#dims {
background: #ddd;
color: #555;
padding: 5px 8px;
font-size: 14px;
font-family: Verdana;
width: 100px;
text-align: center;
}
.ui-resizable-se {
display: none!important;
}
</style>
<script type="text/javascript">
$(function () {
$(".resizable").resizable({
animate: true,
animateEasing: 'swing',
animateDuration: 250,
resize: function( event, ui ) {
$('#dims').html(ui.size.width+'x'+ui.size.height+'px');
}
});
});
function setType (type) {
$('#iframe').attr('src', type);
}
function reload() {
setType($('#type').val());
}
function resize( dim, dir) {
var container = $('.resizable');
if ( 'w' == dim )
container.css({ 'width': container.width() + dir});
else
container.css({ 'height': container.height() + dir});
$('#dims').html(container.width()+'x'+container.height()+'px');
}
</script>
</head>
<body>
<div id="controls">
<input type="button" value="w-" onclick="resize('w', -50);" />
<input type="button" value="w+" onclick="resize('w', 50);" />
<input type="button" value="h-" onclick="resize('h', -50);" />
<input type="button" value="h+" onclick="resize('h', 50);" />
<select id="type" onchange="setType(this.options[this.selectedIndex].value);">
<option value="pie1.html" selected="selected">Pie #1 (Simple w/ legend)</option>
<option value="pie2.html"/>Pie #2 (3D w/ legend)</option>
<option value="serial1.html">Serial #1 (Area)</option>
<option value="serial2.html">Serial #2 (Bar & Line)</option>
<option value="serial3.html">Serial #3 (Line w/ zoom)</option>
<option value="xy.html">XY</option>
<option value="radar.html">Radar</option>
<option value="gauge.html">Gauge</option>
<option value="funnel.html">Funnel</option>
<option value="stock.html">Stock</option>
<option value="map.html">Map</option>
</select>
<input type="button" value="reload" onclick="reload();" />
</div>
<div id="dims">800x500px</div>
<div class="resizable">
<iframe id="iframe" src="pie1.html" sytle="border: none; width: 100%; height: 100%;" frameborder="0"></iframe>
</div>
</body>
</html>wget 'https://sme10.lists2.roe3.org/pmnl3/js/amcharts/plugins/responsive/examples/map.html'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>amCharts Responsive Example</title>
<link rel="stylesheet" href="http://www.amcharts.com/lib/3/ammap.css" type="text/css">
<script src="http://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/maps/js/usaLow.js" type="text/javascript"></script>
<script src="../responsive.min.js" type="text/javascript"></script>
<style>
body, html {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript">
var map = AmCharts.makeChart("chartdiv", {
type: "map",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"colorSteps": 10,
"dataProvider": {
"map": "usaLow",
"areas": [{
"id": "US-AL",
"value": 4447100
}, {
"id": "US-AK",
"value": 626932
}, {
"id": "US-AZ",
"value": 5130632
}, {
"id": "US-AR",
"value": 2673400
}, {
"id": "US-CA",
"value": 33871648
}, {
"id": "US-CO",
"value": 4301261
}, {
"id": "US-CT",
"value": 3405565
}, {
"id": "US-DE",
"value": 783600
}, {
"id": "US-FL",
"value": 15982378
}, {
"id": "US-GA",
"value": 8186453
}, {
"id": "US-HI",
"value": 1211537
}, {
"id": "US-ID",
"value": 1293953
}, {
"id": "US-IL",
"value": 12419293
}, {
"id": "US-IN",
"value": 6080485
}, {
"id": "US-IA",
"value": 2926324
}, {
"id": "US-KS",
"value": 2688418
}, {
"id": "US-KY",
"value": 4041769
}, {
"id": "US-LA",
"value": 4468976
}, {
"id": "US-ME",
"value": 1274923
}, {
"id": "US-MD",
"value": 5296486
}, {
"id": "US-MA",
"value": 6349097
}, {
"id": "US-MI",
"value": 9938444
}, {
"id": "US-MN",
"value": 4919479
}, {
"id": "US-MS",
"value": 2844658
}, {
"id": "US-MO",
"value": 5595211
}, {
"id": "US-MT",
"value": 902195
}, {
"id": "US-NE",
"value": 1711263
}, {
"id": "US-NV",
"value": 1998257
}, {
"id": "US-NH",
"value": 1235786
}, {
"id": "US-NJ",
"value": 8414350
}, {
"id": "US-NM",
"value": 1819046
}, {
"id": "US-NY",
"value": 18976457
}, {
"id": "US-NC",
"value": 8049313
}, {
"id": "US-ND",
"value": 642200
}, {
"id": "US-OH",
"value": 11353140
}, {
"id": "US-OK",
"value": 3450654
}, {
"id": "US-OR",
"value": 3421399
}, {
"id": "US-PA",
"value": 12281054
}, {
"id": "US-RI",
"value": 1048319
}, {
"id": "US-SC",
"value": 4012012
}, {
"id": "US-SD",
"value": 754844
}, {
"id": "US-TN",
"value": 5689283
}, {
"id": "US-TX",
"value": 20851820,
"description": "<p>Texas is the second most populous (after California) and the second largest of the 50 U.S. states (after Alaska) in the United States of America, and the largest state in the 48 contiguous United States. Geographically located in the south central part of the country, Texas shares an international border with the Mexican states of Chihuahua, Coahuila, Nuevo León, and Tamaulipas to the south and borders the U.S. states of New Mexico to the west, Oklahoma to the north, Arkansas to the northeast, and Louisiana to the east. Texas has an area of 268,820 square miles (696,200 km2) and a growing population of over 26.9 million residents (July 2014).</p>"
}, {
"id": "US-UT",
"value": 2233169
}, {
"id": "US-VT",
"value": 608827
}, {
"id": "US-VA",
"value": 7078515
}, {
"id": "US-WA",
"value": 5894121
}, {
"id": "US-WV",
"value": 1808344
}, {
"id": "US-WI",
"value": 5363675
}, {
"id": "US-WY",
"value": 493782
}]
},
"areasSettings": {
"autoZoom": true
},
"smallMap": {},
"valueLegend": {
"right": 10,
"minValue": "little",
"maxValue": "a lot!"
},
"responsive": {
"enabled": true
}
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 100%;"></div>
</body>
</html>wget 'https://sme10.lists2.roe3.org/pmnl3/js/amcharts/plugins/responsive/examples/pie1.html'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>amCharts Responsive Example</title>
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/pie.js" type="text/javascript"></script>
<script src="../responsive.min.js" type="text/javascript"></script>
<style>
body, html {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript">
AmCharts.makeChart("chartdiv", {
"type": "pie",
"dataProvider": [{
"country": "Czech Republic",
"litres": 156.9
}, {
"country": "Ireland",
"litres": 131.1
}, {
"country": "Germany",
"litres": 115.8
}, {
"country": "Australia",
"litres": 109.9
}, {
"country": "Austria",
"litres": 108.3
}, {
"country": "UK",
"litres": 65
}, {
"country": "Belgium",
"litres": 50
}],
"titleField": "country",
"valueField": "litres",
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"innerRadius": "30%",
"legend": {
"align": "center",
"markerType": "circle"
},
"responsive": {
"enabled": true,
"addDefaultRules": true,
"rules": [
{
"minWidth": 500,
"overrides": {
"innerRadius": "50%",
}
}
]
}
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 100%;"></div>
</body>
</html>wget 'https://sme10.lists2.roe3.org/pmnl3/js/amcharts/plugins/responsive/examples/pie2.html'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>amCharts Responsive Example</title>
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/pie.js" type="text/javascript"></script>
<script src="../responsive.min.js" type="text/javascript"></script>
<style>
body, html {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript">
AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "none",
"titles": [{
"text": "Visitors countries",
"size": 16
}],
"dataProvider": [{
"country": "United States",
"visits": 7252
}, {
"country": "China",
"visits": 3882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "United Kingdom",
"visits": 1122
}, {
"country": "France",
"visits": 414
}, {
"country": "India",
"visits": 384
}, {
"country": "Spain",
"visits": 211
}],
"valueField": "visits",
"titleField": "country",
"startEffect": "elastic",
"startDuration": 2,
"labelRadius": 15,
"innerRadius": "50%",
"depth3D": 10,
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"angle": 15,
"legend": {
"position": "right"
},
"responsive": {
"enabled": true
}
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 100%;"></div>
</body>
</html>wget 'https://sme10.lists2.roe3.org/pmnl3/js/amcharts/plugins/responsive/examples/radar.html'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>amCharts Responsive Example</title>
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/radar.js" type="text/javascript"></script>
<script src="../responsive.min.js" type="text/javascript"></script>
<style>
body, html {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript">
var chart = AmCharts.makeChart("chartdiv", {
"type": "radar",
"dataProvider": [{
"country": "Czech Republic",
"litres": 156.9
}, {
"country": "Ireland",
"litres": 131.1
}, {
"country": "Germany",
"litres": 115.8
}, {
"country": "Australia",
"litres": 109.9
}, {
"country": "Austria",
"litres": 108.3
}, {
"country": "UK",
"litres": 99
}],
"categoryField": "country",
"startDuration": 2,
"valueAxes": [{
"axisAlpha": 0.15,
"minimum": 0,
"dashLength": 3,
"axisTitleOffset": 20,
"gridCount": 5
}],
"graphs": [{
"valueField": "litres",
"title": "Litres",
"bullet": "round",
"balloonText": "[[value]] litres of beer per year"
}],
"legend": {},
"responsive": {
"enabled": true
}
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 100%;"></div>
</body>
</html>wget 'https://sme10.lists2.roe3.org/pmnl3/js/amcharts/plugins/responsive/examples/serial1.html'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>amCharts Responsive Example</title>
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<script src="../responsive.min.js" type="text/javascript"></script>
<style>
body, html {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript">
var chartData = [{
"year": 2000,
"cars": 1587,
"motorcycles": 650,
"bicycles": 121
}, {
"year": 1995,
"cars": 1567,
"motorcycles": 683,
"bicycles": 146
}, {
"year": 1996,
"cars": 1617,
"motorcycles": 691,
"bicycles": 138
}, {
"year": 1997,
"cars": 1630,
"motorcycles": 642,
"bicycles": 127
}, {
"year": 1998,
"cars": 1660,
"motorcycles": 699,
"bicycles": 105
}, {
"year": 1999,
"cars": 1683,
"motorcycles": 721,
"bicycles": 109
}, {
"year": 2000,
"cars": 1691,
"motorcycles": 737,
"bicycles": 112
}, {
"year": 2001,
"cars": 1298,
"motorcycles": 680,
"bicycles": 101
}, {
"year": 2002,
"cars": 1275,
"motorcycles": 664,
"bicycles": 97
}, {
"year": 2003,
"cars": 1246,
"motorcycles": 648,
"bicycles": 93
}, {
"year": 2004,
"cars": 1218,
"motorcycles": 637,
"bicycles": 101
}, {
"year": 2005,
"cars": 1213,
"motorcycles": 633,
"bicycles": 87
}, {
"year": 2006,
"cars": 1199,
"motorcycles": 621,
"bicycles": 79
}, {
"year": 2007,
"cars": 1110,
"motorcycles": 210,
"bicycles": 81
}, {
"year": 2008,
"cars": 1165,
"motorcycles": 232,
"bicycles": 75
}, {
"year": 2009,
"cars": 1145,
"motorcycles": 219,
"bicycles": 88
}, {
"year": 2010,
"cars": 1163,
"motorcycles": 201,
"bicycles": 82
}, {
"year": 2011,
"cars": 1180,
"motorcycles": 285,
"bicycles": 87
}, {
"year": 2012,
"cars": 1159,
"motorcycles": 277,
"bicycles": 71
}];
AmCharts.makeChart("chartdiv", {
"type": "serial",
"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
"dataProvider": chartData,
"rotate": false,
"marginTop": 10,
"categoryField": "year",
"categoryAxis": {
"gridAlpha": 0.07,
"axisColor": "#DADADA",
"startOnAxis": true,
"title": "Year",
"guides": [{
"category": "2001",
"lineColor": "#CC0000",
"lineAlpha": 1,
"dashLength": 2,
"inside": true,
"labelRotation": 90,
"label": "fines for speeding increased"
}, {
"category": "2007",
"lineColor": "#CC0000",
"lineAlpha": 1,
"dashLength": 2,
"inside": true,
"labelRotation": 90,
"label": "motorcycle fee introduced"
}]
},
"valueAxes": [{
"stackType": "regular",
"gridAlpha": 0.07,
"title": "Traffic incidents"
}],
"graphs": [{
"id": "g1",
"type": "column",
"title": "Cars",
"valueField": "cars",
"bullet": "round",
"lineAlpha": 0,
"fillAlphas": 0.6,
"balloonText": "<img src='images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
}, {
"id": "g2",
"type": "column",
"title": "Motorcycles",
"valueField": "motorcycles",
"lineAlpha": 0,
"fillAlphas": 0.6,
"balloonText": "<img src='images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
}, {
"id": "g3",
"type": "column",
"title": "Bicycles",
"valueField": "bicycles",
"lineAlpha": 0,
"fillAlphas": 0.6,
"balloonText": "<img src='images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
}],
"legend": {
"position": "bottom",
"valueText": "[[value]]",
"valueWidth": 100,
"valueAlign": "left",
"equalWidths": false,
"periodValueText": "total: [[value.sum]]"
},
"chartCursor": {
"cursorAlpha": 0
},
"chartScrollbar": {
"color": "FFFFFF"
},
"responsive": {
"enabled": true
}
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 100%;"></div>
</body>
</html>wget 'https://sme10.lists2.roe3.org/pmnl3/js/amcharts/plugins/responsive/examples/serial2.html'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>amCharts Responsive Example</title>
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/themes/dark.js" type="text/javascript"></script>
<script src="../responsive.min.js" type="text/javascript"></script>
<style>
body, html {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript">
AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "dark",
"dataProvider": [{
"year": 2005,
"income": 23.5,
"expenses": 18.1
}, {
"year": 2006,
"income": 26.2,
"expenses": 22.8
}, {
"year": 2007,
"income": 30.1,
"expenses": 23.9
}, {
"year": 2008,
"income": 29.5,
"expenses": 25.1
}, {
"year": 2009,
"income": 24.6,
"expenses": 25
}],
"categoryField": "year",
"startDuration": 1,
"rotate": true,
"categoryAxis": {
"gridPosition": "start"
},
"valueAxes": [{
"position": "top",
"title": "Million USD",
"minorGridEnabled": true
}],
"graphs": [{
"type": "column",
"title": "Income",
"valueField": "income",
"fillAlphas":1,
"balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>"
}, {
"type": "line",
"title": "Expenses",
"valueField": "expenses",
"lineThickness": 2,
"bullet": "round",
"balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>"
}],
"legend": {
"useGraphSettings": true
},
"creditsPosition": "top-right",
"responsive": {
"enabled": true
}
});
</script>
</head>
<body style="background-color:#282828;">
<div id="chartdiv" style="width: 100%; height: 100%;"></div>
</body>
</html>wget 'https://sme10.lists2.roe3.org/pmnl3/js/amcharts/plugins/responsive/examples/serial3.html'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>amCharts Responsive Example</title>
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<script src="../responsive.min.js" type="text/javascript"></script>
<style>
body, html {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript">
var chartData = [];
generateChartData();
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
"dataProvider": chartData,
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"gridAlpha": 0.15,
"minorGridEnabled": true,
"axisColor": "#DADADA"
},
"valueAxes": [{
"axisAlpha": 0.2,
"id": "v1"
}],
"graphs": [{
"title": "red line",
"id": "g1",
"valueAxis": "v1",
"valueField": "visits",
"bullet": "round",
"bulletBorderColor": "#FFFFFF",
"bulletBorderAlpha": 1,
"lineThickness": 2,
"lineColor": "#b5030d",
"negativeLineColor": "#0352b5",
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>"
}],
"chartCursor": {
"fullWidth": true,
"cursorAlpha": 0.1
},
"chartScrollbar": {
"scrollbarHeight": 40,
"color": "#FFFFFF",
"autoGridCount": true,
"graph": "g1"
},
"mouseWheelZoomEnabled": true,
"responsive": {
"enabled": true
}
});
chart.addListener("dataUpdated", zoomChart);
// generate some random data, quite different range
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 500);
for (var i = 0; i < 500; i++) {
// we create date objects here. In your data, you can have date strings
// and then set format of your dates using chart.dataDateFormat property,
// however when possible, use date objects, as this will speed up chart rendering.
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var visits = Math.round(Math.random() * 40) - 20;
chartData.push({
date: newDate,
visits: visits
});
}
}
// this method is called when chart is first inited as we listen for "dataUpdated" event
function zoomChart() {
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
}
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 100%;"></div>
</body>
</html>wget 'https://sme10.lists2.roe3.org/pmnl3/js/amcharts/plugins/responsive/examples/stock.html'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>amCharts Responsive Example</title>
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/amstock.js" type="text/javascript"></script>
<script src="../responsive.min.js" type="text/javascript"></script>
<style>
body, html {
height: 100%;
padding: 0;
margin: 0;
font-family: Verdana;
font-size: 12px;
}
</style>
<script type="text/javascript">
var chartData1 = [];
var chartData2 = [];
var chartData3 = [];
var chartData4 = [];
generateChartData();
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 500);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
var a2 = Math.round(Math.random() * (100 + i)) + 200 + i;
var b2 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
var a3 = Math.round(Math.random() * (100 + i)) + 200;
var b3 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
var a4 = Math.round(Math.random() * (100 + i)) + 200 + i;
var b4 = Math.round(Math.random() * (100 + i)) + 600 + i;
chartData1.push({
date: newDate,
value: a1,
volume: b1
});
chartData2.push({
date: newDate,
value: a2,
volume: b2
});
chartData3.push({
date: newDate,
value: a3,
volume: b3
});
chartData4.push({
date: newDate,
value: a4,
volume: b4
});
}
}
var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
"theme": "none",
pathToImages: "http://www.amcharts.com/lib/3/images/",
dataSets: [{
title: "first data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData1,
categoryField: "date"
},
{
title: "second data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData2,
categoryField: "date"
},
{
title: "third data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData3,
categoryField: "date"
},
{
title: "fourth data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData4,
categoryField: "date"
}
],
panels: [{
showCategoryAxis: false,
title: "Value",
percentHeight: 70,
stockGraphs: [{
id: "g1",
valueField: "value",
comparable: true,
compareField: "value",
balloonText: "[[title]]:<b>[[value]]</b>",
compareGraphBalloonText: "[[title]]:<b>[[value]]</b>"
}],
stockLegend: {
periodValueTextComparing: "[[percents.value.close]]%",
periodValueTextRegular: "[[value.close]]"
}
},
{
title: "Volume",
percentHeight: 30,
stockGraphs: [{
valueField: "volume",
type: "column",
showBalloon: false,
fillAlphas: 1
}],
stockLegend: {
periodValueTextRegular: "[[value.close]]"
}
}
],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true,
fullWidth:true,
cursorAlpha:0.1,
valueLineBalloonEnabled:true,
valueLineEnabled:true,
valueLineAlpha:0.5
},
periodSelector: {
position: "left",
periods: [{
period: "MM",
selected: true,
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
},
dataSetSelector: {
position: "left"
},
"responsive": {
"enabled": true
}
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 100%;"></div>
</body>
</html>wget 'https://sme10.lists2.roe3.org/pmnl3/js/amcharts/plugins/responsive/examples/xy.html'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>amCharts Responsive Example</title>
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/xy.js" type="text/javascript"></script>
<script src="../responsive.min.js" type="text/javascript"></script>
<style>
body, html {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript">
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"startDuration": 1.5,
"trendLines": [],
"graphs": [
{
"title": "Diamonds",
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "diamond",
"id": "AmGraph-1",
"lineAlpha": 0,
"lineColor": "#b0de09",
"valueField": "value",
"xField": "x",
"yField": "y"
},
{
"title": "Balls",
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "round",
"id": "AmGraph-2",
"lineAlpha": 0,
"lineColor": "#fcd202",
"valueField": "value2",
"xField": "x2",
"yField": "y2"
}
],
"guides": [
{
"fillAlpha": 0.3,
"fillColor": "#ff8000",
"id": "Guide-1",
"toValue": -2,
"value": -8,
"valueAxis": "ValueAxis-2"
}
],
"valueAxes": [
{
"id": "ValueAxis-1",
"axisAlpha": 0
},
{
"id": "ValueAxis-2",
"axisAlpha": 0,
"position": "bottom"
}
],
"allLabels": [],
"balloon": {},
"titles": [],
"dataProvider": [
{
"y": 10,
"x": 14,
"value": 59,
"y2": -5,
"x2": -3,
"value2": 44
},
{
"y": 5,
"x": 3,
"value": 50,
"y2": -15,
"x2": -8,
"value2": 12
},
{
"y": -10,
"x": -3,
"value": 19,
"y2": -4,
"x2": 6,
"value2": 35
},
{
"y": -6,
"x": 5,
"value": 65,
"y2": -5,
"x2": -6,
"value2": 168
},
{
"y": 15,
"x": -4,
"value": 92,
"y2": -10,
"x2": -8,
"value2": 102
},
{
"y": 13,
"x": 1,
"value": 8,
"y2": -2,
"x2": -3,
"value2": 41
},
{
"y": 1,
"x": 6,
"value": 35,
"y2": 0,
"x2": -3,
"value2": 16
}
],
"chartCursor": {},
"legend": {
"position": "bottom"
},
"responsive": {
"enabled": true
}
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 100%;"></div>
</body>
</html>