stock Changing graph types

by jodinesjr

HTML

<script src="http://www.amcharts.com/lib/amstock.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 355px;"></div>
<select id="selector1" onchange="changeType(0, this.options[this.selectedIndex].value);">
    <option value="line">Line</option>
    <option value="column">Column</option>
    <option value="smoothedLine">Smoothed Line</option>
</select>

<select id="selector2" onchange="changeType(1, this.options[this.selectedIndex].value);">
    <option value="line">Line</option>
    <option value="column" selected="selected">Column</option>
    <option value="smoothedLine">Smoothed Line</option>
</select>

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;   
}

.amChartsButton
{
   background-color:#EEEEEE;
   border-style:solid;
   border-color:#CCCCCC;
   border-width:1px;
   color:#000000;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin: 1px;  
}

.amChartsCompareList
{
   border-style:solid;
   border-color:#CCCCCC;
   border-width:1px;
}

#selector1 {
    position: absolute;
    top: 0px;
    right: 0px;
}

#selector2 {
    position: absolute;
    top: 173px;
    right: 0px;
}

JavaScript

var chart;
var chartData1 = [];

function generateChartData() {
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 500);
    firstDate.setHours(0, 0, 0, 0);

    for (var i = 0; i < 500; i++) {
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
        var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;

        chartData1.push({
            date: newDate,
            value: a1,
            volume: b1
        });
    }
}

AmCharts.ready(function() {
    generateChartData();
    createStockChart();
});

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

    // DATASETS //////////////////////////////////////////
    // create data sets first
    var dataSet1 = new AmCharts.DataSet();
    dataSet1.title = "first data set";
    dataSet1.fieldMappings = [{
        fromField: "value",
        toField: "value"},
    {
        fromField: "volume",
        toField: "volume"}];
    dataSet1.dataProvider = chartData1;
    dataSet1.categoryField = "date";

    // set data sets to the chart
    chart.dataSets = [dataSet1];

    // PANELS ///////////////////////////////////////////                                                  
    // first stock panel
    var stockPanel1 = new AmCharts.StockPanel();
    stockPanel1.showCategoryAxis = false;
    stockPanel1.title = "Value";
    stockPanel1.percentHeight = 60;

    // graph of first stock panel
    var graph1 = new AmCharts.StockGraph();
    graph1.valueField = "value";
    graph1.comparable = true;
    graph1.compareField = "value";
    stockPanel1.addStockGraph(graph1);

    // create stock legend                
    stockPanel1.stockLegend = new AmCharts.StockLegend();


    // second stock panel
    var stockPanel2 = new AmCharts.StockPanel();
    stockPanel2.title = "Volume";
   ...