amCharts: base sample

by amcharts

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<div id="flashcontent" style="width: 100%; height: 362px;"></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

jQuery.noConflict();
            var $j = jQuery; 
            var chart;
            var colorsArray=new Array("#FF6600","#CC0000","#FF00FF","#CCCC00","#B0DE09","#FCD202","#CCCCFF","#CC9900","#99FF00","#6699FF","#660000","#000000");
            
            function zoomChart() {
                // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
                chart.zoomToIndexes(10, 20);
            }
            var sdfg = function(finalBatchData) {
                chart = new AmCharts.AmSerialChart();
                chart.marginTop = 0;
                chart.autoMarginOffset = 5;
                chart.pathToImages =  "http://localhost/processPad/app/webroot/amcharts_2.8.1/images/";
                chart.zoomOutButton = {
                    backgroundColor: '#000000',
                    backgroundAlpha: 0.15
                };
                chart.dataProvider = finalBatchData;
                chart.categoryField = "age";
                console.log(chart.dataProvider);

                // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
                chart.addListener("dataUpdated", zoomChart);

                // AXES
                // category                
                var categoryAxis = chart.categoryAxis;
                categoryAxis.parseDates = false; // as our data is date-based, we set parseDates to true
                //categoryAxis.minPeriod = "mm"; // our data is daily, so we set minPeriod to DD
                categoryAxis.dashLength = 2;
                categoryAxis.labelRotation = 90;
                categoryAxis.gridAlpha = 0.15;
                categoryAxis.startOnAxis = true;
                categoryAxis.title = "age";
                categoryAxis.axisThickness = 2;
                categoryAxis.axisColor = "#DADADA";
                var valAxis = new AmCharts.ValueAxis();
                valAxis.axisColor = '#000000';
               ...