Stock-Chart with multiple values and panel

Trying to get serial double chart in panel

by Rohit Bisht

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

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

JavaScript

var chartData = generateChartData();

function generateChartData() {
  var chartData = [];
  var firstDate = new Date(2012, 0, 1);
  firstDate.setDate(firstDate.getDate() - 1000);
  firstDate.setHours(0, 0, 0, 0);

  for (var i = 0; i < 1000; i++) {
    var newDate = new Date(firstDate);
    newDate.setHours(0, i, 0, 0);

    var a = Math.round(Math.random() * (40 + i)) + 100 + i;
    var b = Math.round(Math.random() * (40 + i)) + 100 + i;

    chartData.push({
      "date": newDate,
      "value": a,
      "volume": b
    });
  }
  return chartData;
}

var chart = AmCharts.makeChart("chartdiv", {
  "type": "stock",
  "theme": "light",
  "categoryAxesSettings": {
    "minPeriod": "mm"
  },
  "dataSets": [{
    "color": "red", 
    "fieldMappings": [{
      "fromField": "value",
      "toField": "value"
    }, {
      "fromField": "volume",
      "toField": "volume"
    }],
    "dataProvider": chartData,
    "categoryField": "date"
  }],
  "panels": [{
      "showCategoryAxis": false,
      "title": "Value",
      "percentHeight": 70,
      "stockGraphs": [{
        "fillAlphas": 0,
        "fillColors": "red",
        "id": "g1",
        "valueField": "value",
        "type": "smoothedLine",
        "lineThickness": 2,
        "bullet": "round",

      }],
      "stockLegend": {
        "valueTextRegular": " ",
        "markerType": "none"
      }
    },
    {
      "title": "Volume",
      "percentHeight": 30,
      "valueAxes": [{
        "id": "ValueAxis-1",
        "title": "Axis title"
      }],
      "stockGraphs": [{
          "useDataSetColors": false,
          "valueField": "volume",
          "type": "column",
          "cornerRadiusTop": 2,
          "fillAlphas": 1,
          "fillColorsField": "red" //note that this looks for colors in your data for eacc point. use fillColors instead if you want to change the color directly for all points
        },
        {
          "useDataSetColors": false,
          "valueField": "value",
          //"type":...