Multiple Dataset AmstockChart with multiple Axis [closed] - amcharts

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to implement multiple value axis in following amchart sample:
https://www.amcharts.com/demos/multiple-data-sets/
Multiple axis example: http://www.amcharts.com/tips/multiple-value-axes-stock-chart/
I tried a lot but I think I miss some minor thing.
Is there any way to combine above charts (multi value and multi data Set) and create a multiple value axis multiple data sets Chart?
Examples with jsfiddle will work best for me. Thanks :)

Answer 1

I did this myself. Hope this becomes helpful to someone. Here is the solution:
AmCharts.ready(function () {
generateChartData();
createStockChart();
});
var colors = [
"#FF6600", "#B0DE09", "#FCD202", "#2A0CD0",
"#CD0D74", "#CC0000", "#00CC00", "#0000CC", "#DDDDDD",
"#999999", "#333333", "#990000", "#0D8ECF"
];
var chartData1 = [];
var chartData2 = [];
var chartData3 = [];
var chartData4 = [];
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);
newDate.setHours(0, 0, 0, 0);
var value1 = Math.round(Math.random() * (40 + i)) + 100 + i;
var value2 = Math.round(Math.random() * (100 + i)) + 200 + i;
var value3 = Math.round(Math.random() * (100 + i)) + 200;
var value4 = Math.round(Math.random() * (100 + i)) + 200 + i;
chartData1.push({date: newDate,value1: value1});
chartData2.push({date: newDate,value2: value2});
chartData3.push({date: newDate,value3: value3});
chartData4.push({date: newDate,value4: value4});
}
}
function createStockChart() {
var chart = new AmCharts.AmStockChart();
chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
var dataSet1 = new AmCharts.DataSet();
dataSet1.fieldMappings = [{fromField: "value1", toField: "value1"}];
dataSet1.dataProvider = chartData1;
dataSet1.categoryField = "date";
dataSet1.title = "Value1";
dataSet1.color = colors[0];
var dataSet2 = new AmCharts.DataSet();
dataSet2.fieldMappings = [{fromField: "value2", toField: "value2"}];
dataSet2.dataProvider = chartData2;
dataSet2.categoryField = "date";
dataSet2.title = "Value2";
dataSet2.color = colors[1];
var dataSet3 = new AmCharts.DataSet();
dataSet3.fieldMappings = [{fromField: "value3", toField: "value3"}];
dataSet3.dataProvider = chartData3;
dataSet3.categoryField = "date";
dataSet3.title = "Value3";
dataSet3.color = colors[2];
var dataSet4 = new AmCharts.DataSet();
dataSet4.fieldMappings = [{fromField: "value4", toField: "value4"}];
dataSet4.dataProvider = chartData4;
dataSet4.categoryField = "date";
dataSet4.title = "Value4";
dataSet4.color = colors[3];
// set data sets to the chart
chart.dataSets = [dataSet1,dataSet2,dataSet3,dataSet4];
// PANELS ///////////////////////////////////////////
// first stock panel
var stockPanel = new AmCharts.StockPanel();
stockPanel.recalculateToPercents = "never";
stockPanel.title = "Volume";
var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
categoryAxesSettings.minPeriod = "DD";
chart.categoryAxesSettings = categoryAxesSettings;
// apply custom style for value axes
var valueAxesSettings = new AmCharts.ValueAxesSettings();
valueAxesSettings.axisAlpha = 1;
valueAxesSettings.gridThickness = 0;
valueAxesSettings.axisThickness = 2;
valueAxesSettings.inside = false;
chart.valueAxesSettings = valueAxesSettings;
// apply custom style for panels settings
var panelsSettings = new AmCharts.PanelsSettings();
panelsSettings.marginLeft = 100;
panelsSettings.marginRight = 100;
chart.panelsSettings = panelsSettings;
// add first value axes
var valueAxis1 = new AmCharts.ValueAxis();
valueAxis1.axisColor = colors[0];
valueAxis1.color = colors[0];
valueAxis1.offset = 0;
stockPanel.addValueAxis(valueAxis1);
// add second value axes
var valueAxis2 = new AmCharts.ValueAxis();
valueAxis2.axisColor = colors[1];
valueAxis2.color = colors[1];
valueAxis2.offset = 0;
valueAxis2.position = "right";
stockPanel.addValueAxis(valueAxis2);
// add third value axes
var valueAxis3 = new AmCharts.ValueAxis();
valueAxis3.axisColor = colors[2];
valueAxis3.color = colors[2];
valueAxis3.offset = 50;
stockPanel.addValueAxis(valueAxis3);
// add fourth value axes
var valueAxis4 = new AmCharts.ValueAxis();
valueAxis4.axisColor = colors[3];
valueAxis4.color = colors[3];
valueAxis4.offset = 50;
valueAxis4.position = "right";
stockPanel.addValueAxis(valueAxis4);
// graph of first stock panel
var graph1 = new AmCharts.StockGraph();
graph1.valueField = "value1";
graph1.comparable = true;
graph1.title = "Value1";
graph1.useDataSetColors = false;
graph1.lineColor = colors[0];
graph1.bullet = "round";
graph1.bulletBorderColor = "#FFFFFF";
graph1.bulletBorderAlpha = 1;
graph1.balloonText = "[[title]]:<b>[[value]]</b>";
graph1.compareGraphBalloonText = "[[title]]:<b>[[value]]</b>";
graph1.compareGraphBullet = "round";
graph1.compareGraphBulletBorderColor = "#FFFFFF";
graph1.compareGraphBulletBorderAlpha = 1;
graph1.valueAxis = valueAxis1;
stockPanel.addStockGraph(graph1);
// graph of second stock panel
var graph2 = new AmCharts.StockGraph();
graph2.valueField = "value2";
graph2.comparable = true;
graph2.title = "Value2";
graph2.useDataSetColors = false;
graph2.lineColor = colors[1];
graph2.bullet = "round";
graph2.bulletBorderColor = "#FFFFFF";
graph2.bulletBorderAlpha = 1;
graph2.balloonText = "[[title]]:<b>[[value]]</b>";
graph2.compareGraphBalloonText = "[[title]]:<b>[[value]]</b>";
graph2.compareGraphBullet = "round";
graph2.compareGraphBulletBorderColor = "#FFFFFF";
graph2.compareGraphBulletBorderAlpha = 1;
graph2.valueAxis = valueAxis2;
stockPanel.addStockGraph(graph2);
// graph of third stock panel
var graph3 = new AmCharts.StockGraph();
graph3.valueField = "value3";
graph3.comparable = true;
graph3.title = "Value3";
graph3.useDataSetColors = false;
graph3.lineColor = colors[2];
graph3.bullet = "round";
graph3.bulletBorderColor = "#FFFFFF";
graph3.bulletBorderAlpha = 1;
graph3.balloonText = "[[title]]:<b>[[value]]</b>";
graph3.compareGraphBalloonText = "[[title]]:<b>[[value]]</b>";
graph3.compareGraphBullet = "round";
graph3.showEventsOnComparedGraphs = true;
graph3.compareGraphBulletBorderColor = "#FFFFFF";
graph3.compareGraphBulletBorderAlpha = 1;
graph3.valueAxis = valueAxis3;
stockPanel.addStockGraph(graph3);
// graph of fourth stock panel
var graph4 = new AmCharts.StockGraph();
graph4.comparable = true;
graph4.valueField = "value4";
graph4.title = "Value4";
graph4.useDataSetColors = false;
graph4.lineColor = colors[3];
graph4.bullet = "round";
graph4.bulletBorderColor = "#FFFFFF";
graph4.bulletBorderAlpha = 1;
graph4.balloonText = "[[title]]:<b>[[value]]</b>";
graph4.compareGraphBalloonText = "[[title]]:<b>[[value]]</b>";
graph4.compareGraphBullet = "round";
graph4.compareGraphBulletBorderColor = "#FFFFFF";
graph4.compareGraphBulletBorderAlpha = 1;
graph4.valueAxis = valueAxis4;
stockPanel.addStockGraph(graph4);
// create stock legend
var stockLegend1 = new AmCharts.StockLegend();
stockLegend1.periodValueTextComparing = "[[percents.value.close]]%";
stockLegend1.periodValueTextRegular = "[[value.close]]";
stockPanel.stockLegend = stockLegend1;
var periodSelector = new AmCharts.PeriodSelector();
periodSelector.periods = [
{period: "DD",count: 5,label: "5 day"},{period: "DD",count: 10,label: "10 days"},
{period: "MM",count: 1,label: "1 month",selected: true}, {period: "YYYY",count: 1,label: "1 year"},
{period: "YTD",label: "YTD"}, {period: "MAX",label: "MAX"}];
periodSelector.position = "left";
chart.periodSelector = periodSelector;
// DATA SET SELECTOR
var dataSetSelector = new AmCharts.DataSetSelector();
dataSetSelector.position = "left";
chart.dataSetSelector = dataSetSelector;
// set panels to the chart
chart.panels = [stockPanel];
// OTHER SETTINGS ////////////////////////////////////
var sbsettings = new AmCharts.ChartScrollbarSettings();
sbsettings.backgroundColor = "#222";
sbsettings.selectedBackgroundColor = "#555";
sbsettings.selectedGraphFillAlpha = 1;
chart.chartScrollbarSettings = sbsettings;
var chartScrollbar = new AmCharts.ChartScrollbar();
chartScrollbar.autoGridCount = true;
chartScrollbar.scrollbarHeight = 40;
chart.chartScrollbar = chartScrollbar;
// CURSOR settings
var cursorSettings = new AmCharts.ChartCursorSettings();
cursorSettings.valueBalloonsEnabled = true;
cursorSettings.cursorAlpha = 0.5;
cursorSettings.valueLineBalloonEnabled = true;
cursorSettings.valueLineEnabled = true;
cursorSettings.valueLineAlpha = 0.5;
cursorSettings.cursorPosition = "mouse";
chart.chartCursorSettings = cursorSettings;
var categoryAxis = new AmCharts.CategoryAxis();
chart.categoryAxis = categoryAxis;
chart.write('chartdiv');
}
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<div id="chartdiv" style="width: 100%; height: 500px;"></div>