Multiple Value Axes

by nono123

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

var chartData = [];

generateChartData();

function generateChartData() {
  var firstDate = new Date();
  firstDate.setDate(firstDate.getDate() - 500);
  firstDate.setMinutes(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 a2 = Math.round(Math.random() * (100 + i)) + 200 + i;
    var a3 = Math.round(Math.random() * (100 + i)) + 200;
    var a4 = Math.round(Math.random() * (100 + i)) + 200 + i;

    chartData.push({
      date: newDate,
      v1: a1,
      v2: a2,
      v3: a3,
      v4: a4,
    });
  }
}

var chart = AmCharts.makeChart("chartdiv", {
  type: "stock",
  pathToImages: "http://www.amcharts.com/lib/3/images/",

  dataSets: [{
    fieldMappings: [{
      fromField: "v1",
      toField: "v1"
    }, {
      fromField: "v2",
      toField: "v2"
    }, {
      fromField: "v3",
      toField: "v3"
    }, {
      fromField: "v4",
      toField: "v4"
    }],
    dataProvider: chartData,
    categoryField: "date"
  }],

  panels: [{
    stockGraphs: [{
      id: "g1",
      title: "PPM CO",
      valueField: "v1",
      valueAxis: "a1",
      lineColor: "#FF33CC",
   	  useDataSetColors: false
    }, {
      id: "g2",
      title: "% O2",
      valueField: "v2",
      valueAxis: "a2",
      lineColor: "#00CC00",
      useDataSetColors: false
    }, {
      id: "g3",
      title: "% ɳ",
      valueField: "v3",
      valueAxis: "a3",
      lineColor: "#FF0000",
      useDataSetColors: false
    }, {
      id: "g4",
      title: "°C Tr",
      valueField: "v4",
      valueAxis: "a4",
      lineColor: "#0000FF",
      useDataSetColors: false
    }],
    valueAxes: [{
      id: "a1",
      axisColor: "#FF33CC",      
      position: "left",
			maximum: "0",
      minimum: "5000",
      offset: 0
    }, {
      id: "a2",
      axisColor: "#00CC00",
      position: "left",
      maximum: "0",
      minimum: "21",
   ...