#8876
by amcharts
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}
JavaScript
var chart;
var chartData = [
{
"country": "07-January-2014",
"visits": 4025041
},
{
"country": "08-Febrary-2014",
"visits": 1225041000
}
];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";
chart.startDuration = 1;
chart.usePrefixes=true;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.axisColor="#E4E4E4";
categoryAxis.color="#3c3c3c";
categoryAxis.fontSize=13;
categoryAxis.gridThickness=1;
categoryAxis.titleColor="#3c3c3c";
categoryAxis.titleFontSize=13;
categoryAxis.autoGridCount=true;
categoryAxis.axisThickness=1;
categoryAxis.titleBold=false;
categoryAxis.autoWrap=true;
categoryAxis.gridAlpha=0;
//categoryAxis.gridCount=10;
categoryAxis.autoRotateAngle=0;
categoryAxis.minHorizontalGap = 100;
categoryAxis.autoRotateCount=5;
categoryAxis.addListener("clickItem",function(evt){
alert(evt);
});
var valueAxis =new AmCharts.ValueAxis();
chart.addValueAxis(valueAxis);
valueAxis.id = "y";
valueAxis.axisColor="#E4E4E4";
valueAxis.color="#3c3c3c";
valueAxis.fontSize=13;
valueAxis.gridThickness=1;
valueAxis.gridAlpha=.05;
valueAxis.titleColor="#3c3c3c";
valueAxis.titleFontSize=13;
valueAxis.includeHidden=false;
valueAxis.titleBold=false;
valueAxis.axisAlpha=0;
valueAxis.precision=2;
// valueAxis.minimum=0;
// valueAxis.maximum=40250;
// value
// in case you don't want to change default settings of value axis,
// you don't need to create it, as one value axis is created automatically.
...