Search code examples
javascripthtmlchartsraphaelgraphael

Raphy Charts - TypeError

I am trying to use Raphy Charts but continuously receiving the following error message:"TypeError: 'null' is not an object (evaluating 'a.style') raphy-chart.min.js:31:452"

This is the code (on Github):

<!DOCTYPE HTML>
<html>
  <head>
     <script type='text/javascript' src='vendor/js/jquery.min.js'></script>
     <script type='text/javascript' src='vendor/js/raphael.min.js'></script>
     <script type='text/javascript' src='vendor/js/raphy-charts.min.js'></script>
     <script>
      var progress1 = new Charts.CircleProgress('progress-1', 'Sales', 80, 
      {
       font_color: "#fff",
       fill_color: "#222",
       label_color: "#333",
       text_shadow: "rgba(0,0,0,.4)",
       stroke_color: "#6a329e"
      });

      progress1.draw()
     </script>
  </head>
  <body>
  <div id='progress-1' style='width: 300px; height: 100px;'></div>
  </body>
</html>

Thank you in advance!

Solution

  • Script is referencing div with id progres-1 before page is loaded. Script has to be moved after div element:

    <div id='progress-1' style='width: 300px; height: 250px;'></div>

<script>
var progress1 = new Charts.CircleProgress('progress-1', 'Sales', 80, 
{
    font_color: "#fff",
    fill_color: "#222",
    label_color: "#333",
    text_shadow: "rgba(0,0,0,.4)",
    stroke_color: "#6a329e"
});

progress1.draw()
</script>

    Height was set too low so only part of chart was shown. Changed to 250px