Angular Ui-router lazyloading Google Charts

Question

I am trying to lazyload the following two scripts into an Angular ui-router partial view.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawVisualization);

    function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
    ['2004/05',  165,      938,         522,             998,           450,      614.6],
    ['2005/06',  135,      1120,        599,             1268,          288,      682],
    ['2006/07',  157,      1167,        587,             807,           397,      623],
    ['2007/08',  139,      1110,        615,             968,           215,      609.4],
    ['2008/09',  136,      691,         629,             1026,          366,      569.6]
  ]);

  var options = {
    title : 'Monthly Coffee Production by Country',
    vAxis: {title: "Cups"},
    hAxis: {title: "Month"},
    seriesType: "bars",
    series: {5: {type: "line"}}
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
    </script>

I was able to accomplish this using the directive found here.

The issue is that the second script works when loaded normally, but does not work when lazyloaded. Instead of finding the div with id='chart-div' and replacing it with the google chart, it just produces a blank page. I have tried it with a setTimeout to ensure the first script has loaded, and the console is showing up error free.

Anyone familiar with the google charts api, and why their second script (listed above) does not work with the lazyloading directive I'm using?

Answer 1

Edit: Adding additional detail to solution.

Solution:

1. Add google charts wrapper Link to Directive

2. Create custom directive to insert div element that holds chart. If the html is inserted directly into the partial without the use of a directive, any HTML after the div will be erased.

sample directive to insert chart.

app.directive('overviewChart', function () {
    return {
        restrict: 'E',
        template: '<div google-chart chart="chart" style="{{chart.cssStyle}}"/>'
    };
});

3. Add chart data to partial controller.

Sample chart data to be added to controller:

$scope.chart = {
        "type": "ColumnChart",
        "cssStyle": "height:500px; width:100%;",
        "data": {
            "cols": [
                {
                    "id": "month",
                    "label": "Month",
                    "type": "string",
                    "p": {}
                },
                {
                    "id": "laptop-id",
                    "label": "Laptop",
                    "type": "number",
                    "p": {}
                },
                {
                    "id": "desktop-id",
                    "label": "Desktop",
                    "type": "number",
                    "p": {}
                },
                {
                    "id": "server-id",
                    "label": "Server",
                    "type": "number",
                    "p": {}
                },
                {
                    "id": "cost-id",
                    "label": "Shipping",
                    "type": "number"
                }
            ],
            "rows": [
                {
                    "c": [
                        {
                            "v": "January"
                        },
                        {
                            "v": 19,
                            "f": "42 items"
                        },
                        {
                            "v": 12,
                            "f": "Ony 12 items"
                        },
                        {
                            "v": 7,
                            "f": "7 servers"
                        },
                        {
                            "v": 4
                        }
                    ]
                },
                {
                    "c": [
                        {
                            "v": "February"
                        },
                        {
                            "v": 13
                        },
                        {
                            "v": 1,
                            "f": "1 unit (Out of stock this month)"
                        },
                        {
                            "v": 12
                        },
                        {
                            "v": 2
                        }
                    ]
                },
                {
                    "c": [
                        {
                            "v": "March"
                        },
                        {
                            "v": 24
                        },
                        {
                            "v": 0
                        },
                        {
                            "v": 11
                        },
                        {
                            "v": 6
                        }
                    ]
                }
            ]
        },
        "options": {
            "title": "Sales per month",
            "isStacked": "true",
            "fill": 20,
            "displayExactValues": true,
            "vAxis": {
                "title": "Sales unit",
                "gridlines": {
                    "count": 6
                }
            },
            "hAxis": {
                "title": "Date"
            }
        },
        "formatters": {},
        "displayed": true
    };

4. Insert custom directive into partial html.