I need to add one more graph in same panel after makeChart() has created the chart. If I can make one more function to add this additional graph it will solve the problem, but not able to find the solution. I have written a function to add this graph but not sure if this is the right way. Its not working.
var chart = AmCharts.makeChart("chartdiv", {
"type": "stock",
"color": "#fff",
"dataDateFormat": "YYYY-MM-DD",
"dataSets": [{
"title": "MSFT",
"fieldMappings": [{
"fromField": "Open",
"toField": "open"
}, {
"fromField": "High",
"toField": "high"
}, {
"fromField": "Low",
"toField": "low"
}, {
"fromField": "Close",
"toField": "close"
}, {
"fromField": "Volume",
"toField": "volume"
}],
"compared": false,
"categoryField": "Date",
/**
* data loader for data set data
*/
"dataLoader": {
"url": "data/MSFT.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
},
/**
* data loader for events data
*/
"eventDataLoader": {
"url": "data/MSFT_events.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true,
"postProcess": function ( data ) {
for ( var x in data ) {
switch( data[x].Type ) {
case 'A':
var color = "#85CDE6";
break;
default:
var color = "#cccccc";
break;
}
data[x].Description = data[x].Description.replace( "Upgrade", "<strong style=\"color: #0c0\">Upgrade</strong>" ).replace( "Downgrade", "<strong style=\"color: #c00\">Downgrade</strong>" );
data[x] = {
type: "pin",
graph: "g1",
backgroundColor: color,
date: data[x].Date,
text: data[x].Type,
description: "<strong>" + data[x].Title + "</strong><br />" + data[x].Description
};
}
return data;
}
}
}, {
"title": "TXN",
"fieldMappings": [{
"fromField": "Open",
"toField": "open"
}, {
"fromField": "High",
"toField": "high"
}, {
"fromField": "Low",
"toField": "low"
}, {
"fromField": "Close",
"toField": "close"
}, {
"fromField": "Volume",
"toField": "volume"
}],
// "compared": true,
"categoryField": "Date",
"dataLoader": {
"url": "data/TXN.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
}
}],
"panels": [{
"title": "Value",
"percentHeight": 70,
"stockGraphs": [{
"type": "candlestick",
"id": "g1",
"openField": "open",
"closeField": "close",
"highField": "high",
"lowField": "low",
"valueField": "close",
"lineColor": "#fff",
"fillColors": "#fff",
"negativeLineColor": "#db4c3c",
"negativeFillColors": "#db4c3c",
"fillAlphas": 1,
"comparedGraphLineThickness": 2,
"columnWidth": 0.7,
"useDataSetColors": false,
// "comparable": true,
"compareField": "close",
"showBalloon": false,
"proCandlesticks": true
}],
"stockLegend": {
"valueTextRegular": undefined,
"periodValueTextComparing": "[[percents.value.close]]%"
},
"trendLines": [{
"finalDate": "2014-01-20",
"finalValue": 29,
"initialDate": "2013-12-23",
"initialValue": 37,
"lineColor": "red",
"lineAlpha" : 1
}, {
"finalDate": "2012-01-22",
"finalValue": 40,
"initialDate": "2010-01-17",
"initialValue": 16,
"lineColor": "#CC0000",
"lineAlpha" : 1
}],
addStockGraphnew : function(){
}
}],
"panelsSettings": {
"color": "#fff",
"plotAreaFillColors": "#333",
"plotAreaFillAlphas": 1,
"marginLeft": 60,
"marginTop": 5,
"marginBottom": 5
},
"chartScrollbarSettings": {
"graph": "g1",
"graphType": "line",
"usePeriod": "WW",
"backgroundColor": "#333",
"graphFillColor": "#666",
"graphFillAlpha": 0.5,
"gridColor": "red",
"gridAlpha": 1,
"selectedBackgroundColor": "#444",
"selectedGraphFillAlpha": 1
},
"categoryAxesSettings": {
"equalSpacing": true,
"gridColor": "#555",
"gridAlpha": 1
},
"valueAxesSettings": {
"gridColor": "#555",
"gridAlpha": 1,
"inside": false,
"showLastLabel": true
},
"chartCursorSettings": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true
},
"legendSettings": {
"color": "#fff"
},
"stockEventsSettings": {
"showAt": "high",
"type": "pin"
},
"balloon": {
"textAlign": "left",
"offsetY": 10
},
"periodSelector": {
"position": "bottom",
"periods": [{
"period": "DD",
"count": 10,
"label": "10D"
}, {
"period": "MM",
"count": 1,
"label": "1M"
}, {
"{period}": "MM",
"count": 6,
"label": "6M"
}, {
"period": "YYYY",
"count": 1,
"label": "1Y"
}, {
"period": "YYYY",
"count": 2,
"selected": true,
"label": "2Y"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
}]
}
});
/////////////// my function to add new graph /////////////
makeChart.prototype.addnewGraph = function(){
var graph99 = new AmCharts.StockGraph();
// graph99.title="ne";
graph99.type = "line";
graph99.valueField = "close";
graph99.fillColors = "red";
graph99.fillAlphas = .5;
graph99.lineColor = "red";
graph99.lineThickness = 1;
graph99.negativeLineColor = "#db4c3c";
graph99.negativeFillColors = "#db4c3c";
graph99.useDataSetColors = false;
(panelname:not sure).addStockGraph( graph99 );
// chart.panels = [(panelname :not sure)];
var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
categoryAxesSettings.equalSpacing = true;
chart.categoryAxesSettings = categoryAxesSettings;
}
You can use chart.panels array to access specific panel.
There's also no need to create a new CategoryAxesSettings object. That code is redundant.
Finally, you will need to call chart.validateNow() method after adding the new graph so that chart knows something changed.
So, to rewrite your function:
makeChart.prototype.addnewGraph = function() {
var graph99 = new AmCharts.StockGraph();
// graph99.title="ne";
graph99.type = "line";
graph99.valueField = "close";
graph99.fillColors = "red";
graph99.fillAlphas = .5;
graph99.lineColor = "red";
graph99.lineThickness = 1;
graph99.negativeLineColor = "#db4c3c";
graph99.negativeFillColors = "#db4c3c";
graph99.useDataSetColors = false;
// adding to first panel
chart.panels[0].addStockGraph( graph99 );
// taking in the changes
chart.validateNow();
}