Flat the nested data into the top level object Amcharts - amcharts

Question

Here is the structure of data1
var data1 = [{
"Date": "2016-07-09",
"StockList": [{"Name": "H1", "PNL2": 20, "NAV2" : 20}, {"Name": "H2", "PNL2": 20, "NAV2" : 20}]
"NAV": 26.28,
"PNL": 7.61
}, {
"Date": "2016-07-10",
"StockList": [{"Name": "H1", "PNL2": 20, "NAV2" : 20}, {"Name": "H2", "PNL2": 20, "NAV2" : 20}]
"NAV": 27.55,
"PNL": 12.89
}];
since nested data is not allowed in the Amcharts(if there is a way to deal with the nested data, that is better), is it possible flat the into the top level object(I can not change the original inputed data). For example:
var data1 = [{
"Date": "2016-07-09",
"H1_PNL2": 20,
"H1_NAV2" : 20
"H2_PNL2": 20,
"H2_NAV2" : 20,
"NAV": 26.28,
"PNL": 7.61
}, {
"Date": "2016-07-10",
"H1_PNL2": 20,
"H1_NAV2" : 20
"H2_PNL2": 20,
"H2_NAV2" : 20,
"NAV": 27.55,
"PNL": 12.89
}];
In such Amcharts code:
var dataSet1 = new AmCharts.DataSet();
dataSet1.color = "#b0de09";
//create your field mappings for each valueField
dataSet1.fieldMappings = valueFields.map(function(valueField) {
return {
fromField: valueField,
toField: valueField
};
});
dataSet1.dataProvider = data;
dataSet1.categoryField = "Date";
chart.dataSets = [dataSet1];
// PANELS
var stockPanel = new AmCharts.StockPanel();
stockPanel.showCategoryAxis = true;
stockPanel.title = "PNL2";
stockPanel.eraseAll = false;
//stockPanel.addLabel(0, 100, "Click on the pencil icon on top-right to start drawing", "center", 16);
//create a graph for each valueField
valueFields.forEach(function(valueField) {
var graph = new AmCharts.StockGraph();
graph.title = valueField;
graph.valueField = valueField;
graph.bullet = "round";
graph.bulletColor = "#FFFFFF";
graph.bulletBorderColor = "#00BBCC";
graph.bulletBorderAlpha = 1;
graph.bulletBorderThickness = 2;
graph.bulletSize = 7;
graph.lineThickness = 2;
graph.lineColor = "#00BBCC";
graph.useDataSetColors = false;
stockPanel.addStockGraph(graph);
});
chart.addPanel(stockPanel);
chart.write("chartdiv");
}
createStockChart(data1);
Here is my data structure
[{,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…},…]
[0 … 99]
0:{,…}
CashLeft:0
Commission:0
Date:"/Date(1454428800000)/"
NAV:0
PNL:0
Performance:[{
0:{Stock: {Symbol: "1044 HK", Close: 66.714, Date: "/Date(1454428800000)/"}, Position: 0,…}
1:{Stock: {Symbol: "1088 HK", Close: 10.9, Date: "/Date(1454428800000)/"}, Position: 0,…}
2:{Stock: {Symbol: "12 HK", Close: 35.955, Date: "/Date(1454428800000)/"}, Position: 0,…}
And here is the code I write down
function createStockChart(data) {
var chart = new AmCharts.AmStockChart();
data.forEach(function (data1) {
data1.Performance.forEach(function (stockItem) {
data1[stockItem.Symbol + "_PNL2"] = stockItem.PNL2;
});
//the following are completely optional - AmCharts won't look at StockList, but if you
//want to conserve memory and don't need the StockList for anything else, you can remove
//it
data1.StockList.length = 0; //delete the StockList Array. Not necessary if you need it for something else
delete data1.StockList; //remove the property from the object if you want. Also not necessary.
});
But when I see the data structure it does not change, Maybe here is the problem that the List of stock(I mean the name(Symbol)) will be changed some days later, that means the properties of data will changed periodically, I don't know whether it is the point?

Answer 1

Assuming your StockList will always have a Name, PNL2 and NAV2, you can just loop through your data and assign the properties and values to the object prior to the rest of your code.
data1.forEach(function(arrayElement) {
arrayElement.StockList.forEach(function(stockItem) {
arrayElement[stockItem.Name + "_PNL2"] = stockItem.PNL2;
arrayElement[stockItem.Name + "_NAV2"] = stockItem.NAV2;
});
//the following are completely optional - AmCharts won't look at StockList, but if you
//want to conserve memory and don't need the StockList for anything else, you can remove
//it
arrayElement.StockList.length = 0; //delete the StockList Array. Not necessary if you need it for something else
delete arrayElement.StockList; //remove the property from the object if you want. Also not necessary.
});
From there you can just run the rest of your code from my previous answer.
Demo:
var data1 = [{
"Date": "2016-07-09",
"StockList": [{
"Name": "H1",
"PNL2": 20,
"NAV2": 20
}, {
"Name": "H2",
"PNL2": 20,
"NAV2": 20
}],
"NAV": 26.28,
"PNL": 7.61
}, {
"Date": "2016-07-10",
"StockList": [{
"Name": "H1",
"PNL2": 20,
"NAV2": 20
}, {
"Name": "H2",
"PNL2": 20,
"NAV2": 20
}],
"NAV": 27.55,
"PNL": 12.89
}];
data1.forEach(function(arrayElement) {
arrayElement.StockList.forEach(function(stockItem) {
arrayElement[stockItem.Name + "_PNL2"] = stockItem.PNL2;
arrayElement[stockItem.Name + "_NAV2"] = stockItem.NAV2;
});
//the following are completely optional - AmCharts won't look at StockList, but if you
//want to conserve memory and don't need the StockList for anything else, you can remove
//it
arrayElement.StockList.length = 0; //delete the StockList Array. Not necessary if you need it for something else
delete arrayElement.StockList; //remove the property from the object if you want. Also not necessary.
});
console.log(data1);