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
257
web/js/amcharts/plugins/export/examples/advanced.html
Normal file
257
web/js/amcharts/plugins/export/examples/advanced.html
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
<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" />
|
||||
|
||||
<!-- AmCharts includes -->
|
||||
<script src="../../../AmDebug/lib/amcharts/amcharts.js"></script>
|
||||
<script src="../../../AmDebug/lib/amcharts/serial.js"></script>
|
||||
|
||||
<!-- Export plugin includes and styles -->
|
||||
<script src="../export.js"></script>
|
||||
<link type="text/css" href="../export.css" rel="stylesheet">
|
||||
|
||||
<script src="export.config.advanced.js"></script>
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var chart = AmCharts.makeChart( "chartdiv", {
|
||||
"type": "serial",
|
||||
"theme": "light",
|
||||
"legend": {
|
||||
"equalWidths": false,
|
||||
"useGraphSettings": true,
|
||||
"valueAlign": "left",
|
||||
"valueWidth": 120
|
||||
},
|
||||
"dataProvider": [ {
|
||||
"date": "2012-01-01",
|
||||
"distance": 227,
|
||||
"townName": "New York",
|
||||
"townName2": "New York",
|
||||
"townSize": 25,
|
||||
"latitude": 40.71,
|
||||
"duration": 408
|
||||
}, {
|
||||
"date": "2012-01-02",
|
||||
"distance": 371,
|
||||
"townName": "Washington",
|
||||
"townSize": 14,
|
||||
"latitude": 38.89,
|
||||
"duration": 482
|
||||
}, {
|
||||
"date": "2012-01-03",
|
||||
"distance": 433,
|
||||
"townName": "Wilmington",
|
||||
"townSize": 6,
|
||||
"latitude": 34.22,
|
||||
"duration": 562
|
||||
}, {
|
||||
"date": "2012-01-04",
|
||||
"distance": 345,
|
||||
"townName": "Jacksonville",
|
||||
"townSize": 7,
|
||||
"latitude": 30.35,
|
||||
"duration": 379
|
||||
}, {
|
||||
"date": "2012-01-05",
|
||||
"distance": 480,
|
||||
"townName": "Miami",
|
||||
"townName2": "Miami",
|
||||
"townSize": 10,
|
||||
"latitude": 25.83,
|
||||
"duration": 501
|
||||
}, {
|
||||
"date": "2012-01-06",
|
||||
"distance": 386,
|
||||
"townName": "Tallahassee",
|
||||
"townSize": 7,
|
||||
"latitude": 30.46,
|
||||
"duration": 443
|
||||
}, {
|
||||
"date": "2012-01-07",
|
||||
"distance": 348,
|
||||
"townName": "New Orleans",
|
||||
"townSize": 10,
|
||||
"latitude": 29.94,
|
||||
"duration": 405
|
||||
}, {
|
||||
"date": "2012-01-08",
|
||||
"distance": 238,
|
||||
"townName": "Houston",
|
||||
"townName2": "Houston",
|
||||
"townSize": 16,
|
||||
"latitude": 29.76,
|
||||
"duration": 309
|
||||
}, {
|
||||
"date": "2012-01-09",
|
||||
"distance": 218,
|
||||
"townName": "Dalas",
|
||||
"townSize": 17,
|
||||
"latitude": 32.8,
|
||||
"duration": 287
|
||||
}, {
|
||||
"date": "2012-01-10",
|
||||
"distance": 349,
|
||||
"townName": "Oklahoma City",
|
||||
"townSize": 11,
|
||||
"latitude": 35.49,
|
||||
"duration": 485
|
||||
}, {
|
||||
"date": "2012-01-11",
|
||||
"distance": 603,
|
||||
"townName": "Kansas City",
|
||||
"townSize": 10,
|
||||
"latitude": 39.1,
|
||||
"duration": 890
|
||||
}, {
|
||||
"date": "2012-01-12",
|
||||
"distance": 534,
|
||||
"townName": "Denver",
|
||||
"townName2": "Denver",
|
||||
"townSize": 18,
|
||||
"latitude": 39.74,
|
||||
"duration": 810
|
||||
}, {
|
||||
"date": "2012-01-13",
|
||||
"townName": "Salt Lake City",
|
||||
"townSize": 12,
|
||||
"distance": 425,
|
||||
"duration": 670,
|
||||
"latitude": 40.75,
|
||||
"dashLength": 8,
|
||||
"alpha": 0.4
|
||||
}, {
|
||||
"date": "2012-01-14",
|
||||
"latitude": 36.1,
|
||||
"duration": 470,
|
||||
"townName": "Las Vegas",
|
||||
"townName2": "Las Vegas"
|
||||
}, {
|
||||
"date": "2012-01-15"
|
||||
}, {
|
||||
"date": "2012-01-16"
|
||||
}, {
|
||||
"date": "2012-01-17"
|
||||
}, {
|
||||
"date": "2012-01-18"
|
||||
}, {
|
||||
"date": "2012-01-19"
|
||||
} ],
|
||||
"valueAxes": [ {
|
||||
"id": "distanceAxis",
|
||||
"axisAlpha": 0,
|
||||
"gridAlpha": 0,
|
||||
"position": "left",
|
||||
"title": "distance"
|
||||
}, {
|
||||
"id": "latitudeAxis",
|
||||
"axisAlpha": 0,
|
||||
"gridAlpha": 0,
|
||||
"labelsEnabled": false,
|
||||
"position": "right"
|
||||
}, {
|
||||
"id": "durationAxis",
|
||||
"duration": "mm",
|
||||
"durationUnits": {
|
||||
"hh": "h ",
|
||||
"mm": "min"
|
||||
},
|
||||
"axisAlpha": 0,
|
||||
"gridAlpha": 0,
|
||||
"inside": true,
|
||||
"position": "right",
|
||||
"title": "duration"
|
||||
} ],
|
||||
"graphs": [ {
|
||||
"alphaField": "alpha",
|
||||
"balloonText": "[[value]] miles",
|
||||
"dashLengthField": "dashLength",
|
||||
"fillAlphas": 0.7,
|
||||
"legendPeriodValueText": "total: [[value.sum]] mi",
|
||||
"legendValueText": "[[value]] mi",
|
||||
"title": "distance",
|
||||
"type": "column",
|
||||
"valueField": "distance",
|
||||
"valueAxis": "distanceAxis"
|
||||
}, {
|
||||
"balloonText": "latitude:[[value]]",
|
||||
"bullet": "round",
|
||||
"bulletBorderAlpha": 1,
|
||||
"useLineColorForBulletBorder": true,
|
||||
"bulletColor": "#FFFFFF",
|
||||
"bulletSizeField": "townSize",
|
||||
"dashLengthField": "dashLength",
|
||||
"descriptionField": "townName",
|
||||
"labelPosition": "right",
|
||||
"labelText": "[[townName2]]",
|
||||
"legendValueText": "[[description]]/[[value]]",
|
||||
"title": "latitude/city",
|
||||
"fillAlphas": 0,
|
||||
"valueField": "latitude",
|
||||
"valueAxis": "latitudeAxis"
|
||||
}, {
|
||||
"bullet": "square",
|
||||
"bulletBorderAlpha": 1,
|
||||
"bulletBorderThickness": 1,
|
||||
"dashLengthField": "dashLength",
|
||||
"legendValueText": "[[value]]",
|
||||
"title": "duration",
|
||||
"fillAlphas": 0,
|
||||
"valueField": "duration",
|
||||
"valueAxis": "durationAxis"
|
||||
} ],
|
||||
"chartCursor": {
|
||||
"categoryBalloonDateFormat": "DD",
|
||||
"cursorAlpha": 0.1,
|
||||
"cursorColor": "#000000",
|
||||
"fullWidth": true,
|
||||
"valueBalloonsEnabled": false,
|
||||
"zoomable": false
|
||||
},
|
||||
"dataDateFormat": "YYYY-MM-DD",
|
||||
"categoryField": "date",
|
||||
"categoryAxis": {
|
||||
"dateFormats": [ {
|
||||
"period": "DD",
|
||||
"format": "DD"
|
||||
}, {
|
||||
"period": "WW",
|
||||
"format": "MMM DD"
|
||||
}, {
|
||||
"period": "MM",
|
||||
"format": "MMM"
|
||||
}, {
|
||||
"period": "YYYY",
|
||||
"format": "YYYY"
|
||||
} ],
|
||||
"parseDates": true,
|
||||
"autoGridCount": false,
|
||||
"axisColor": "#555555",
|
||||
"gridAlpha": 0.1,
|
||||
"gridColor": "#FFFFFF",
|
||||
"gridCount": 50
|
||||
},
|
||||
"export": AmCharts.exportCFG
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
/**
|
||||
* This is a sample chart export config file. It is provided as a reference on
|
||||
* how miscelaneous items in export menu can be used and set up.
|
||||
*
|
||||
* Please refer to README.md for more information.
|
||||
*/
|
||||
|
||||
/**
|
||||
* PDF-specfic configuration
|
||||
*/
|
||||
AmCharts.exportDrawingMenu = [ {
|
||||
class: "export-drawing",
|
||||
label: "Export",
|
||||
menu: [ {
|
||||
label: "Undo",
|
||||
click: function() {
|
||||
this.drawing.handler.undo();
|
||||
}
|
||||
}, {
|
||||
label: "Redo",
|
||||
click: function() {
|
||||
this.drawing.handler.redo();
|
||||
}
|
||||
}, {
|
||||
label: "Cancel",
|
||||
click: function() {
|
||||
this.drawing.handler.done();
|
||||
}
|
||||
}, {
|
||||
label: "Save",
|
||||
menu: [ {
|
||||
label: "JPG",
|
||||
click: function() {
|
||||
this.drawing.handler.done();
|
||||
this.toJPG( {}, function( data ) {
|
||||
this.download( data, "image/jpg", "amCharts.jpg" );
|
||||
} );
|
||||
}
|
||||
}, {
|
||||
label: "PNG",
|
||||
click: function() {
|
||||
this.drawing.handler.done();
|
||||
this.toPNG( {}, function( data ) {
|
||||
this.download( data, "image/png", "amCharts.png" );
|
||||
} );
|
||||
}
|
||||
}, {
|
||||
label: "PDF",
|
||||
click: function() {
|
||||
this.drawing.handler.done();
|
||||
this.toPDF( {}, function( data ) {
|
||||
this.download( data, "application/pdf", "amCharts.pdf" );
|
||||
} );
|
||||
}
|
||||
}, {
|
||||
label: "SVG",
|
||||
click: function() {
|
||||
this.drawing.handler.done();
|
||||
this.toSVG( {}, function( data ) {
|
||||
this.download( data, "text/xml", "amCharts.svg" );
|
||||
} );
|
||||
}
|
||||
} ]
|
||||
} ]
|
||||
} ];
|
||||
|
||||
|
||||
/**
|
||||
* Define main universal config
|
||||
*/
|
||||
AmCharts.exportCFG = {
|
||||
enabled: true,
|
||||
libs: {
|
||||
path: "../libs/"
|
||||
},
|
||||
menu: [ {
|
||||
class: "export-main",
|
||||
label: "Export",
|
||||
menu: [
|
||||
/*
|
||||
** DRAWING
|
||||
*/
|
||||
{
|
||||
label: "Draw",
|
||||
click: function() {
|
||||
this.capture( {
|
||||
action: "draw",
|
||||
freeDrawingBrush: {
|
||||
width: 2,
|
||||
color: "#000000",
|
||||
shadow: {
|
||||
color: "rgba(0,0,0,0.3)",
|
||||
blur: 10,
|
||||
offsetX: 3,
|
||||
offsetY: 3
|
||||
}
|
||||
}
|
||||
}, function() {
|
||||
this.createMenu( AmCharts.exportDrawingMenu );
|
||||
} );
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
** DELAYED DRAWING
|
||||
*/
|
||||
{
|
||||
label: "Delayed draw",
|
||||
action: "draw",
|
||||
delay: 2
|
||||
},
|
||||
|
||||
/*
|
||||
** DELAYED EXPORT; automatical download
|
||||
*/
|
||||
{
|
||||
label: "Delayed save",
|
||||
format: "png",
|
||||
delay: 2
|
||||
},
|
||||
|
||||
/*
|
||||
** WATERMARK EXPORT; Post procesing
|
||||
*/
|
||||
{
|
||||
label: "Watermark",
|
||||
format: "png",
|
||||
action: false, // Avoids automatical downloads
|
||||
afterCapture: function() {
|
||||
var canvas = this.setup.fabric;
|
||||
var watermark = new fabric.Text("watermark",{
|
||||
originX: "center",
|
||||
originY: "center",
|
||||
top: canvas.height / 2,
|
||||
left: canvas.width / 2,
|
||||
fontSize: 50,
|
||||
opacity: 0.4
|
||||
});
|
||||
|
||||
// Add watermark to canvas
|
||||
// In case of images ensure the images has been fully loaded before converting
|
||||
canvas.add(watermark);
|
||||
|
||||
// Convert to PNG
|
||||
this.toPNG({},function(base64) {
|
||||
var format = this.defaults.formats.PNG;
|
||||
var fileType = format.mimeType;
|
||||
var fileName = "amCharts." + format.extension;
|
||||
var fileData = base64;
|
||||
|
||||
// Trigger download
|
||||
this.download(fileData,fileType,fileName);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
** DOWNLOAD
|
||||
*/
|
||||
{
|
||||
label: "Download",
|
||||
menu: [ {
|
||||
label: "JPG",
|
||||
click: function() {
|
||||
this.capture( {}, function() {
|
||||
this.toJPG( {}, function( data ) {
|
||||
this.download( data, "image/jpg", "amCharts.jpg" );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
}, {
|
||||
label: "PNG",
|
||||
click: function() {
|
||||
this.capture( {}, function() {
|
||||
this.toPNG( {}, function( data ) {
|
||||
this.download( data, "image/png", "amCharts.png" );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
}, {
|
||||
label: "PDF",
|
||||
click: function() {
|
||||
this.capture( {}, function() {
|
||||
this.toPDF( {}, function( data ) {
|
||||
this.download( data, "application/pdf", "amCharts.pdf" );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
}, {
|
||||
label: "PDF + data",
|
||||
click: function() {
|
||||
this.capture( {}, function() {
|
||||
var tableData = this.setup.chart.dataProvider;
|
||||
var tableBody = this.toArray( {
|
||||
withHeader: true,
|
||||
data: tableData
|
||||
} );
|
||||
|
||||
var tableWidths = [];
|
||||
var content = [ {
|
||||
image: "reference",
|
||||
fit: [ 523.28, 769.89 ]
|
||||
} ];
|
||||
|
||||
for ( i in tableBody[ 0 ] ) {
|
||||
tableWidths.push( "*" );
|
||||
}
|
||||
|
||||
content.push( {
|
||||
table: {
|
||||
headerRows: 1,
|
||||
widths: tableWidths,
|
||||
body: tableBody
|
||||
},
|
||||
layout: 'lightHorizontalLines'
|
||||
} );
|
||||
|
||||
this.toPDF( {
|
||||
content: content
|
||||
}, function( data ) {
|
||||
this.download( data, "application/pdf", "amCharts.pdf" );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
}, {
|
||||
label: "SVG",
|
||||
click: function() {
|
||||
this.capture( {}, function() {
|
||||
this.toSVG( {}, function( data ) {
|
||||
this.download( data, "text/xml", "amCharts.svg" );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
}, {
|
||||
label: "CSV",
|
||||
click: function() {
|
||||
this.toCSV( {}, function( data ) {
|
||||
this.download( data, "text/plain", "amCharts.csv" );
|
||||
} );
|
||||
}
|
||||
}, {
|
||||
label: "JSON",
|
||||
click: function() {
|
||||
this.toJSON( {}, function( data ) {
|
||||
this.download( data, "text/plain", "amCharts.json" );
|
||||
} );
|
||||
}
|
||||
}, {
|
||||
label: "XLSX",
|
||||
click: function() {
|
||||
this.toXLSX( {}, function( data ) {
|
||||
this.download( data, "application/octet-stream", "amCharts.xlsx" );
|
||||
} );
|
||||
}
|
||||
} ]
|
||||
}
|
||||
]
|
||||
} ]
|
||||
};
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
/**
|
||||
* This is a sample chart export config file. It is provided as a reference on
|
||||
* how miscelaneous items in export menu can be used and set up.
|
||||
*
|
||||
* You do not need to use this file. It contains default export menu options
|
||||
* that will be shown if you do not provide any "menu" in your export config.
|
||||
*
|
||||
* Please refer to README.md for more information.
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* PDF-specfic configuration
|
||||
*/
|
||||
AmCharts.exportPDF = {
|
||||
"format": "PDF",
|
||||
"content": [ "Saved from:", window.location.href, {
|
||||
"image": "reference",
|
||||
"fit": [ 523.28, 769.89 ] // fit image to A4
|
||||
} ]
|
||||
};
|
||||
|
||||
/**
|
||||
* Print-specfic configuration
|
||||
*/
|
||||
AmCharts.exportPrint = {
|
||||
"format": "PRINT",
|
||||
"label": "Print"
|
||||
};
|
||||
|
||||
/**
|
||||
* Define main universal config
|
||||
*/
|
||||
AmCharts.exportCFG = {
|
||||
"enabled": true,
|
||||
"menu": [ {
|
||||
"class": "export-main",
|
||||
"label": "Export",
|
||||
"menu": [ {
|
||||
"label": "Download as ...",
|
||||
"menu": [ "PNG", "JPG", "SVG", AmCharts.exportPDF ]
|
||||
}, {
|
||||
"label": "Save data ...",
|
||||
"menu": [ "CSV", "XLSX", "JSON" ]
|
||||
}, {
|
||||
"label": "Annotate",
|
||||
"action": "draw"
|
||||
}, AmCharts.exportPrint ]
|
||||
} ],
|
||||
|
||||
"drawing": {
|
||||
"menu": [ {
|
||||
"class": "export-drawing",
|
||||
"menu": [ {
|
||||
"label": "Add ...",
|
||||
"menu": [ {
|
||||
"label": "Shape ...",
|
||||
"action": "draw.shapes"
|
||||
}, {
|
||||
"label": "Text",
|
||||
"action": "text"
|
||||
} ]
|
||||
}, {
|
||||
"label": "Change ...",
|
||||
"menu": [ {
|
||||
"label": "Mode ...",
|
||||
"action": "draw.modes"
|
||||
}, {
|
||||
"label": "Color ...",
|
||||
"action": "draw.colors"
|
||||
}, {
|
||||
"label": "Size ...",
|
||||
"action": "draw.widths"
|
||||
}, {
|
||||
"label": "Opactiy ...",
|
||||
"action": "draw.opacities"
|
||||
}, "UNDO", "REDO" ]
|
||||
}, {
|
||||
"label": "Download as...",
|
||||
"menu": [ "PNG", "JPG", "SVG", "PDF" ]
|
||||
}, "PRINT", "CANCEL" ]
|
||||
} ]
|
||||
}
|
||||
};
|
||||
80
web/js/amcharts/plugins/export/examples/funnel.html
Normal file
80
web/js/amcharts/plugins/export/examples/funnel.html
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<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" />
|
||||
|
||||
<!-- AmCharts includes -->
|
||||
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/funnel.js"></script>
|
||||
|
||||
<!-- Export plugin includes and styles -->
|
||||
<script src="../export.js"></script>
|
||||
<link type="text/css" href="../export.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
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]]",
|
||||
"export": {
|
||||
"enabled": true
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
311
web/js/amcharts/plugins/export/examples/gantt.html
Normal file
311
web/js/amcharts/plugins/export/examples/gantt.html
Normal file
|
|
@ -0,0 +1,311 @@
|
|||
<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" />
|
||||
|
||||
<!-- AmCharts includes -->
|
||||
<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>
|
||||
|
||||
<!-- Export plugin includes and styles -->
|
||||
<script src="../export.js"></script>
|
||||
<link type="text/css" href="../export.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
AmCharts.useUTC = true;
|
||||
var chart = AmCharts.makeChart( "chartdiv", {
|
||||
"type": "gantt",
|
||||
"marginRight": 60,
|
||||
"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
|
||||
},
|
||||
"export": {
|
||||
"enabled": true
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
77
web/js/amcharts/plugins/export/examples/gauge.html
Normal file
77
web/js/amcharts/plugins/export/examples/gauge.html
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<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/gauge.js"></script>
|
||||
|
||||
<!-- Export plugin includes and styles -->
|
||||
<script src="../export.js"></script>
|
||||
<link type="text/css" href="../export.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</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": [ {} ],
|
||||
"export": {
|
||||
"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"></div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
web/js/amcharts/plugins/export/examples/images/bicycle.png
Normal file
BIN
web/js/amcharts/plugins/export/examples/images/bicycle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
web/js/amcharts/plugins/export/examples/images/car.png
Normal file
BIN
web/js/amcharts/plugins/export/examples/images/car.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 759 B |
BIN
web/js/amcharts/plugins/export/examples/images/motorcycle.png
Normal file
BIN
web/js/amcharts/plugins/export/examples/images/motorcycle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,020 B |
63
web/js/amcharts/plugins/export/examples/index.html
Normal file
63
web/js/amcharts/plugins/export/examples/index.html
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<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://code.jquery.com/jquery-1.11.1.min.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
iframe {
|
||||
width: 900px;
|
||||
height: 600px;
|
||||
padding: 0;
|
||||
border: 2px solid #ddd;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
#controls {
|
||||
background: #ccc;
|
||||
opacity: 0.5;
|
||||
padding: 5px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-family: Verdana;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
function setType( type ) {
|
||||
$( '#iframe' ).attr( 'src', type );
|
||||
}
|
||||
|
||||
function reload() {
|
||||
setType( $( '#type' ).val() + "?" + Number( new Date() ) );
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="controls">
|
||||
<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 (w/ ext. legend bottom)</option>
|
||||
<option value="pie4.html"/>Pie #4 Multiple 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="stock.html">Stock</option>
|
||||
<option value="map.html">Map</option>
|
||||
<option value="gantt.html">Gantt</option>
|
||||
<option value="advanced.html">Advanced</option>
|
||||
</select>
|
||||
<input type="button" value="reload" onclick="reload();" />
|
||||
</div>
|
||||
|
||||
<iframe id="iframe" src="pie1.html" frameborder="0"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
209
web/js/amcharts/plugins/export/examples/map.html
Normal file
209
web/js/amcharts/plugins/export/examples/map.html
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
<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/ammap.js"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/maps/js/usaLow.js"></script>
|
||||
|
||||
<!-- Export plugin includes and styles -->
|
||||
<script src="../export.js"></script>
|
||||
<link type="text/css" href="../export.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
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": {
|
||||
"top": 50,
|
||||
"right": 50
|
||||
},
|
||||
"valueLegend": {
|
||||
"right": 10,
|
||||
"minValue": "little",
|
||||
"maxValue": "a lot!"
|
||||
},
|
||||
"export": {
|
||||
"enabled": true
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
72
web/js/amcharts/plugins/export/examples/pie1.html
Normal file
72
web/js/amcharts/plugins/export/examples/pie1.html
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<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" />
|
||||
|
||||
<!-- AmCharts includes -->
|
||||
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
|
||||
|
||||
<!-- Export plugin includes and styles -->
|
||||
<script src="../export.js"></script>
|
||||
<link type="text/css" href="../export.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var chart = 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": {
|
||||
"position": "right",
|
||||
"markerType": "circle"
|
||||
},
|
||||
"export": {
|
||||
"enabled": true
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
97
web/js/amcharts/plugins/export/examples/pie2.html
Normal file
97
web/js/amcharts/plugins/export/examples/pie2.html
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<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" />
|
||||
|
||||
<!-- AmCharts includes -->
|
||||
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
|
||||
|
||||
<!-- Export plugin includes and styles -->
|
||||
<script src="../export.js"></script>
|
||||
<link type="text/css" href="../export.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var chart = 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"
|
||||
},
|
||||
"export": {
|
||||
"enabled": true,
|
||||
"menu": [ {
|
||||
"class": "export-main",
|
||||
"menu": [ {
|
||||
"label": "Download",
|
||||
"menu": [ "PNG", "JPG", "CSV" ]
|
||||
}, {
|
||||
"label": "Annotate",
|
||||
"action": "draw",
|
||||
"menu": [ {
|
||||
"class": "export-drawing",
|
||||
"menu": [ "PNG", "JPG", "CANCEL" ]
|
||||
} ]
|
||||
} ]
|
||||
} ]
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
84
web/js/amcharts/plugins/export/examples/pie3.html
Normal file
84
web/js/amcharts/plugins/export/examples/pie3.html
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<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" />
|
||||
|
||||
<!-- AmCharts includes -->
|
||||
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
|
||||
|
||||
<!-- Export plugin includes and styles -->
|
||||
<script src="../export.js"></script>
|
||||
<link type="text/css" href="../export.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
position: relative;
|
||||
}
|
||||
#legenddiv {
|
||||
width: 100%;
|
||||
height: 19%;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var chart = 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",
|
||||
"divId": "legenddiv"
|
||||
},
|
||||
"export": {
|
||||
"enabled": true,
|
||||
"position": "top-left",
|
||||
"legend": {
|
||||
"position": "bottom"
|
||||
}
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<div id="legenddiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
101
web/js/amcharts/plugins/export/examples/pie4.html
Normal file
101
web/js/amcharts/plugins/export/examples/pie4.html
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<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" />
|
||||
|
||||
<!-- AmCharts includes -->
|
||||
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
|
||||
|
||||
<!-- Export plugin includes and styles -->
|
||||
<script src="../export.js"></script>
|
||||
<link type="text/css" href="../export.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#chartdiv, #chartdiv2 {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var chart = 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%",
|
||||
"labelsEnabled": false,
|
||||
"export": {
|
||||
"enabled": true,
|
||||
"libs": {
|
||||
"path": "../libs/"
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
var chart2 = AmCharts.makeChart( "chartdiv2", {
|
||||
"type": "pie",
|
||||
"pathToImages": "http://www.amcharts.com/lib/3/images/",
|
||||
"dataProvider": [ {
|
||||
"country": "Czech Republic",
|
||||
"litres": 20
|
||||
}, {
|
||||
"country": "Ireland",
|
||||
"litres": 30
|
||||
}, {
|
||||
"country": "Germany",
|
||||
"litres": 15
|
||||
}, {
|
||||
"country": "Australia",
|
||||
"litres": 10
|
||||
} ],
|
||||
"titleField": "country",
|
||||
"valueField": "litres",
|
||||
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
|
||||
"innerRadius": "30%",
|
||||
"labelsEnabled": false,
|
||||
"export": {
|
||||
"enabled": true
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<div id="chartdiv2"></div>
|
||||
</body>
|
||||
</html>
|
||||
92
web/js/amcharts/plugins/export/examples/radar.html
Normal file
92
web/js/amcharts/plugins/export/examples/radar.html
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<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" />
|
||||
|
||||
<!-- AmCharts includes -->
|
||||
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/radar.js"></script>
|
||||
|
||||
<!-- Export plugin includes and styles -->
|
||||
<script src="../export.js"></script>
|
||||
<link type="text/css" href="../export.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var chart = AmCharts.makeChart( "chartdiv", {
|
||||
"type": "radar",
|
||||
"dataProvider": [ {
|
||||
"country": "Czech Republic",
|
||||
"litres": 156.9,
|
||||
"litres2": 182.1
|
||||
}, {
|
||||
"country": "Ireland",
|
||||
"litres": 131.1,
|
||||
"litres2": 129.2
|
||||
}, {
|
||||
"country": "Germany",
|
||||
"litres": 115.8,
|
||||
"litres2": 170.9
|
||||
}, {
|
||||
"country": "Australia",
|
||||
"litres": 109.9,
|
||||
"litres2": 120.1
|
||||
}, {
|
||||
"country": "Austria",
|
||||
"litres": 108.3,
|
||||
"litres2": 93.8
|
||||
}, {
|
||||
"country": "UK",
|
||||
"litres": 99,
|
||||
"litres2": 102
|
||||
} ],
|
||||
"categoryField": "country",
|
||||
"startDuration": 2,
|
||||
"valueAxes": [ {
|
||||
"axisAlpha": 0.15,
|
||||
"minimum": 0,
|
||||
"dashLength": 3,
|
||||
"axisTitleOffset": 20,
|
||||
"gridCount": 5
|
||||
} ],
|
||||
"graphs": [ {
|
||||
"valueField": "litres",
|
||||
"title": "Litres (2014)",
|
||||
"bullet": "round",
|
||||
"lineThickness": 2,
|
||||
"balloonText": "[[value]] litres of beer per year"
|
||||
}, {
|
||||
"valueField": "litres2",
|
||||
"title": "Litres (2015)",
|
||||
"bullet": "round",
|
||||
"lineThickness": 2,
|
||||
"balloonText": "[[value]] litres of beer per year"
|
||||
} ],
|
||||
"legend": {
|
||||
"align": "center"
|
||||
},
|
||||
"export": {
|
||||
"enabled": true
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
213
web/js/amcharts/plugins/export/examples/serial1.html
Normal file
213
web/js/amcharts/plugins/export/examples/serial1.html
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
<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" />
|
||||
|
||||
<!-- AmCharts includes -->
|
||||
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
|
||||
|
||||
<!-- Export plugin includes and styles -->
|
||||
<script src="../export.js"></script>
|
||||
<link type="text/css" href="../export.css" rel="stylesheet">
|
||||
|
||||
<script src="export.config.default.js"></script>
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</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
|
||||
} ];
|
||||
|
||||
var chart = AmCharts.makeChart( "chartdiv", {
|
||||
"type": "serial",
|
||||
"dataProvider": chartData,
|
||||
"rotate": false,
|
||||
"marginTop": 10,
|
||||
"marginRight": 70,
|
||||
"categoryField": "year",
|
||||
"categoryAxis": {
|
||||
"gridAlpha": 0.07,
|
||||
"axisColor": "#DADADA",
|
||||
"startOnAxis": false,
|
||||
"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 maintenance 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"
|
||||
},
|
||||
// this shows how externally included config file can be used
|
||||
"export": AmCharts.exportCFG
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
112
web/js/amcharts/plugins/export/examples/serial2.html
Normal file
112
web/js/amcharts/plugins/export/examples/serial2.html
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
<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" />
|
||||
|
||||
<!-- AmCharts includes -->
|
||||
<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>
|
||||
|
||||
<!-- Export plugin includes and styles -->
|
||||
<script src="../export.js"></script>
|
||||
<link type="text/css" href="../export.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background-color: #282828;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var chart = 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": "bottom",
|
||||
"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",
|
||||
"export": {
|
||||
"enabled": true,
|
||||
"fileName": "exportedChart",
|
||||
|
||||
// set background color for exported image
|
||||
"backgroundColor": "#282828",
|
||||
|
||||
// set column names when exporting as data
|
||||
"exportTitles": true,
|
||||
"columnNames": {
|
||||
"year": "Year",
|
||||
"income": "Income, USD",
|
||||
"expenses": "Expenses, USD"
|
||||
},
|
||||
|
||||
// change the dataProvider when exporting
|
||||
"processData": function (data) {
|
||||
return data.slice(1, -1);
|
||||
}
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
112
web/js/amcharts/plugins/export/examples/serial3.html
Normal file
112
web/js/amcharts/plugins/export/examples/serial3.html
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
<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" />
|
||||
|
||||
<!-- AmCharts includes -->
|
||||
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
|
||||
|
||||
<!-- Export plugin includes and styles -->
|
||||
<script src="../export.js"></script>
|
||||
<link type="text/css" href="../export.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var chartData = [];
|
||||
generateChartData();
|
||||
|
||||
var chart = AmCharts.makeChart( "chartdiv", {
|
||||
"type": "serial",
|
||||
"marginTop": 30,
|
||||
"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,
|
||||
"export": {
|
||||
"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"></div>
|
||||
</body>
|
||||
</html>
|
||||
223
web/js/amcharts/plugins/export/examples/stock.html
Normal file
223
web/js/amcharts/plugins/export/examples/stock.html
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
<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" />
|
||||
|
||||
<!-- AmCharts includes -->
|
||||
<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>
|
||||
|
||||
<!-- Export plugin includes and styles -->
|
||||
<script src="../export.js"></script>
|
||||
<link type="text/css" href="../export.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</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",
|
||||
|
||||
"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"
|
||||
},
|
||||
|
||||
"export": {
|
||||
"enabled": true
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
139
web/js/amcharts/plugins/export/examples/xy.html
Normal file
139
web/js/amcharts/plugins/export/examples/xy.html
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<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" />
|
||||
|
||||
<!-- AmCharts includes -->
|
||||
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
|
||||
<script src="http://www.amcharts.com/lib/3/xy.js"></script>
|
||||
|
||||
<!-- Export plugin includes and styles -->
|
||||
<script src="../export.js"></script>
|
||||
<link type="text/css" href="../export.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var chart = AmCharts.makeChart( "chartdiv", {
|
||||
"type": "xy",
|
||||
"marginTop": 25,
|
||||
"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"
|
||||
},
|
||||
"export": {
|
||||
"enabled": true
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue