read the json file to output to an highcharts - json

Question

I came to read the json file to output to an highcharts.
I have a highcharts areagraph whose values are received from json whose format is as follows:
scope.jsondata = [
{
"Name": "A",
"Categories": "03.01",
"Locate": "1",
"Value": 30
},
{
"Name": "A",
"Categories": "03.02",
"Locate": "1",
"Value": 50
},
{
"Name": "A",
"Categories": "03.03",
"Locate": "1",
"Value": 60
},
{
"Name": "A",
"Categories": "03.04",
"Locate": "1",
"Value": 40
},
{
"Name": "A",
"Categories": "03.05",
"Locate": "1",
"Value": 70
}
];
How can I embed those values for my jsondata in angularJS?
scope.render = function (data) {
var target = element.find('#detail-usage-chart'),
firstDate = {
name: scope.jsondata.Name,
data: scope.jsondata.Vaule,
color: '#f48d7f',
type: 'area'
},
tempOption = {
data: [10, 13, 17, 8, 11, 5, 11, 13 ,16, 18, 20, 13, 16, 21, 19],
type: 'spline',
yAxis: 1
}
};
Please provide a suitable way to embed the data from json.

Answer 1

Area chart is expecting a name and an array contaning values in its series:
See here
So all you have to do is just a quick function in order to prepare your data that way. For example:
var scope.readyValues = [];
for(var i=0;i<scope.jsondata.length;i++)
{
scope.readyValues.push(scope.jsondata[i].Value);
}
Next, just configure the series this way:
// .....chart options
series: [{
name: scope.jsondata[0].Name,
data: scope.readyValues
}
If you have multiple Names in your scope.jsondata then you can use jquery map function or you can make an array for each name.
And since you're using angular I recommend you use Highcharts-ng it's easier ;)