amCharts: base sample

by secretgspot

HTML

<script src="http://www.amcharts.com/lib/amstock.js"></script>
<div id="chartdiv"></div>
<input type="button" value="click to load data" onclick="callData();"/>
<div id="result">
<p></p>
</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 isLoad = false;
 AmCharts.ready(function () {
   BuildChart();
 });
function BuildChart(){
var chartData =   [{s0 :new Date( 2000 , 0 , 1 ,12,25), s1 :86, s2 :182, s3 :344, s4 :1, s5 :211 },
{s0 :new Date( 2000 , 0 , 2 ,12,25), s1 :375, s2 :36, s3 :392, s4 :2, s5 :188 },
{s0 :new Date( 2000 , 0 , 3 ,12,25), s1 :3, s2 :344, s3 :47, s4 :3, s5 :231 },
{s0 :new Date( 2000 , 0 , 4 ,12,25), s1 :128, s2 :63, s3 :185, s4 :3, s5 :316 },
{s0 :new Date( 2000 , 0 , 5 ,12,25), s1 :164, s2 :226, s3 :128, s4 :4, s5 :354 },
{s0 :new Date( 2000 , 0 , 6 ,12,25), s1 :163, s2 :14, s3 :20, s4 :4, s5 :125 },
{s0 :new Date( 2000 , 0 , 7 ,12,25), s1 :195, s2 :110, s3 :106, s4 :3, s5 :82 },
{s0 :new Date( 2000 , 0 , 8 ,12,25), s1 :115, s2 :26, s3 :331, s4 :3, s5 :1 },
{s0 :new Date( 2000 , 0 , 9 ,12,25), s1 :42, s2 :10, s3 :4, s4 :3, s5 :201 },
{s0 :new Date( 2000 , 0 , 10 ,12,25), s1 :270, s2 :168, s3 :307, s4 :4, s5 :103 },
{s0 :new Date( 2000 , 0 , 11 ,12,25), s1 :383, s2 :201, s3 :55, s4 :4, s5 :75 },
{s0 :new Date( 2000 , 0 , 12 ,12,25), s1 :114, s2 :317, s3 :376, s4 :4, s5 :398 }];

    chart = new AmCharts.AmStockChart();
    chart.pathToImages = "/themes/start/images/"
    chart.categoryAxesSettings.minPeriod = "mm";
    var dataSet = new AmCharts.DataSet();
    dataSet.fieldMappings = [{
     fromField: "s1",
     toField: "s1"
    }, {
     fromField: "s2",
     toField: "s2"
    }, {
     fromField: "s3",
     toField: "s3"
    }, {
     fromField: "s4",
     toField: "s4"
    }, {
     fromField: "s5",
     toField: "s5"
    }];
    dataSet.dataProvider = chartData;
    dataSet.categoryField = "s0";
    chart.dataSets = [dataSet];

    var leftAxis = new AmCharts.ValueAxis();
    leftAxis.unit = " MSU";
    leftAxis.title = "Million service unit";
    leftAxis.axisColor = "#FF0000";
    leftAxis.gridAlpha = 0.2;
    leftAxis.axisThickness = 2;

    var rightAxis = new AmCharts.ValueAxis();
    rightAxis.unit = " ";
    rightAxis.title = "Capping type";
   ...