Wrapping a HighChart in AngularJS

Question

I am new to HighCharts and I am having a hard time creating a directive out of my HighChart JS. I am getting the following error:

angular.min.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=myapp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.7%2Fangular.min.js%3A19%3A463)

Here is my code

https://jsfiddle.net/y5va00xt/

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--<div id="container" style="max-width: 400px; height: 400px; margin: 0 auto"></div>-->
<div ng-app="myapp">
    <div ng-controller="myctrl">


        <highchart id="chart1" config="chartConfig"></highchart>
    </div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="js/highChartStyle.js"></script>
<script src="js/barChartHighChart.js"></script>
</html>

highChartStyle.js

Highcharts.theme = {
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
        '#FF9655', '#FFF263', '#6AF9C4'],
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, 'rgb(0, 0, 0)'],
                [1, 'rgb(0, 0, 0)']
            ]
        },
    },
    title: {
        style: {
            color: '#FFF',
            font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
        }
    },
    subtitle: {
        style: {
            color: '#FFF',
            font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
        }
    },
    credits: {
        enabled: false
    },

    legend: {
        itemStyle: {
            font: '9pt Trebuchet MS, Verdana, sans-serif',
            color: 'FFF'
        },
        itemHoverStyle:{
            color: 'FFFFFF'
        }
    }
};

// Apply the theme
Highcharts.setOptions(Highcharts.theme);

barChartHighChart.js

var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {
$(function () {

    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!

    var yyyy = today.getFullYear();
    if(dd<10){
        dd='0'+dd
    }
    if(mm<10){
        mm='0'+mm
    }
    var today = mm+'/'+dd+'/'+yyyy;
    //var lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7)

    $('#container').highcharts({
        title: {
            text: 'Twitter Data'
        },

        xAxis: {
            categories: [today]
        },
        labels: {
            items: [{
                html: 'Total tweets by day',
                style: {
                    left: '50px',
                    top: '5px',
                    color: (Highcharts.darktheme && Highcharts.theme.textColor) || '#FFF'
                }
            }]
        },
        series: [{
            type: 'column',
            name: 'Tweets',
            data: [1113, 2000, 1987, 345, 4444, 576]
        }, {
            type: 'spline',
            name: 'Total',
            data: [1113, 2000, 1987, 345, 4444, 576],
            marker: {
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[3],
                fillColor: 'white'
            }
        }, {
            type: '',
            name: 'Total Tweets',
            data: [{
                name: 'Chart for week',
                y: 13,
                color: Highcharts.getOptions().colors[0] // Jane's color
            },

            ],
            center: [100, 80],
            size: 100,
            showInLegend: false,
            dataLabels: {
                enabled: false
            },

        }]
    });
})});

CozyAzure · Accepted Answer · 2015-10-02 15:46:35Z

0

You did not load your Angular Version of highchart's js files. Add in this line of code according to your file-path-to highchar-ng:

//make sure your highchart-ng.js is under the js direcotry
//or change accordingly
<script src="js/highchart-ng.js></script>

Friendly advice : Do use non-minified version of javascript files so that you can see the error logs clearly.

answered Oct 2, 2015 at 15:46

CozyAzure

8,4987 gold badges39 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2402107 Over a year ago

This did not change anything. I have attached the updated jfiddle to show. jsfiddle.net/y5va00xt/1

Courtney B Reid Over a year ago

To help clarify: there is probably another file missing in your project. You will either need to install highcharts-ng by using bower install highcharts-ng or provide reference to the main code for highcharts-ng in some other way. Plunkr for example code

CozyAzure Over a year ago

thanks @CourtneyBReid for making the answer clearer!

Collectives™ on Stack Overflow

Wrapping a HighChart in AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related