Skip to content

Instantly share code, notes, and snippets.

@jjsub

jjsub/gist:90eb57c9a3a15cf2e64d

Created November 19, 2014 21:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jjsub/90eb57c9a3a15cf2e64d to your computer and use it in GitHub Desktop.
Save jjsub/90eb57c9a3a15cf2e64d to your computer and use it in GitHub Desktop.
Download ZIP
AmCharts 101
Raw
gistfile1.txt
Note: All the code is on a html file.
After download AmChart zip file from the website.
Follow the tutorial.
http://www.amcharts.com/tutorials/your-first-chart-with-amcharts/
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="amcharts_/amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts_/amcharts/serial.js" type="text/javascript"></script>
<script type="text/javascript">
var chartData = [{
"country": "USA",
"visits": 4252
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "UK",
"visits": 1122
}, {
"country": "France",
"visits": 1114
}, {
"country": "India",
"visits": 984
}, {
"country": "Spain",
"visits": 711
}, {
"country": "Netherlands",
"visits": 665
}, {
"country": "Russia",
"visits": 580
}, {
"country": "South Korea",
"visits": 443
}, {
"country": "Canada",
"visits": 441
}, {
"country": "Brazil",
"visits": 395
}, {
"country": "Italy",
"visits": 386
}, {
"country": "Australia",
"visits": 384
}, {
"country": "Taiwan",
"visits": 338
}, {
"country": "Poland",
"visits": 328
}];
AmCharts.ready(function() {
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";
chart.angle = 30;
chart.depth3D = 15;
var graph = new AmCharts.AmGraph();
graph.valueField = "visits";
graph.type = "line"; // graph type
graph.fillAlphas = 0.1; // Ditermen the opasity of the colums //With lines this is the fill( El relleno )
graph.balloonText = "[[category]]: <b>[[value]]</b>";
graph.bullet = "round";
graph.lineColor = "#8d1cc6";
chart.addGraph(graph);
var categoryAxis = chart.categoryAxis;
categoryAxis.autoGridCount = false;
categoryAxis.gridCount = chartData.length;
categoryAxis.labelRotation = 90;
categoryAxis.gridPosition = "start";
chart.write('chartdiv');
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 640px; height: 400px;"></div>
</body>
</html>
@jjsub
Copy link
Author

jjsub commented Nov 19, 2014

Loading External data
http://www.amcharts.com/tutorials/loading-external-data/

Multilines Example

http://www.amcharts.com/demos/reversed-value-axis/#

Theme link
http://extra.amcharts.com/tutorials/themes/#

http://jsfiddle.net/rf724ezz/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment