Valla Valla - 3 months ago 78
AngularJS Question

How to access nested Json Data in AmCharts

I am using AmCharts in my AngularJs Application and this is the Json Data which I get back:

{
total: 2,
tools: [
{
id: "57c5a75d57d92f742dc96bf2",
empId: "1",
empName: "ABC",
empType: {
typeId: 3,
typeName: "Contract",
hours: 45,
}
},
{
id: "57c5a75d57d92f742dc96bf2",
empId: "2",
empName: "DEF",
empType: {
typeId: 2,
typeName: "Full-Time",
hours: 40,
}
},


]
}


Code in my controller:

const writeemp = data => {
const {
total,
employees,
} = data;

empChart.dataProvider = employees;
empChart.write('emp');
empChart.validateData();
};

AmCharts.handleLoad();

var configChart = function () {


empChart = new AmCharts.AmSerialChart();
empChart.categoryField = "empId";
empChart.labelRotation = 90;

var yAxis = new AmCharts.ValueAxis();
yAxis.position = "left";
empChart.addValueAxis(yAxis);


empBarGraph = new AmCharts.AmGraph();
empBarGraph.valueField = "";//This to be the value "TypeName" in "empType" from the Json Data
empBarGraph.type = "column";
empBarGraph.fillAlphas = 1;
empBarGraph.lineColor = "#f0ab00";
empBarGraph.valueAxis = yAxis;
empChart.addGraph(empBarGraph);
empChart.write('empChart');


$http.get(hostNameService.getHostName()+"/dashboard/employees")
.then(response => writeemp(response.data));
}


Could someone let me know how I could access nested Json data in Amcharts. I want to make one of the fields as my valueField in the chart.

Answer

AmCharts doesn't support nested JSON sets. You have to restructure your data as a flattened array of objects containing your valueField(s) and categoryField. In your case:

[
  {
    "empId": 1,
    "typeName": "Contract"
  },
// ...
]

Note that graphs can only support numeric values for the value axis, so "typeName" isn't an appropriate valueField.