amCharts: base sample

by tiagocarvalho

HTML

<script src="http://www.amcharts.com/lib/amstock.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: "2006",
        country: 1569
            }, {
                year: "2007",
        country: 1598
            }, {
                year: "2008",
        country: 1631
            }, {
                year: "2009",
        country: 1643
            }, {
                year: "2010",
        country: 1656
            }, {
                year: "2011",            
        country: 1681
            }, {
                year: "2012",            
        country: 1682
            }];


            AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                chart.categoryField = "year";
                chart.color = "#404040";
                chart.fontSize = 10;
                chart.startDuration = 1;
                // the following two lines makes chart 3D
                // chart.angle = 30;
                // chart.depth3D = 20;
                 chart.startEffect = "<";
                 chart.numberFormatter.thousandsSeparator = ' ';
                chart.rotate = true;

                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.gridAlpha = 0;
                categoryAxis.gridPosition = "start";
                categoryAxis.gridColor = "#FFFFFF";
                categoryAxis.axisColor = "#A0A0A0";
                categoryAxis.axisAlpha = 1;


                // value
                var valueAxis = new AmCharts.ValueAxis();
                // valueAxis.stackType = "3d"; // This line makes chart 3D stacked (columns are placed one behind another)
                valueAxis.axisAlpha = 0;
                valueAxis.gridAlpha = 0.1;
                valueAxis.gridColor = "#FFFFFF";
                valueAxis.axisColor = "#FFFFFF";
                 valueAxis.labelsEnabled = 0;
                valueAxis.titleColor =...