amCharts: base sample

by tiagocarvalho

HTML

<script src="http://www.amcharts.com/lib/amstock.js"></script>
<div id="chartdiv"></div>
<select name="option1" class="chartStyle" tabindex="4" onchange="setChartType(this.options[this.selectedIndex].value);">
              <option value="line">Line chart</option>
              <option value="step">Step chart</option>
              <option value="column">Column chart</option>
</select>

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 graph;
var chartData = [{date: 2000-05-02,last: 1587}, {date: 1995-05-02,last: 1567}, {date: 1996-05-02,last: 1617}, {date: 1997-05-02,last: 1930}, {date: 1998-05-02,last: 1660}, {date: 1999-05-02,last: 1683}, {date: 2000-05-02,last: 1091}, {date: 2001-05-02,last: 1298}, {date: 2002-05-02,last: 1275}, {date: 2003-05-02,last: 1246}, {date: 2004-05-02,last: 1618}, {date: 2005-05-02,last: 1213}, {date: 2006-05-02,last: 1199}, {date: 2007-05-02,last: 1110}];

AmCharts.ready(function () {

        chart = new AmCharts.AmSerialChart();
        chart.zoomOutButton = {
            backgroundColor: '#000000',
            backgroundAlpha: 0.15
        };
        chart.dataProvider = chartData;
        chart.autoMargins = true;
        chart.categoryField = "date";

        var categoryAxis = chart.categoryAxis;
        categoryAxis.gridAlpha = 0.07;
        categoryAxis.axisColor = "#DADADA";
        categoryAxis.startOnAxis = true;

        var valueAxis = new AmCharts.ValueAxis();
        valueAxis.stackType = "regular";
        valueAxis.gridAlpha = 0.07;
        valueAxis.axisAlpha = 0;
        valueAxis.labelsEnabled=false;
        chart.addValueAxis(valueAxis);

        graph= new AmCharts.AmGraph();
        graph.type = "line";
        graph.valueField = "last";
        graph.lineColor = "#033373";
        graph.lineAlpha = 1;
        graph.fillAlphas = 0.3;
        graph.balloonText = "Close: [[last]]";
        chart.addGraph(graph);

        var chartCursor = new AmCharts.ChartCursor();
        chartCursor.zoomable = false;
        chartCursor.cursorAlpha = 0;
        chart.addChartCursor(chartCursor);

        chart.write("chartdiv");
    }
);

function setChartType(value)
{
        graph.type = value;
        chart.validateNow();
}