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 = [{
                country: "USA",
                year2004: 3.5,
                year2005: 4.2,
                url:'1'
            }, {
                country: "UK",
                year2004: 1.7,
                year2005: 3.1,
                url:'2'
            }, {
                country: "Canada",
                year2004: 2.8,
                year2005: 2.9,
                url:'3'
            }, {
                country: "Japan",
                year2004: 2.6,
                year2005: 2.3,
                url:'4'
            }, {
                country: "France",
                year2004: 1.4,
                year2005: 2.1,
                url:'5'
            }, {
                country: "Brazil",
                year2004: 2.6,
                year2005: 4.9,
                url:'6'
            }, {
                country: "Russia",
                year2004: 6.4,
                year2005: 7.2,
                url:'7'
            }, {
                country: "India",
                year2004: 8.0,
                year2005: 7.1,
                url:'8'
            }, {
                country: "China",
                year2004: 9.9,
                year2005: 10.1,
                url:'9'
            }];


            AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                chart.categoryField = "country";
                chart.color = "#FFFFFF";
                chart.startDuration = 1;
                chart.plotAreaFillAlphas = 0.2;
                // the following two lines makes chart 3D
                chart.angle = 30;
                chart.depth3D = 60;

                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.gridAlpha = 0.2;
                categoryAxis.gridPosition = "start";
               ...