CODEWITHSUNDEEP
jsonangularjshighcharts
bismute
bismute

Reputation: 149

read the json file to output to an highcharts

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.

Upvotes: 0

Views: 880

Answers (1)

Fourat
Fourat

Reputation: 2447

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 ;)

Upvotes: 1

Related Questions