Google Graphs IE11 appendChild not working

Question

I'm using a Google Graphs Scatter Chart to make the following chart .

This works fine in browsers like Chrome but when it comes to IE(V11) I get the following error Unable to get property 'children' of undefined or null reference. The graph still loads fine but the circles are solid colours.

Now I know this is to do with the code used for styling the circles (See Below)

google.visualization.events.addListener(chart, 'ready', function(){
                            $('circle').each(function() {
              var $c = $(this);

              var circles = document.createElementNS("http://www.w3.org/2000/svg", "circle");
              circles.setAttribute("cx",$c.attr('cx'));
              circles.setAttribute("cy",$c.attr('cy'));
              circles.setAttribute("r",$c.attr('r'));
              circles.setAttribute("fill",$c.attr('fill'));
              circles.setAttribute("stroke",'white');                  
              circles.setAttribute("stroke-width",'3');                  
              this.parentElement.appendChild(circles);

              circles = document.createElementNS("http://www.w3.org/2000/svg", "circle");
              circles.setAttribute("cx",$c.attr('cx'));
              circles.setAttribute("cy",$c.attr('cy'));
              circles.setAttribute("r", "4");
              circles.setAttribute("fill","white");
              this.parentElement.appendChild(circles);                  
                            })


       }); 

I need a way to style the circles in IE11+. I've also created a jsfiddle for the chart.

Thanks

Answer 1

You can use a style role to format the points, rather than modifying the SVG manually...

google.load('visualization', '1', {'packages': ['corechart'], 'callback': drawChart});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Age', 'Weight', {type: 'string', role: 'style'}],
    [ 8,     12,       'stroke-color: red;    stroke-width: 3; fill-color: white;'],
    [ 4,     15,       'stroke-color: orange; stroke-width: 3; fill-color: white;'],
    [ 11,    14,       'stroke-color: yellow; stroke-width: 3; fill-color: white;'],
    [ 4,     5,        'stroke-color: green;  stroke-width: 3; fill-color: white;'],
    [ 3,     3.5,      'stroke-color: blue;   stroke-width: 3; fill-color: white;'],
    [ 6.5,   7,        'stroke-color: violet; stroke-width: 3; fill-color: white;']
  ]);

  var options = {
    title: 'Age vs. Weight comparison',
    hAxis: {title: 'Age', minValue: 0, maxValue: 15},
    vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
    legend: 'none',
    pointSize: 10
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}

<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>