| Current Path : /home/emeraadmin/public_html/4d695/ |
| Current File : /home/emeraadmin/public_html/4d695/samples.zip |
PK ���\��m�
pieDonut3D.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/pie.js" type="text/javascript"></script>
<script>
var chart;
var chartData = [
{
"country": "United States",
"visits": 9252
},
{
"country": "China",
"visits": 1882
},
{
"country": "Japan",
"visits": 1809
},
{
"country": "Germany",
"visits": 1322
},
{
"country": "United Kingdom",
"visits": 1122
},
{
"country": "France",
"visits": 1114
},
{
"country": "India",
"visits": 984
},
{
"country": "Spain",
"visits": 711
}
];
AmCharts.ready(function () {
// PIE CHART
chart = new AmCharts.AmPieChart();
// title of the chart
chart.addTitle("Visitors countries", 16);
chart.dataProvider = chartData;
chart.titleField = "country";
chart.valueField = "visits";
chart.sequencedAnimation = true;
chart.startEffect = "elastic";
chart.innerRadius = "30%";
chart.startDuration = 2;
chart.labelRadius = 15;
chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";
// the following two lines makes the chart 3D
chart.depth3D = 10;
chart.angle = 15;
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width:600px; height:400px;"></div>
</body>
</html>PK ���\.'־ � xyBubbleWithZoom.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/xy.js" type="text/javascript"></script>
<script>
var chart;
var chartData = [
{
"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
}
];
AmCharts.ready(function () {
// XY Chart
chart = new AmCharts.AmXYChart();
chart.dataProvider = chartData;
chart.startDuration = 1.5;
// AXES
// X
var xAxis = new AmCharts.ValueAxis();
xAxis.position = "bottom";
xAxis.axisAlpha = 0;
xAxis.minMaxMultiplayer = 1.2;
chart.addValueAxis(xAxis);
// Y
var yAxis = new AmCharts.ValueAxis();
yAxis.position = "left";
yAxis.minMaxMultiplier = 1.2;
yAxis.axisAlpha = 0;
chart.addValueAxis(yAxis);
// GRAPHS
// first graph
var graph = new AmCharts.AmGraph();
graph.valueField = "value";
graph.lineColor = "#b0de09";
graph.xField = "x";
graph.yField = "y";
graph.lineAlpha = 0;
graph.bullet = "bubble";
graph.balloonText = "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>";
chart.addGraph(graph);
// second graph
graph = new AmCharts.AmGraph();
graph.valueField = "value2";
graph.lineColor = "#fcd202";
graph.xField = "x2";
graph.yField = "y2";
graph.lineAlpha = 0;
graph.bullet = "bubble";
graph.balloonText = "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>";
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.valueLineBalloonEnabled = true;
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chartScrollbar.scrollbarHeight = 5;
chartScrollbar.offset = 15
chart.addChartScrollbar(chartScrollbar);
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 600px; height: 400px;"></div>
</body>
</html>PK ���\���� � barAndLineMix.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script>
var chart;
var chartData = [
{
"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
}
];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "year";
chart.startDuration = 1;
chart.rotate = true;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridPosition = "start";
categoryAxis.axisColor = "#DADADA";
categoryAxis.dashLength = 3;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 3;
valueAxis.axisAlpha = 0.2;
valueAxis.position = "top";
valueAxis.title = "Million USD";
valueAxis.minorGridEnabled = true;
valueAxis.minorGridAlpha = 0.08;
valueAxis.gridAlpha = 0.15;
chart.addValueAxis(valueAxis);
// GRAPHS
// column graph
var graph1 = new AmCharts.AmGraph();
graph1.type = "column";
graph1.title = "Income";
graph1.valueField = "income";
graph1.lineAlpha = 0;
graph1.fillColors = "#ADD981";
graph1.fillAlphas = 0.8;
graph1.balloonText = "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>";
chart.addGraph(graph1);
// line graph
var graph2 = new AmCharts.AmGraph();
graph2.type = "line";
graph2.lineColor = "#27c5ff";
graph2.bulletColor = "#FFFFFF";
graph2.bulletBorderColor = "#27c5ff";
graph2.bulletBorderThickness = 2;
graph2.bulletBorderAlpha = 1;
graph2.title = "Expenses";
graph2.valueField = "expenses";
graph2.lineThickness = 2;
graph2.bullet = "round";
graph2.fillAlphas = 0;
graph2.balloonText = "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>";
chart.addGraph(graph2);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.useGraphSettings = true;
chart.addLegend(legend);
chart.creditsPosition = "top-right";
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 500px; height: 600px;"></div>
</body>
</html>PK ���\?��O O pyramidChart3D.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/funnel.js" type="text/javascript"></script>
<script>
var chart;
var data = [
{
"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": 65
},
{
"title": "Contacted for support",
"value": 45
},
{
"title": "Purchased additional products",
"value": 36
}
];
AmCharts.ready(function () {
chart = new AmCharts.AmFunnelChart();
chart.rotate = true;
chart.titleField = "title";
chart.balloon.fixedPosition = true;
chart.marginRight = 210;
chart.marginLeft = 15;
chart.labelPosition = "right";
chart.funnelAlpha = 0.9;
chart.valueField = "value";
chart.startX = -500;
chart.dataProvider = data;
chart.startAlpha = 0;
chart.depth3D = 100;
chart.angle = 30;
chart.outlineAlpha = 1;
chart.outlineThickness = 2;
chart.outlineColor = "#FFFFFF";
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 700px; height: 500px;"></div>
</body>
</html>PK ���\���Ö � columnStacked.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script>
var chart;
var chartData = [
{
"year": "2003",
"europe": 2.5,
"namerica": 2.5,
"asia": 2.1,
"lamerica": 0.3,
"meast": 0.2,
"africa": 0.1
},
{
"year": "2004",
"europe": 2.6,
"namerica": 2.7,
"asia": 2.2,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
},
{
"year": "2005",
"europe": 2.8,
"namerica": 2.9,
"asia": 2.4,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
}
];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "year";
chart.plotAreaBorderAlpha = 0.2;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = "start";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.stackType = "regular";
valueAxis.gridAlpha = 0.1;
valueAxis.axisAlpha = 0;
chart.addValueAxis(valueAxis);
// GRAPHS
// first graph
var graph = new AmCharts.AmGraph();
graph.title = "Europe";
graph.labelText = "[[value]]";
graph.valueField = "europe";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#C72C95";
graph.balloonText = "<span style='color:#555555;'>[[category]]</span><br><span style='font-size:14px'>[[title]]:<b>[[value]]</b></span>";
chart.addGraph(graph);
// second graph
graph = new AmCharts.AmGraph();
graph.title = "North America";
graph.labelText = "[[value]]";
graph.valueField = "namerica";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#D8E0BD";
graph.balloonText = "<span style='color:#555555;'>[[category]]</span><br><span style='font-size:14px'>[[title]]:<b>[[value]]</b></span>";
chart.addGraph(graph);
// third graph
graph = new AmCharts.AmGraph();
graph.title = "Asia-Pacific";
graph.labelText = "[[value]]";
graph.valueField = "asia";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#B3DBD4";
graph.balloonText = "<span style='color:#555555;'>[[category]]</span><br><span style='font-size:14px'>[[title]]:<b>[[value]]</b></span>";
chart.addGraph(graph);
// fourth graph
graph = new AmCharts.AmGraph();
graph.title = "Latin America";
graph.labelText = "[[value]]";
graph.valueField = "lamerica";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#69A55C";
graph.balloonText = "<span style='color:#555555;'>[[category]]</span><br><span style='font-size:14px'>[[title]]:<b>[[value]]</b></span>";
chart.addGraph(graph);
// fifth graph
graph = new AmCharts.AmGraph();
graph.title = "Middle-East";
graph.labelText = "[[value]]";
graph.valueField = "meast";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#B5B8D3";
graph.balloonText = "<span style='color:#555555;'>[[category]]</span><br><span style='font-size:14px'>[[title]]:<b>[[value]]</b></span>";
chart.addGraph(graph);
// sixth graph
graph = new AmCharts.AmGraph();
graph.title = "Africa";
graph.labelText = "[[value]]";
graph.valueField = "africa";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#F4E23B";
graph.balloonText = "<span style='color:#555555;'>[[category]]</span><br><span class='font-size:14px'>[[title]]:<b>[[value]]</b></span>";
chart.addGraph(graph);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.borderAlpha = 0.2;
legend.horizontalGap = 10;
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
// this method sets chart 2D/3D
function setDepth() {
if (document.getElementById("rb1").checked) {
chart.depth3D = 0;
chart.angle = 0;
} else {
chart.depth3D = 25;
chart.angle = 30;
}
chart.validateNow();
}
</script>
</head>
<body>
<div id="chartdiv" style="width: 600px; height: 400px;"></div>
<div style="margin-left:30px;">
<input type="radio" checked="true" name="group" id="rb1" onclick="setDepth()">2D
<input type="radio" name="group" id="rb2" onclick="setDepth()">3D
</div>
</body>
</html>PK ���\rJ�=�
�
xyError.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/xy.js" type="text/javascript"></script>
<script>
var chart;
var chartData = [{
"x": 10,
"y": 14,
"errorX": 3,
"errorY": 4
}, {
"x": 5,
"y": 3,
"errorX": 1.52,
"errorY": 6.8
}, {
"x": -10,
"y": 3,
"errorX": 0.8,
"errorY": 3.5
}, {
"x": -6,
"y": 5,
"errorX": 1.2,
"errorY": 4.2
}, {
"x": 11,
"y": -4,
"errorX": 2.4,
"errorY": 3.9
}, {
"x": 13,
"y": 1,
"errorX": 1.5,
"errorY": 3.3
}, {
"x": 1,
"y": 6,
"errorX": 2,
"errorY": 3.3
}];
AmCharts.ready(function() {
// XY Chart
chart = new AmCharts.AmXYChart();
chart.dataProvider = chartData;
// AXES
// X
var xAxis = new AmCharts.ValueAxis();
xAxis.title = "X Axis";
xAxis.position = "bottom";
xAxis.autoGridCount = true;
chart.addValueAxis(xAxis);
// Y
var yAxis = new AmCharts.ValueAxis();
yAxis.title = "Y Axis";
yAxis.position = "left";
yAxis.autoGridCount = true;
yAxis.minMaxMultiplier = 1.2;
chart.addValueAxis(yAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.errorField = "errorX"; // valueField responsible for the size of a bullet
graph.xField = "x";
graph.yField = "y";
graph.lineAlpha = 0;
graph.bulletAxis = xAxis;
graph.bullet = "xError";
graph.balloonText = "x:<b>[[x]]</b> y:<b>[[y]]</b><br>x error:<b>[[errorX]]</b><br>y error:<b>[[errorY]]</b>";
chart.addGraph(graph);
// GRAPH
graph = new AmCharts.AmGraph();
graph.errorField = "errorY"; // valueField responsible for the size of a bullet
graph.xField = "x";
graph.yField = "y";
graph.lineAlpha = 0;
graph.bulletAxis = yAxis;
graph.bullet = "yError";
graph.balloonText = "x:<b>[[x]]</b> y:<b>[[y]]</b><br>x error:<b>[[errorX]]</b><br>y error:<b>[[errorY]]</b>";
chart.addGraph(graph);
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 600px; height: 400px;"></div>
</body>
</html>PK ���\ ��)� � lineWithMultipleValueAxes.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script>
var chart;
var chartData = [];
AmCharts.ready(function () {
// generate some random data first
generateChartData();
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "date";
// listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
chart.addListener("dataUpdated", zoomChart);
chart.synchronizeGrid = true; // this makes all axes grid to be at the same intervals
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
categoryAxis.minorGridEnabled = true;
categoryAxis.axisColor = "#DADADA";
categoryAxis.twoLineMode = true;
categoryAxis.dateFormats = [{
period: 'fff',
format: 'JJ:NN:SS'
}, {
period: 'ss',
format: 'JJ:NN:SS'
}, {
period: 'mm',
format: 'JJ:NN'
}, {
period: 'hh',
format: 'JJ:NN'
}, {
period: 'DD',
format: 'DD'
}, {
period: 'WW',
format: 'DD'
}, {
period: 'MM',
format: 'MMM'
}, {
period: 'YYYY',
format: 'YYYY'
}];
// first value axis (on the left)
var valueAxis1 = new AmCharts.ValueAxis();
valueAxis1.axisColor = "#FF6600";
valueAxis1.axisThickness = 2;
chart.addValueAxis(valueAxis1);
// second value axis (on the right)
var valueAxis2 = new AmCharts.ValueAxis();
valueAxis2.position = "right"; // this line makes the axis to appear on the right
valueAxis2.axisColor = "#FCD202";
valueAxis2.gridAlpha = 0;
valueAxis2.axisThickness = 2;
chart.addValueAxis(valueAxis2);
// third value axis (on the left, detached)
var valueAxis3 = new AmCharts.ValueAxis();
valueAxis3.offset = 50; // this line makes the axis to appear detached from plot area
valueAxis3.gridAlpha = 0;
valueAxis3.axisColor = "#B0DE09";
valueAxis3.axisThickness = 2;
chart.addValueAxis(valueAxis3);
// GRAPHS
// first graph
var graph1 = new AmCharts.AmGraph();
graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph1.title = "red line";
graph1.valueField = "visits";
graph1.bullet = "round";
graph1.hideBulletsCount = 30;
graph1.bulletBorderThickness = 1;
chart.addGraph(graph1);
// second graph
var graph2 = new AmCharts.AmGraph();
graph2.valueAxis = valueAxis2; // we have to indicate which value axis should be used
graph2.title = "yellow line";
graph2.valueField = "hits";
graph2.bullet = "square";
graph2.hideBulletsCount = 30;
graph2.bulletBorderThickness = 1;
chart.addGraph(graph2);
// third graph
var graph3 = new AmCharts.AmGraph();
graph3.valueAxis = valueAxis3; // we have to indicate which value axis should be used
graph3.valueField = "views";
graph3.title = "green line";
graph3.bullet = "triangleUp";
graph3.hideBulletsCount = 30;
graph3.bulletBorderThickness = 1;
chart.addGraph(graph3);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0.1;
chartCursor.fullWidth = true;
chartCursor.valueLineBalloonEnabled = true;
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.marginLeft = 110;
legend.useGraphSettings = true;
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
// generate some random data, quite different range
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 50);
for (var i = 0; i < 50; 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) + 100;
var hits = Math.round(Math.random() * 80) + 500;
var views = Math.round(Math.random() * 6000);
chartData.push({
date: newDate,
visits: visits,
hits: hits,
views: views
});
}
}
// 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(10, 20);
}
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
</body>
</html>PK ���\xpHVo o xyDateBased.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/xy.js" type="text/javascript"></script>
<script>
var chart;
var chartData = [
{
"date": "2015-01-01",
"ay": 0.5,
"by": 2.2
},
{
"date": "2015-01-02",
"ay": 1.3,
"by": 4.9
},
{
"date": "2015-01-03",
"ay": 2.3,
"by": 5.1
},
{
"date": "2015-01-04",
"ay": 2.8,
"by": 5.3
},
{
"date": "2015-01-05",
"ay": 3.5,
"by": 6.1
},
{
"date": "2015-01-06",
"ay": 5.1,
"by": 8.3
},
{
"date": "2015-01-07",
"ay": 6.7,
"by": 10.5
},
{
"date": "2015-01-08",
"ay": 8,
"by": 12.3
},
{
"date": "2015-01-09",
"ay": 8.9,
"by": 14.5
},
{
"date": "2015-01-10",
"ay": 9.7,
"by": 15
},
{
"date": "2015-01-11",
"ay": 10.4,
"by": 18.8
},
{
"date": "2015-01-12",
"ay": 11.7,
"by": 19
}
];
AmCharts.ready(function () {
// XY CHART
chart = new AmCharts.AmXYChart();
chart.dataDateFormat = "YYYY-MM-DD";
chart.dataProvider = chartData;
chart.startDuration = 1;
// AXES
// X
var xAxis = new AmCharts.ValueAxis();
xAxis.title = "X Axis";
xAxis.position = "bottom";
xAxis.dashLength = 1;
xAxis.axisAlpha = 0;
xAxis.type = "date";
xAxis.autoGridCount = true;
chart.addValueAxis(xAxis);
// Y
var yAxis = new AmCharts.ValueAxis();
yAxis.position = "left";
yAxis.title = "Y Axis";
yAxis.dashLength = 1;
yAxis.axisAlpha = 0;
yAxis.autoGridCount = true;
chart.addValueAxis(yAxis);
// GRAPHS
// triangles up
var graph1 = new AmCharts.AmGraph();
graph1.lineColor = "#FF6600";
graph1.balloonText = "x:[[x]] y:[[y]]";
graph1.xField = "date";
graph1.yField = "ay";
graph1.lineAlpha = 1;
graph1.type = "smoothedLine";
graph1.bullet = "triangleUp";
chart.addGraph(graph1);
// triangles down
var graph2 = new AmCharts.AmGraph();
graph2.lineColor = "#FCD202";
graph2.balloonText = "x:[[x]] y:[[y]]";
graph2.xField = "date";
graph2.yField = "by";
graph2.lineAlpha = 1;
graph2.type = "smoothedLine";
graph2.bullet = "triangleDown";
chart.addGraph(graph2);
// first trend line
var trendLine = new AmCharts.TrendLine();
trendLine.lineColor = "#FF6600";
trendLine.initialXValue = 1;
trendLine.initialValue = 2;
trendLine.finalXValue = 12;
trendLine.finalValue = 11;
chart.addTrendLine(trendLine);
// second trend line
trendLine = new AmCharts.TrendLine();
trendLine.lineColor = "#FCD202";
trendLine.initialXValue = 1;
trendLine.initialValue = 1;
trendLine.finalXValue = 12;
trendLine.finalValue = 19;
chart.addTrendLine(trendLine);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 600px; height: 400px;"></div>
</body>
</html>PK ���\~&��~ ~ pyramidChart.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/funnel.js" type="text/javascript"></script>
<script>
var chart;
var data = [
{
"title": "Website visits",
"value": 300
},
{
"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": 15
},
{
"title": "Purchased additional products",
"value": 8
}
];
AmCharts.ready(function () {
chart = new AmCharts.AmFunnelChart();
chart.rotate = true;
chart.titleField = "title";
chart.balloon.fixedPosition = true;
chart.marginRight = 210;
chart.marginLeft = 15;
chart.labelPosition = "right";
chart.funnelAlpha = 0.9;
chart.valueField = "value";
chart.startX = -500;
chart.dataProvider = data;
chart.startAlpha = 0;
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 500px; height: 300px;"></div>
</body>
</html>PK ���\F:�W ! _JSON_usingDifferentLanguage.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script src="../amcharts/lang/de.js" type="text/javascript"></script>
<script>
var chartData = [];
generateChartData();
var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
// setting language to German
language: "de",
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",
hideBulletsCount:30,
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"
}
});
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);
}
// changes cursor mode from pan to select
function setPanSelect() {
var chartCursor = chart.chartCursor;
if (document.getElementById("rb1").checked) {
chartCursor.pan = false;
chartCursor.zoomable = true;
} else {
chartCursor.pan = true;
}
chart.validateNow();
}
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
<div style="margin-left:35px;">
<input type="radio" checked="true" name="group" id="rb1" onclick="setPanSelect()">Select
<input type="radio" name="group" id="rb2" onclick="setPanSelect()">Pan
</div>
</body>
</html>PK ���\|�ȁ pieSimple.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/pie.js" type="text/javascript"></script>
<script>
var chart;
var legend;
var chartData = [{
country: "Czech Republic",
litres: 301.90
}, {
country: "Ireland",
litres: 201.10
}, {
country: "Germany",
litres: 165.80
}, {
country: "Australia",
litres: 139.90
}, {
country: "Austria",
litres: 128.30
}, {
country: "UK",
litres: 99.00
}, {
country: "Belgium",
litres: 60.00
}];
AmCharts.ready(function () {
// PIE CHART
chart = new AmCharts.AmPieChart();
chart.dataProvider = chartData;
chart.titleField = "country";
chart.valueField = "litres";
chart.outlineColor = "#FFFFFF";
chart.outlineAlpha = 0.8;
chart.outlineThickness = 2;
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
</body>
</html>PK ���\� d�� � lineWithDurationOnValueAxis.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script>
var chartData = [
{
"date": "2012-01-01",
"distance": 227,
"duration": 408
},
{
"date": "2012-01-02",
"distance": 371,
"duration": 482
},
{
"date": "2012-01-03",
"distance": 433,
"duration": 562
},
{
"date": "2012-01-04",
"distance": 345,
"duration": 379
},
{
"date": "2012-01-05",
"distance": 480,
"duration": 501
},
{
"date": "2012-01-06",
"distance": 386,
"duration": 443
},
{
"date": "2012-01-07",
"distance": 348,
"duration": 405
},
{
"date": "2012-01-08",
"distance": 238,
"duration": 309
},
{
"date": "2012-01-09",
"distance": 218,
"duration": 287
},
{
"date": "2012-01-10",
"distance": 349,
"duration": 485
},
{
"date": "2012-01-11",
"distance": 603,
"duration": 890
},
{
"date": "2012-01-12",
"distance": 534,
"duration": 810
}
];
var chart;
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "date";
chart.dataDateFormat = "YYYY-MM-DD";
chart.marginTop = 0;
// AXES
// category axis
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
categoryAxis.autoGridCount = false;
categoryAxis.gridCount = 50;
categoryAxis.gridAlpha = 0;
categoryAxis.gridColor = "#000000";
categoryAxis.axisColor = "#555555";
// we want custom date formatting, so we change it in next line
categoryAxis.dateFormats = [{
period: 'DD',
format: 'DD'
}, {
period: 'WW',
format: 'MMM DD'
}, {
period: 'MM',
format: 'MMM'
}, {
period: 'YYYY',
format: 'YYYY'
}];
// as we have data of different units, we create two different value axes
// Duration value axis
var durationAxis = new AmCharts.ValueAxis();
durationAxis.title = "duration";
durationAxis.gridAlpha = 0.05;
durationAxis.axisAlpha = 0;
durationAxis.tickLength = 0;
durationAxis.inside = true;
// the following line makes this value axis to convert values to duration
// it tells the axis what duration unit it should use. mm - minute, hh - hour...
durationAxis.duration = "mm";
durationAxis.durationUnits = {
DD: "d. ",
hh: "h ",
mm: "min",
ss: ""
};
chart.addValueAxis(durationAxis);
// Distance value axis
var distanceAxis = new AmCharts.ValueAxis();
distanceAxis.title = "distance";
distanceAxis.gridAlpha = 0;
distanceAxis.position = "right";
distanceAxis.inside = true;
distanceAxis.unit = "mi";
distanceAxis.axisAlpha = 0;
distanceAxis.tickLength = 0;
chart.addValueAxis(distanceAxis);
// GRAPHS
// duration graph
var durationGraph = new AmCharts.AmGraph();
durationGraph.title = "duration";
durationGraph.valueField = "duration";
durationGraph.type = "line";
durationGraph.valueAxis = durationAxis; // indicate which axis should be used
durationGraph.lineColor = "#CC0000";
durationGraph.balloonText = "[[value]]";
durationGraph.lineThickness = 1;
durationGraph.legendValueText = "[[value]]";
durationGraph.bullet = "square";
durationGraph.bulletBorderColor = "#CC0000";
durationGraph.bulletBorderAlpha = 1;
durationGraph.bulletBorderThickness = 1;
chart.addGraph(durationGraph);
// distance graph
var distanceGraph = new AmCharts.AmGraph();
distanceGraph.valueField = "distance";
distanceGraph.title = "distance";
distanceGraph.type = "column";
distanceGraph.fillAlphas = 0.1;
distanceGraph.valueAxis = distanceAxis; // indicate which axis should be used
distanceGraph.balloonText = "[[value]] miles";
distanceGraph.legendValueText = "[[value]] mi";
distanceGraph.legendPeriodValueText = "total: [[value.sum]] mi";
distanceGraph.lineColor = "#000000";
distanceGraph.lineAlpha = 0;
chart.addGraph(distanceGraph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.zoomable = false;
chartCursor.categoryBalloonDateFormat = "DD";
chartCursor.cursorAlpha = 0;
chartCursor.valueLineEnabled = true;
chartCursor.valueLineBalloonEnabled = true;
chartCursor.valueLineAxis = distanceAxis;
chart.addChartCursor(chartCursor);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.bulletType = "round";
legend.equalWidths = false;
legend.valueWidth = 120;
legend.color = "#000000";
legend.useGraphSettings = true;
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width:100%; height:400px;"></div>
</body>
</html>PK ���\ԏIr r barWithBackgroundImage.htmlnu �[��� <!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 examples</title>
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script>
var chart;
var chartData = [
{
"country": "Czech Republic",
"litres": 156.9,
"short": "CZ"
},
{
"country": "Ireland",
"litres": 131.1,
"short": "IR"
},
{
"country": "Germany",
"litres": 115.8,
"short": "DE"
},
{
"country": "Australia",
"litres": 109.9,
"short": "AU"
},
{
"country": "Austria",
"litres": 108.3,
"short": "AT"
},
{
"country": "UK",
"litres": 99,
"short": "UK"
},
{
"country": "Belgium",
"litres": 93,
"short": "BE"
}
];
AmCharts.ready(function () {
// SERIAL CHART
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";
chart.rotate = true;
chart.color = "#FFFFFF";
chart.handDrawn = true;
chart.handDrawScatter = 4;
// this line makes the chart to show image in the background
chart.backgroundImage = "images/bg.jpg";
// sometimes we need to set margins manually
// autoMargins should be set to false in order chart to use custom margin values
chart.autoMargins = false;
chart.marginTop = 100;
chart.marginLeft = 50;
chart.marginRight = 30;
chart.startDuration = 2;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.labelsEnabled = false;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.gridAlpha = 0;
valueAxis.axisAlpha = 0;
valueAxis.labelsEnabled = false;
valueAxis.minimum = 0;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.balloonText = "[[category]]: [[value]]";
graph.valueField = "litres";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 0.5;
// you can pass any number of colors in array to create more fancy gradients
graph.fillColors = ["#000000", "#FF6600"];
graph.gradientOrientation = "horizontal";
graph.labelPosition = "inside";
graph.labelText = "[[category]]: [[value]] Litres";
graph.balloonText = "[[category]]: [[value]] Litres";
chart.addGraph(graph);
// LABEL
chart.addLabel(50, 40, "Beer Consumption by country", "left", 15, "#000000", 0, 1, true);
chart.creditsPosition = "bottom-right";
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 520px; height: 400px;"></div>
</body>
</html>PK ���\MJ\� � _JSON_areaStacked.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script>
// this chart is exactly the same as in areaStacked.html, only made using JSON except JavaScript API
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,
marginTop: 10,
categoryField: "year",
categoryAxis: {
gridAlpha: 0.07,
axisColor: "#DADADA",
startOnAxis: true,
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: [{
type: "line",
title: "Cars",
hidden: true,
valueField: "cars",
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>"
}, {
type: "line",
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>"
}, {
type: "line",
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"
}
});
</script>
</head>
<body>
<div id="chartdiv" style="width:100%; height:400px;"></div>
</body>
</html>PK ���\�5�c
c
pieWithPatterns.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/pie.js" type="text/javascript"></script>
<script>
var chart;
var chartData = [{
"country": "Czech Republic",
"litres": 301.9,
"pattern": {
"url": "patterns/black/pattern1.png",
"width": 4,
"height": 4,
"color": "#cc0000"
}
}, {
"country": "Ireland",
"litres": 201.1,
"pattern": {
"url": "patterns/black/pattern2.png",
"width": 4,
"height": 4
}
}, {
"country": "Germany",
"litres": 165.8,
"pattern": {
"url": "patterns/black/pattern3.png",
"width": 4,
"height": 4
}
}, {
"country": "Australia",
"litres": 139.9,
"pattern": {
"url": "patterns/black/pattern4.png",
"width": 4,
"height": 4
}
}, {
"country": "Austria",
"litres": 128.3,
"pattern": {
"url": "patterns/black/pattern5.png",
"width": 4,
"height": 4
}
}, {
"country": "UK",
"litres": 99,
"pattern": {
"url": "patterns/black/pattern6.png",
"width": 4,
"height": 4
}
}, {
"country": "Belgium",
"litres": 60,
"pattern": {
"url": "patterns/black/pattern7.png",
"width": 4,
"height": 4
}
}];
AmCharts.ready(function() {
// PIE CHART
chart = new AmCharts.AmPieChart();
chart.dataProvider = chartData;
chart.titleField = "country";
chart.valueField = "litres";
chart.patternField = "pattern";
chart.outlineColor = "#000000";
chart.outlineAlpha = 0.6;
chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";
var legend = new AmCharts.AmLegend();
legend.markerBorderColor = "#000000";
legend.switchType = undefined;
legend.align = "center";
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
</body>
</html>PK ���\��)* * columnWithImages.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script>
// note, each data item has "bullet" field.
var columnChartData = [
{
"name": "John",
"points": 35654,
"color": "#7F8DA9",
"bullet": "images/0.gif"
},
{
"name": "Damon",
"points": 65456,
"color": "#FEC514",
"bullet": "images/1.gif"
},
{
"name": "Patrick",
"points": 45724,
"color": "#DB4C3C",
"bullet": "images/2.gif"
},
{
"name": "Mark",
"points": 13654,
"color": "#DAF0FD",
"bullet": "images/3.gif"
}
];
AmCharts.ready(function () {
// SERIAL CHART
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = columnChartData;
chart.categoryField = "name";
chart.startDuration = 1;
// sometimes we need to set margins manually
// autoMargins should be set to false in order chart to use custom margin values
chart.autoMargins = false;
chart.marginRight = 0;
chart.marginLeft = 0;
chart.marginBottom = 0;
chart.marginTop = 0;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.inside = true;
categoryAxis.axisAlpha = 0;
categoryAxis.gridAlpha = 0;
categoryAxis.tickLength = 0;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.minimum = 0;
valueAxis.axisAlpha = 0;
valueAxis.maximum = 80000;
valueAxis.dashLength = 4;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.valueField = "points";
graph.customBulletField = "bullet"; // field of the bullet in data provider
graph.bulletOffset = 16; // distance from the top of the column to the bullet
graph.colorField = "color";
graph.bulletSize = 34; // bullet image should be rectangle (width = height)
graph.type = "column";
graph.fillAlphas = 0.8;
graph.cornerRadiusTop = 8;
graph.lineAlpha = 0;
graph.balloonText = "<span style='font-size:13px;'>[[category]]: <b>[[value]]</b></span>";
chart.addGraph(graph);
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 520px; height: 400px;"></div>
</body>
</html>PK ���\��G$ $ barClustered.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script>
var chart;
var chartData = [
{
"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
}
];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "year";
chart.startDuration = 1;
chart.plotAreaBorderColor = "#DADADA";
chart.plotAreaBorderAlpha = 1;
// this single line makes the chart a bar chart
chart.rotate = true;
// AXES
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridPosition = "start";
categoryAxis.gridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
// Value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
valueAxis.gridAlpha = 0.1;
valueAxis.position = "top";
chart.addValueAxis(valueAxis);
// GRAPHS
// first graph
var graph1 = new AmCharts.AmGraph();
graph1.type = "column";
graph1.title = "Income";
graph1.valueField = "income";
graph1.balloonText = "Income:[[value]]";
graph1.lineAlpha = 0;
graph1.fillColors = "#ADD981";
graph1.fillAlphas = 1;
chart.addGraph(graph1);
// second graph
var graph2 = new AmCharts.AmGraph();
graph2.type = "column";
graph2.title = "Expenses";
graph2.valueField = "expenses";
graph2.balloonText = "Expenses:[[value]]";
graph2.lineAlpha = 0;
graph2.fillColors = "#81acd9";
graph2.fillAlphas = 1;
chart.addGraph(graph2);
// LEGEND
var legend = new AmCharts.AmLegend();
chart.addLegend(legend);
chart.creditsPosition = "top-right";
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width:50%; height:600px;"></div>
</body>
</html>PK ���\rts s column100PercentStacked.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script>
var chart;
var chartData = [
{
"year": "2003",
"europe": 2.5,
"namerica": 2.5,
"asia": 2.1,
"lamerica": 0.3,
"meast": 0.2,
"africa": 0.1
},
{
"year": "2004",
"europe": 2.6,
"namerica": 2.7,
"asia": 2.2,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
},
{
"year": "2005",
"europe": 2.8,
"namerica": 2.9,
"asia": 2.4,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
}
];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "year";
// sometimes we need to set margins manually
// autoMargins should be set to false in order chart to use custom margin values
chart.autoMargins = false;
chart.marginLeft = 0;
chart.marginRight = 0;
chart.marginTop = 30;
chart.marginBottom = 40;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = "start";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.stackType = "100%"; // this line makes the chart 100% stacked
valueAxis.gridAlpha = 0;
valueAxis.axisAlpha = 0;
valueAxis.labelsEnabled = false;
chart.addValueAxis(valueAxis);
// GRAPHS
// first graph
var graph = new AmCharts.AmGraph();
graph.title = "Europe";
graph.labelText = "[[percents]]%";
graph.balloonText = "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>";
graph.valueField = "europe";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#C72C95";
chart.addGraph(graph);
// second graph
graph = new AmCharts.AmGraph();
graph.title = "North America";
graph.labelText = "[[percents]]%";
graph.balloonText = "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>";
graph.valueField = "namerica";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#D8E0BD";
chart.addGraph(graph);
// third graph
graph = new AmCharts.AmGraph();
graph.title = "Asia-Pacific";
graph.labelText = "[[percents]]%";
graph.balloonText = "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>";
graph.valueField = "asia";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#B3DBD4";
chart.addGraph(graph);
// fourth graph
graph = new AmCharts.AmGraph();
graph.title = "Latin America";
graph.labelText = "[[percents]]%";
graph.balloonText = "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>";
graph.valueField = "lamerica";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#69A55C";
chart.addGraph(graph);
// fifth graph
graph = new AmCharts.AmGraph();
graph.title = "Middle-East";
graph.labelText = "[[percents]]%";
graph.balloonText = "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>";
graph.valueField = "meast";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#B5B8D3";
chart.addGraph(graph);
// sixth graph
graph = new AmCharts.AmGraph();
graph.title = "Africa";
graph.labelText = "[[percents]]%";
graph.balloonText = "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>";
graph.valueField = "africa";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#F4E23B";
chart.addGraph(graph);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.borderAlpha = 0.2;
legend.horizontalGap = 10;
legend.autoMargins = false;
legend.marginLeft = 20;
legend.marginRight = 20;
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
// this method makes chart 2D/3D
function setDepth() {
if (document.getElementById("rb1").checked) {
chart.depth3D = 0;
chart.angle = 0;
} else {
chart.depth3D = 25;
chart.angle = 30;
}
chart.validateNow();
}
</script>
</head>
<body>
<div id="chartdiv" style="width: 600px; height: 400px;"></div>
<div id="chartdiv" style="margin-left:15px; margin-top:10px;">
<input type="radio" checked="true" name="group" id="rb1" onclick="setDepth()">2D
<input type="radio" name="group" id="rb2" onclick="setDepth()">3D</div>
</body>
</html>PK ���\L����
�
barFloating.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script>
var chart;
var chartData = [
{
"name": "John",
"startTime": 8,
"endTime": 11,
"color": "#FF0F00"
},
{
"name": "Joe",
"startTime": 10,
"endTime": 13,
"color": "#FF9E01"
},
{
"name": "Susan",
"startTime": 11,
"endTime": 18,
"color": "#F8FF01"
},
{
"name": "Eaton",
"startTime": 15,
"endTime": 19,
"color": "#04D215"
}
];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "name";
chart.rotate = true;
chart.columnWidth = 0.9;
chart.startDuration = 1;
// AXES
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = "start";
// Value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.gridAlpha = 0.1;
valueAxis.axisAlpha = 0;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.valueField = "endTime";
graph.openField = "startTime";
graph.type = "column";
graph.lineAlpha = 0;
graph.colorField = "color";
graph.fillAlphas = 0.8;
chart.addGraph(graph);
chart.creditsPosition = "top-right";
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
</body>
</html>PK ���\ݪV V areaWithTimeBasedData.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script>
var chart;
var chartData = [];
AmCharts.ready(function () {
// first we generate some random data
generateChartData();
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "date";
// data updated event will be fired when chart is first displayed,
// also when data will be updated. We'll use it to set some
// initial zoom
chart.addListener("dataUpdated", zoomChart);
// AXES
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // in order char to understand dates, we should set parseDates to true
categoryAxis.minPeriod = "mm"; // as we have data with minute interval, we have to set "mm" here.
categoryAxis.gridAlpha = 0.07;
categoryAxis.axisColor = "#DADADA";
// Value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.gridAlpha = 0.07;
valueAxis.title = "Unique visitors";
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.type = "line"; // try to change it to "column"
graph.title = "red line";
graph.valueField = "visits";
graph.lineAlpha = 1;
graph.lineColor = "#d1cf2a";
graph.fillAlphas = 0.3; // setting fillAlphas to > 0 value makes it area graph
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chartCursor.categoryBalloonDateFormat = "JJ:NN, DD MMMM";
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// WRITE
chart.write("chartdiv");
});
// generate some random data, quite different range
function generateChartData() {
// current date
var firstDate = new Date();
// now set 1000 minutes back
firstDate.setMinutes(firstDate.getDate() - 1000);
// and generate 1000 data items
for (var i = 0; i < 1000; i++) {
var newDate = new Date(firstDate);
// each time we add one minute
newDate.setMinutes(newDate.getMinutes() + i);
// some random number
var visits = Math.round(Math.random() * 40) + 10;
// add data item to the array
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:400px;"></div>
</body>
</html>PK ���\>�Lc� � fillBetweenTwoLines.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script>
// since v3, chart can accept data in JSON format
// if your category axis parses dates, you should only
// set date format of your data (dataDateFormat property of AmSerialChart)
var chartData = [
{
"date": "2009-10-02",
"value": 5
},
{
"date": "2009-10-03",
"value": 15
},
{
"date": "2009-10-04",
"value": 13
},
{
"date": "2009-10-05",
"value": 17
},
{
"date": "2009-10-06",
"value": 15
},
{
"date": "2009-10-09",
"value": 19
},
{
"date": "2009-10-10",
"value": 21
},
{
"date": "2009-10-11",
"value": 20
},
{
"date": "2009-10-12",
"value": 20
},
{
"date": "2009-10-13",
"value": 19
},
{
"date": "2009-10-16",
"value": 25
},
{
"date": "2009-10-17",
"value": 24
},
{
"date": "2009-10-18",
"value": 26
},
{
"date": "2009-10-19",
"value": 27
},
{
"date": "2009-10-20",
"value": 25
},
{
"date": "2009-10-23",
"value": 29
},
{
"date": "2009-10-24",
"value": 28
},
{
"date": "2009-10-25",
"value": 30
},
{
"date": "2009-10-26",
"value": 72
},
{
"date": "2009-10-27",
"value": 43
},
{
"date": "2009-10-30",
"value": 31
},
{
"date": "2009-11-01",
"value": 30
},
{
"date": "2009-11-02",
"value": 29
},
{
"date": "2009-11-03",
"value": 27
},
{
"date": "2009-11-04",
"value": 26
}
];
createFromToFields();
// create from/to field values programatically
function createFromToFields(){
for(var i = 0; i < chartData.length; i++){
var value = chartData[i].value;
chartData[i].fromValue = value - value * 0.2;
chartData[i].toValue = value + value * 0.2;
}
}
AmCharts.ready(function () {
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "date";
chart.dataDateFormat = "YYYY-MM-DD";
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
categoryAxis.gridAlpha = 0;
categoryAxis.tickLength = 0;
categoryAxis.axisAlpha = 0;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 4;
valueAxis.axisAlpha = 0;
chart.addValueAxis(valueAxis);
// FROM GRAPH
var fromGraph = new AmCharts.AmGraph();
fromGraph.type = "line";
fromGraph.valueField = "fromValue";
fromGraph.lineAlpha = 0;
fromGraph.showBalloon = false;
chart.addGraph(fromGraph);
// TO GRAPH
var toGraph = new AmCharts.AmGraph();
toGraph.type = "line";
toGraph.valueField = "toValue";
toGraph.lineAlpha = 0;
toGraph.fillAlphas = 0.2;
toGraph.fillToGraph = fromGraph;
toGraph.showBalloon = false;
chart.addGraph(toGraph);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.type = "line";
graph.valueField = "value";
graph.lineColor = "#000000";
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);
chart.creditsPosition = "top-right";
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width:100%; height:400px;"></div>
</body>
</html>PK ���\V�˳O1 O1 ! lineWithDifferentBulletSizes.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script>
// note, we have townName field with a name specified for each datapoint and townName2 with only some of the names specified.
// we use townName2 to display town names next to the bullet. And as these names would overlap if displayed next to each bullet,
// we created this townName2 field and set only some of the names for this purpse.
var chartData = [
{
"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"
}
];
var chart;
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "date";
chart.dataDateFormat = "YYYY-MM-DD";
chart.color = "#FFFFFF";
chart.marginLeft = 0;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
categoryAxis.autoGridCount = false;
categoryAxis.gridCount = 50;
categoryAxis.gridAlpha = 0.1;
categoryAxis.gridColor = "#FFFFFF";
categoryAxis.axisColor = "#555555";
// we want custom date formatting, so we change it in next line
categoryAxis.dateFormats = [{
period: 'DD',
format: 'DD'
}, {
period: 'WW',
format: 'MMM DD'
}, {
period: 'MM',
format: 'MMM'
}, {
period: 'YYYY',
format: 'YYYY'
}];
// as we have data of different units, we create three different value axes
// Distance value axis
var distanceAxis = new AmCharts.ValueAxis();
distanceAxis.title = "distance";
distanceAxis.gridAlpha = 0;
distanceAxis.axisAlpha = 0;
chart.addValueAxis(distanceAxis);
// latitude value axis
var latitudeAxis = new AmCharts.ValueAxis();
latitudeAxis.gridAlpha = 0;
latitudeAxis.axisAlpha = 0;
latitudeAxis.labelsEnabled = false;
latitudeAxis.position = "right";
chart.addValueAxis(latitudeAxis);
// duration value axis
var durationAxis = new AmCharts.ValueAxis();
durationAxis.title = "duration";
// the following line makes this value axis to convert values to duration
// it tells the axis what duration unit it should use. mm - minute, hh - hour...
durationAxis.duration = "mm";
durationAxis.durationUnits = {
DD: "d. ",
hh: "h ",
mm: "min",
ss: ""
};
durationAxis.gridAlpha = 0;
durationAxis.axisAlpha = 0;
durationAxis.inside = true;
durationAxis.position = "right";
chart.addValueAxis(durationAxis);
// GRAPHS
// distance graph
var distanceGraph = new AmCharts.AmGraph();
distanceGraph.valueField = "distance";
distanceGraph.title = "distance";
distanceGraph.type = "column";
distanceGraph.fillAlphas = 0.9;
distanceGraph.valueAxis = distanceAxis; // indicate which axis should be used
distanceGraph.balloonText = "[[value]] miles";
distanceGraph.legendValueText = "[[value]] mi";
distanceGraph.legendPeriodValueText = "total: [[value.sum]] mi";
distanceGraph.lineColor = "#263138";
distanceGraph.dashLengthField = "dashLength";
distanceGraph.alphaField = "alpha";
chart.addGraph(distanceGraph);
// latitude graph
var latitudeGraph = new AmCharts.AmGraph();
latitudeGraph.valueField = "latitude";
latitudeGraph.title = "latitude/city";
latitudeGraph.type = "line";
latitudeGraph.valueAxis = latitudeAxis; // indicate which axis should be used
latitudeGraph.lineColor = "#786c56";
latitudeGraph.lineThickness = 1;
latitudeGraph.legendValueText = "[[description]]/[[value]]";
latitudeGraph.descriptionField = "townName";
latitudeGraph.bullet = "round";
latitudeGraph.bulletSizeField = "townSize"; // indicate which field should be used for bullet size
latitudeGraph.bulletBorderColor = "#786c56";
latitudeGraph.bulletBorderAlpha = 1;
latitudeGraph.bulletBorderThickness = 2;
latitudeGraph.bulletColor = "#000000";
latitudeGraph.labelText = "[[townName2]]"; // not all data points has townName2 specified, that's why labels are displayed only near some of the bullets.
latitudeGraph.labelPosition = "right";
latitudeGraph.balloonText = "latitude:[[value]]";
latitudeGraph.showBalloon = true;
latitudeGraph.dashLengthField = "dashLength";
chart.addGraph(latitudeGraph);
// duration graph
var durationGraph = new AmCharts.AmGraph();
durationGraph.title = "duration";
durationGraph.valueField = "duration";
durationGraph.type = "line";
durationGraph.valueAxis = durationAxis; // indicate which axis should be used
durationGraph.lineColor = "#ff5755";
durationGraph.balloonText = "[[value]]";
durationGraph.lineThickness = 1;
durationGraph.legendValueText = "[[value]]";
durationGraph.bullet = "square";
durationGraph.bulletBorderColor = "#ff5755";
durationGraph.bulletBorderThickness = 1;
durationGraph.bulletBorderAlpha = 1;
durationGraph.dashLengthField = "dashLength";
chart.addGraph(durationGraph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.zoomable = false;
chartCursor.categoryBalloonDateFormat = "DD";
chartCursor.cursorAlpha = 0;
chartCursor.valueBalloonsEnabled = false;
chart.addChartCursor(chartCursor);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.bulletType = "round";
legend.equalWidths = false;
legend.valueWidth = 120;
legend.useGraphSettings = true;
legend.color = "#FFFFFF";
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body style="background-color:#161616">
<div id="chartdiv" style="width:100%; height:400px;"></div>
</body>
</html>PK ���\/���
�
_JSON_barAndLineMix.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script src="../amcharts/themes/dark.js" type="text/javascript"></script>
<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"
});
</script>
</head>
<body style="background-color:#282828;">
<div id="chartdiv" style="width: 500px; height: 600px;"></div>
</body>
</html>PK ���\���^ ^ funnelChart.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/funnel.js" type="text/javascript"></script>
<script>
var chart;
var data = [
{
"title": "Website visits",
"value": 300
},
{
"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": 15
},
{
"title": "Purchased additional products",
"value": 8
}
];
AmCharts.ready(function () {
chart = new AmCharts.AmFunnelChart();
chart.titleField = "title";
chart.balloon.cornerRadius = 0;
chart.marginRight = 220;
chart.marginLeft = 15;
chart.labelPosition = "right";
chart.funnelAlpha = 0.9;
chart.valueField = "value";
chart.dataProvider = data;
chart.startX = 0;
chart.balloon.animationTime = 0.2;
chart.neckWidth = "40%";
chart.startAlpha = 0;
chart.neckHeight = "30%";
chart.balloonText = "[[title]]:<b>[[value]]</b>";
chart.creditsPosition = "top-right";
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 500px; height: 300px;"></div>
</body>
</html>PK ���\_'|Ү � clockWithTwoFaces.htmlnu �[��� <!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 examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/gauge.js" type="text/javascript"></script>
<script>
var chart;
var sArrow;
var mArrow;
var hArrow;
var axis;
AmCharts.ready(function () {
// clock is just an angular gauge with three arrows
chart = new AmCharts.AmAngularGauge();
chart.startDuration = 0.3;
// main face
axis = new AmCharts.GaugeAxis();
axis.startValue = 0;
axis.endValue = 12;
axis.valueInterval = 1;
axis.minorTickInterval = 0.2;
axis.showFirstLabel = false;
axis.startAngle = 0;
axis.endAngle = 360;
axis.axisAlpha = 0.3;
chart.addAxis(axis);
// seconds face
var axis2 = new AmCharts.GaugeAxis();
axis2.startValue = 0;
axis2.endValue = 60;
axis2.valueInterval = 15;
axis2.minorTickInterval = 1;
axis2.showFirstLabel = false;
axis2.startAngle = 0;
axis2.endAngle = 360;
axis2.radius = 40;
axis2.centerY = 80;
axis2.inside = false;
axis2.axisAlpha = 0.3;
chart.addAxis(axis2);
// hour arrow
hArrow = new AmCharts.GaugeArrow();
hArrow.radius = "50%";
hArrow.clockWiseOnly = true;
// minutes arrow
mArrow = new AmCharts.GaugeArrow();
mArrow.radius = "90%";
mArrow.startWidth = 6;
mArrow.nailRadius = 0;
mArrow.clockWiseOnly = true;
// seconds arrow
sArrow = new AmCharts.GaugeArrow();
sArrow.axis = axis2; // this arrow uses different axis
sArrow.startWidth = 3;
sArrow.nailRadius = 4;
sArrow.color = "#CC0000";
sArrow.clockWiseOnly = true;
// update clock before adding arrows to avoid initial animation
updateClock();
// add arrows
chart.addArrow(hArrow);
chart.addArrow(mArrow);
chart.addArrow(sArrow);
chart.write("chartdiv");
// update clock every second
setInterval(updateClock, 1000);
});
// update clock
function updateClock() {
// get date
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
// update hours
hArrow.setValue(hours + minutes / 60);
// update minutes
mArrow.setValue(12 * (minutes + seconds / 60) / 60);
// update seconds
sArrow.setValue(date.getSeconds());
// update date
var dateString = AmCharts.formatDate(date, "DD MMM, EEE");
axis.setTopText(dateString);
}
</script>
</head>
<body>
<div id="chartdiv" style="width:400px; height:400px;"></div>
</body>
</html>PK ���\��� '