Search code examples
javascriptangularjsgoogle-visualizationpygooglechart

Google Charts Geochart colorAxis doesn't show gradient

I have an angularjs app and I plot google charts on this using the ng-google-chart directive. The issue here is this: Legend not showing gradient

I am using the following code `function drawRegionsMap() {

    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700]
    ]);

      var options = {};

    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

    chart.draw(data, options);
  }`

This works perfectly fine when I try in fiddle but not my app. I know this is a vague issue and might be particular to my app. But still if anyone gets anything from the top of their minds, or have experienced this before, it would be of great help if you can share something. Thanks in advance.

Solution

  • The problem is <base> tag in head section. Simpliest solution is removing it. More complex one - use callback function to fix when chart will be ready:

    <!DOCTYPE html>
<html>
    <head>
        <base href="/">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://www.google.com/jsapi"></script>
    </head>
    <body>
        <div id="chart" style="height:500px;width:900px;"></div>

        <script type="text/javascript">
            google.load("visualization", "1", {
                callback: function () {


                    function fixGoogleCharts(element) {
                        return function () {
                            $(element).find('svg').each(function () {
                                $(this).find("g").each(function () {
                                    if ($(this).attr('clip-path')) {
                                        if ($(this).attr('clip-path').indexOf('url(#') == -1)
                                            return;
                                        $(this).attr('clip-path', 'url(' + document.location + $(this).attr('clip-path').substring(4))
                                    }
                                });
                                $(this).find("rect").each(function () {
                                    if ($(this).attr('fill')) {
                                        if ($(this).attr('fill').indexOf('url(#') == -1)
                                            return;
                                        $(this).attr('fill', 'url(' + document.location + $(this).attr('fill').substring(4))
                                    }
                                });
                            });
                        };
                    }

                    var chartElement = document.getElementById('chart');
                    var data = google.visualization.arrayToDataTable([
                        ['Country', 'Popularity'],
                        ['Germany', 200],
                        ['United States', 300],
                        ['Brazil', 400],
                        ['Canada', 500],
                        ['France', 600],
                        ['RU', 700]
                    ]);
                    var options = {};

                    var chart = new google.visualization.GeoChart(chartElement);
                    // uncomment next string to fix geochart legend gradient
                    //google.visualization.events.addListener(chart, 'ready', fixGoogleCharts(chartElement));
                    chart.draw(data, options);
                },
                packages: ["geochart"]
            });
        </script>
    </body>
</html>

    This API issue is discussing here. Be sure to put event listener before calling chart.draw