Highcharts bargraph from json data in angularJS

Question

I have a highcharts bargraph whose values are received from json whose format is as follows:

"bargraph": 
    [
        {
           "categories": "['S', 'M', 'T', 'W', 'T', 'F']",
            "series1": "[800, 1100, 80, 1800, 1600, 2000]",
            "series2": "[800, 1100, 80, 1800, 1200, 800]"
        }
    ]

How can i embed those values for my bargraph in angularJS

HTML Code:

<div id="bargraph" bargraph={{bargraph}}><\div>

Directive:

angular.module('example').directive('bargraph', function () {
    element.highcharts({

                    xAxis: [
                        {
                            categories: []   //embed categories value here
                        },
                    series: [
                        {
                            name: 'series1',
                             data: [] //Embed series1 data here

                        },
                        {
                            name: 'series2',
                            data: [] //Embed series2 data here
                        }
                    ]
    })
})

Please provide a suitable way to embed the data from json.

You need to use directive for this. Search for highcharts directive. — Chandermani
– Chandermani, Commented Nov 26, 2013 at 7:57
Have you seen similar topic stackoverflow.com/questions/15904739/… ? — Sebastian Bochan
– Sebastian Bochan, Commented Nov 26, 2013 at 11:03

btm1 · Accepted Answer · 2013-12-13 02:53:46Z

Here is a directive i copied and pasted from my webapp it is how i render highcharts using a directive NOTE: not all of this directive is applicable to you and some of it is specific to what i needed but you get the idea.

lrApp.directive('chart', function () {
return {
    restrict: 'E',
    template: '<div></div>',
    transclude: true,
    replace: true,

    link: function (scope, element, attrs) {
        var chart = null;
        var chartsDefaults = {
            chart: {
                renderTo: element[0],
                type: attrs.type || null,
                height: attrs.height || null,
                width: attrs.width || null,
            },
            colors: scope.$eval(attrs.colors) || null,
            title: {
                style: {
                    display: 'none'
                }
            },
            xAxis: {
                //categories: ['{"-7 days"|date_format}','{"-6 days"|date_format}','{"-5 days"|date_format}','{"-4 days"|date_format}', '{"-3 days"|date_format}', '{"-2 days"|date_format}', '{"-1 day"|date_format}', '{$smarty.now|date_format}'],
                categories: scope.$eval(attrs.dates) || null,
                gridLineDashStyle: 'ShortDot',
                gridLineColor: "#C0C0C0",
                gridLineWidth: 1,
                labels: {
                    y: 27
                }
            },
            yAxis: {
                title: {
                    text: null
                },
                min: 0,
                gridLineDashStyle: 'ShortDot',
                gridLineColor: "#C0C0C0",
                gridLineWidth: 1
            },
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    shadow: false,
                    lineWidth: 3
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        this.x + ': ' + this.y + '</b>';
                }
            }
        };

        //Update when charts data changes
        scope.$watch(attrs.value, function (newVal, oldVal) {
            if (!newVal.length) return;
            // We need deep copy in order to NOT override original chart object.
            // This allows us to override chart data member and still the keep
            // our original renderTo will be the same
            var deepCopy = true;
            var newSettings = {};
            chartsDefaults.series = newVal;
            chartsDefaults.colors = scope.$eval(attrs.colors);
            chartsDefaults.xAxis.categories = scope.$eval(attrs.dates);
            console.log(chartsDefaults);
            chart = new Highcharts.Chart(chartsDefaults);
        });

    }
}
});

and this is how it used it obviously you would change "line" to bar:

<chart value="stats.sets" dates="stats.days" colors="stats.colors" type="line"></chart>

Collectives™ on Stack Overflow

Highcharts bargraph from json data in angularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related