amCharts: base sample
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/amstockchart/3.13.0/amcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amstockchart/3.13.0/serial.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amstockchart/3.13.0/amstock.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amstockchart/3.13.0/themes/light.js"></script>
<div id="chartdiv"></div>
CSS
#chartdiv {
height: 400px;
margin: 10px;
}
.amChartsButtonSelected {
background-color:#CC0000;
border-style:solid;
border-color:#CC0000;
border-width:1px;
color:#FFFFFF;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
}
.amChartsButton {
background-color:#EEEEEE;
border-style:solid;
border-color:#CCCCCC;
border-width:1px;
color:#000000;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
}
JavaScript
var chart;
var chartData = [{
year: 1930,
italy: 1,
germany: 5,
uk: 3
}, {
year: 1934,
italy: 1,
germany: 2,
uk: 6
}, {
year: 1938,
italy: 2,
germany: 3,
uk: 1
}, {
year: 1945,
italy: 3,
germany: 4,
uk: 1
}, {
year: 1954,
italy: 5,
germany: 1,
uk: 2
}, {
year: 1958,
italy: 3,
germany: 2,
uk: 1
}, {
year: 1962,
italy: 1,
germany: 2,
uk: 3
}, {
year: 1966,
italy: 2,
germany: 1,
uk: 5
}, {
year: 1970,
italy: 3,
germany: 5,
uk: 2
}, {
year: 1974,
italy: 4,
germany: 3,
uk: 6
}, {
year: 1978,
italy: 1,
germany: 2,
uk: 4
}];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "year";
chart.startDuration = 0.5;
chart.balloon.color = "#000000";
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.fillAlpha = 1;
categoryAxis.fillColor = "#FAFAFA";
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
...