mirror of
https://github.com/janickiy/yii2-nomer
synced 2025-03-09 15:39:59 +00:00
add files to project
This commit is contained in:
janickiy
commit
5cac498444
3729 changed files with 836998 additions and 0 deletions
71
web/js/amcharts/plugins/responsive/examples/funnel.html
Normal file
71
web/js/amcharts/plugins/responsive/examples/funnel.html
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<!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"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/funnel.js"></script>
|
||||
<script src="../responsive.min.js"></script>
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var chart = AmCharts.makeChart("chartdiv", {
|
||||
"type": "funnel",
|
||||
"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>
|
||||
304
web/js/amcharts/plugins/responsive/examples/gantt.html
Normal file
304
web/js/amcharts/plugins/responsive/examples/gantt.html
Normal file
|
|
@ -0,0 +1,304 @@
|
|||
<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">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/gantt.js"></script>
|
||||
<script src="../responsive.min.js"></script>
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
AmCharts.useUTC = true;
|
||||
var chart = AmCharts.makeChart( "chartdiv", {
|
||||
"type": "gantt",
|
||||
"period": "hh",
|
||||
"balloonDateFormat": "JJ:NN",
|
||||
"columnWidth": 0.5,
|
||||
"valueAxis": {
|
||||
"type": "date",
|
||||
"minimum": 7,
|
||||
"maximum": 31
|
||||
},
|
||||
"brightnessStep": 10,
|
||||
"graph": {
|
||||
"fillAlphas": 1,
|
||||
"balloonText": "<b>[[task]]</b>: [[open]] [[value]]"
|
||||
},
|
||||
"rotate": true,
|
||||
"categoryField": "category",
|
||||
"segmentsField": "segments",
|
||||
"colorField": "color",
|
||||
"startDate": "2015-01-01",
|
||||
"startField": "start",
|
||||
"endField": "end",
|
||||
"durationField": "duration",
|
||||
"dataProvider": [ {
|
||||
"category": "John",
|
||||
"segments": [ {
|
||||
"start": 7,
|
||||
"duration": 2,
|
||||
"color": "#7B742C",
|
||||
"task": "Task #1"
|
||||
}, {
|
||||
"duration": 2,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
}, {
|
||||
"duration": 2,
|
||||
"color": "#CF794A",
|
||||
"task": "Task #3"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Smith",
|
||||
"segments": [ {
|
||||
"start": 10,
|
||||
"duration": 2,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
}, {
|
||||
"duration": 1,
|
||||
"color": "#CF794A",
|
||||
"task": "Task #3"
|
||||
}, {
|
||||
"duration": 4,
|
||||
"color": "#7B742C",
|
||||
"task": "Task #1"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Ben",
|
||||
"segments": [ {
|
||||
"start": 12,
|
||||
"duration": 2,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
}, {
|
||||
"start": 16,
|
||||
"duration": 2,
|
||||
"color": "#FFE4C4",
|
||||
"task": "Task #4"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Mike",
|
||||
"segments": [ {
|
||||
"start": 9,
|
||||
"duration": 6,
|
||||
"color": "#7B742C",
|
||||
"task": "Task #1"
|
||||
}, {
|
||||
"duration": 4,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Lenny",
|
||||
"segments": [ {
|
||||
"start": 8,
|
||||
"duration": 1,
|
||||
"color": "#CF794A",
|
||||
"task": "Task #3"
|
||||
}, {
|
||||
"duration": 4,
|
||||
"color": "#7B742C",
|
||||
"task": "Task #1"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Scott",
|
||||
"segments": [ {
|
||||
"start": 15,
|
||||
"duration": 3,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Julia",
|
||||
"segments": [ {
|
||||
"start": 9,
|
||||
"duration": 2,
|
||||
"color": "#7B742C",
|
||||
"task": "Task #1"
|
||||
}, {
|
||||
"duration": 1,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
}, {
|
||||
"duration": 8,
|
||||
"color": "#CF794A",
|
||||
"task": "Task #3"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Bob",
|
||||
"segments": [ {
|
||||
"start": 9,
|
||||
"duration": 8,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
}, {
|
||||
"duration": 7,
|
||||
"color": "#CF794A",
|
||||
"task": "Task #3"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Kendra",
|
||||
"segments": [ {
|
||||
"start": 11,
|
||||
"duration": 8,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
}, {
|
||||
"start": 16,
|
||||
"duration": 2,
|
||||
"color": "#FFE4C4",
|
||||
"task": "Task #4"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Tom",
|
||||
"segments": [ {
|
||||
"start": 9,
|
||||
"duration": 4,
|
||||
"color": "#7B742C",
|
||||
"task": "Task #1"
|
||||
}, {
|
||||
"duration": 3,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
}, {
|
||||
"duration": 5,
|
||||
"color": "#CF794A",
|
||||
"task": "Task #3"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Kyle",
|
||||
"segments": [ {
|
||||
"start": 6,
|
||||
"duration": 3,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Anita",
|
||||
"segments": [ {
|
||||
"start": 12,
|
||||
"duration": 2,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
}, {
|
||||
"start": 16,
|
||||
"duration": 2,
|
||||
"color": "#FFE4C4",
|
||||
"task": "Task #4"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Jack",
|
||||
"segments": [ {
|
||||
"start": 8,
|
||||
"duration": 10,
|
||||
"color": "#7B742C",
|
||||
"task": "Task #1"
|
||||
}, {
|
||||
"duration": 2,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Kim",
|
||||
"segments": [ {
|
||||
"start": 12,
|
||||
"duration": 2,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
}, {
|
||||
"duration": 3,
|
||||
"color": "#CF794A",
|
||||
"task": "Task #3"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Aaron",
|
||||
"segments": [ {
|
||||
"start": 18,
|
||||
"duration": 2,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
}, {
|
||||
"duration": 2,
|
||||
"color": "#FFE4C4",
|
||||
"task": "Task #4"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Alan",
|
||||
"segments": [ {
|
||||
"start": 17,
|
||||
"duration": 2,
|
||||
"color": "#7B742C",
|
||||
"task": "Task #1"
|
||||
}, {
|
||||
"duration": 2,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
}, {
|
||||
"duration": 2,
|
||||
"color": "#CF794A",
|
||||
"task": "Task #3"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Ruth",
|
||||
"segments": [ {
|
||||
"start": 13,
|
||||
"duration": 2,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
}, {
|
||||
"duration": 1,
|
||||
"color": "#CF794A",
|
||||
"task": "Task #3"
|
||||
}, {
|
||||
"duration": 4,
|
||||
"color": "#7B742C",
|
||||
"task": "Task #1"
|
||||
} ]
|
||||
}, {
|
||||
"category": "Simon",
|
||||
"segments": [ {
|
||||
"start": 10,
|
||||
"duration": 3,
|
||||
"color": "#7E585F",
|
||||
"task": "Task #2"
|
||||
}, {
|
||||
"start": 17,
|
||||
"duration": 4,
|
||||
"color": "#FFE4C4",
|
||||
"task": "Task #4"
|
||||
} ]
|
||||
} ],
|
||||
"chartScrollbar": {},
|
||||
"chartCursor": {
|
||||
"valueBalloonsEnabled": false,
|
||||
"cursorAlpha": 0.1,
|
||||
"valueLineBalloonEnabled": true,
|
||||
"valueLineEnabled": true,
|
||||
"fullWidth": true
|
||||
},
|
||||
"responsive": {
|
||||
"enabled": true
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
71
web/js/amcharts/plugins/responsive/examples/gauge.html
Normal file
71
web/js/amcharts/plugins/responsive/examples/gauge.html
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<!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"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/gauge.js"></script>
|
||||
<script src="../responsive.min.js"></script>
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
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>
|
||||
BIN
web/js/amcharts/plugins/responsive/examples/images/bicycle.png
Normal file
BIN
web/js/amcharts/plugins/responsive/examples/images/bicycle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
web/js/amcharts/plugins/responsive/examples/images/car.png
Normal file
BIN
web/js/amcharts/plugins/responsive/examples/images/car.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 759 B |
Binary file not shown.
|
After Width: | Height: | Size: 1,020 B |
112
web/js/amcharts/plugins/responsive/examples/index.html
Normal file
112
web/js/amcharts/plugins/responsive/examples/index.html
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
<!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>
|
||||
$(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="pie3.html"/>Pie #3 (several instances)</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="gantt.html">GANTT</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>
|
||||
198
web/js/amcharts/plugins/responsive/examples/map.html
Normal file
198
web/js/amcharts/plugins/responsive/examples/map.html
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
<!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"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/maps/js/usaLow.js"></script>
|
||||
<script src="../responsive.min.js"></script>
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var map = AmCharts.makeChart("chartdiv", {
|
||||
type: "map",
|
||||
"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>
|
||||
71
web/js/amcharts/plugins/responsive/examples/pie1.html
Normal file
71
web/js/amcharts/plugins/responsive/examples/pie1.html
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<!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"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
|
||||
<script src="../responsive.min.js"></script>
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
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>
|
||||
73
web/js/amcharts/plugins/responsive/examples/pie2.html
Normal file
73
web/js/amcharts/plugins/responsive/examples/pie2.html
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<!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"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
|
||||
<script src="../responsive.min.js"></script>
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
AmCharts.makeChart("chartdiv", {
|
||||
"type": "pie",
|
||||
"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>
|
||||
106
web/js/amcharts/plugins/responsive/examples/pie3.html
Normal file
106
web/js/amcharts/plugins/responsive/examples/pie3.html
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
<!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"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
|
||||
<script src="../responsive.min.js"></script>
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.chartdiv {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
AmCharts.makeChart( "chart1", {
|
||||
"type": "pie",
|
||||
"titles": [ {
|
||||
"text": "Visits",
|
||||
"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
|
||||
} ],
|
||||
"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": {},
|
||||
"responsive": {
|
||||
"enabled": true
|
||||
}
|
||||
} );
|
||||
|
||||
AmCharts.makeChart( "chart2", {
|
||||
"type": "pie",
|
||||
"theme": "none",
|
||||
"titles": [ {
|
||||
"text": "Views",
|
||||
"size": 16
|
||||
} ],
|
||||
"dataProvider": [ {
|
||||
"country": "United States",
|
||||
"visits": 10616
|
||||
}, {
|
||||
"country": "China",
|
||||
"visits": 9845
|
||||
}, {
|
||||
"country": "Japan",
|
||||
"visits": 3111
|
||||
}, {
|
||||
"country": "Germany",
|
||||
"visits": 2874
|
||||
}, {
|
||||
"country": "United Kingdom",
|
||||
"visits": 2110
|
||||
} ],
|
||||
"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": {},
|
||||
"responsive": {
|
||||
"enabled": true
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="chart1" class="chartdiv"></div>
|
||||
<div id="chart2" class="chartdiv"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
67
web/js/amcharts/plugins/responsive/examples/radar.html
Normal file
67
web/js/amcharts/plugins/responsive/examples/radar.html
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<!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"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/radar.js"></script>
|
||||
<script src="../responsive.min.js"></script>
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
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>
|
||||
203
web/js/amcharts/plugins/responsive/examples/serial1.html
Normal file
203
web/js/amcharts/plugins/responsive/examples/serial1.html
Normal file
|
|
@ -0,0 +1,203 @@
|
|||
<!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"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
|
||||
<script src="../responsive.min.js"></script>
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
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",
|
||||
"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>
|
||||
84
web/js/amcharts/plugins/responsive/examples/serial2.html
Normal file
84
web/js/amcharts/plugins/responsive/examples/serial2.html
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<!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"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/themes/dark.js"></script>
|
||||
<script src="../responsive.min.js"></script>
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
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>
|
||||
103
web/js/amcharts/plugins/responsive/examples/serial3.html
Normal file
103
web/js/amcharts/plugins/responsive/examples/serial3.html
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<!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"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
|
||||
<script src="../responsive.min.js"></script>
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
||||
var chartData = [];
|
||||
generateChartData();
|
||||
|
||||
var chart = AmCharts.makeChart("chartdiv", {
|
||||
"type": "serial",
|
||||
"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>
|
||||
210
web/js/amcharts/plugins/responsive/examples/stock.html
Normal file
210
web/js/amcharts/plugins/responsive/examples/stock.html
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
<!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"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/amstock.js"></script>
|
||||
<script src="../responsive.min.js"></script>
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: Verdana;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
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",
|
||||
|
||||
"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>
|
||||
145
web/js/amcharts/plugins/responsive/examples/xy.html
Normal file
145
web/js/amcharts/plugins/responsive/examples/xy.html
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<!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"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/xy.js"></script>
|
||||
<script src="../responsive.min.js"></script>
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue