V3: Stock multiple panels

by amcharts

HTML

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

CSS

body {
    font-size:12px;
    color:#000000;
    background-color:#ffffff;
    font-family:verdana, helvetica, arial, sans-serif;
}
.amChartsButtonSelected {
    background-color:#CC0000;
    border-style:solid;
    border-color:#CC0000;
    border-width:1px;
    color:#FFFFFF;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 1px;
    padding:3px;
}
.amChartsButton {
    background-color:#EEEEEE;
    border-style:solid;
    border-color:#CCCCCC;
    border-width:1px;
    color:#000000;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 1px;
    padding:3px;
}
.amChartsCompareList {
    border-style:solid;
    border-color:#CCCCCC;
    border-width:1px;
}

JavaScript

var chartData = [{
     date: new Date(2011, 5, 1, 0, 0, 0, 0),
     val: 10
 }, {
     date: new Date(2011, 5, 2, 0, 0, 0, 0),
     val: 11
 }, {
     date: new Date(2011, 5, 3, 0, 0, 0, 0),
     val: 12
 }, {
     date: new Date(2011, 5, 4, 0, 0, 0, 0),
     val: 11
 }, {
     date: new Date(2011, 5, 5, 0, 0, 0, 0),
     val: 10
 }, {
     date: new Date(2011, 5, 6, 0, 0, 0, 0),
     val: 11
 }, {
     date: new Date(2011, 5, 7, 0, 0, 0, 0),
     val: 13
 }, {
     date: new Date(2011, 5, 8, 0, 0, 0, 0),
     val: 14
 }, {
     date: new Date(2011, 5, 9, 0, 0, 0, 0),
     val: 17
 }, {
     date: new Date(2011, 5, 10, 0, 0, 0, 0),
     val: 13
 }];


 window.onload = function () {
     var chart = new AmCharts.AmStockChart();
     chart.pathToImages = "http://www.amcharts.com/lib/3/images/";

     var dataSet = new AmCharts.DataSet();
     dataSet.dataProvider = chartData;
     dataSet.fieldMappings = [{
         fromField: "val",
         toField: "value"
     }];
     dataSet.categoryField = "date";
     chart.dataSets = [dataSet];

     var stockPanel = new AmCharts.StockPanel();
     chart.panels = [stockPanel];

     var legend = new AmCharts.StockLegend();
     stockPanel.stockLegend = legend;

     var panelsSettings = new AmCharts.PanelsSettings();
     panelsSettings.startDuration = 1;
     chart.panelsSettings = panelsSettings;

     var graph = new AmCharts.StockGraph();
     graph.valueField = "value";
     graph.type = "column";
     graph.title = "MyGraph";
     graph.fillAlphas = 1;
     stockPanel.addStockGraph(graph);

     var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
     categoryAxesSettings.dashLength = 5;
     chart.categoryAxesSettings = categoryAxesSettings;

     var valueAxesSettings = new AmCharts.ValueAxesSettings();
     valueAxesSettings.dashLength = 5;
     chart.valueAxesSettings = valueAxesSettings;

     var chartScrollbarSettings = new AmCharts.ChartScrollbarSettings();
     chartScrollbarSettings.graph =...