Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Can not get a chart.js to show in the browser?

Hello,

I am trying to learn how to create a chart using chart.js. I have followed a tutorial, but could not get my chart to appear in the browser. consequently I have looked up some code examples of chart.js, and can not get these to show either. If anyone can see what I have done wrong in my layout to stop this from working, can you please let me know. Thank you in advance.

``` <!doctype html> <html lang = "en">

  <head>
  <meta charset="utf-8">
  <link href="normalise.css" rel="stylesheet" type="text/css" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-    
    scale=1, user-scalable=0"/>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600'    
  rel='stylesheet' type='text/css'>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title>WAD</title>
  </head>

<body>
    <header>
      <h1>Dashboard</h1>
       <input id="search" type="text" placeholder="Search">
     </header>

    <div id="graphContainer"> <!--opening graphContainer-->

        <div id="lineGraph"> <!--opening lineGraph-->

         <canvas id="canvas-2010" width="800" style="width: 100% !important; height: auto 
          !important;"></canvas>
            <script>
                options = {
                    scaleShowLabels : false
                }

                var lineChartData = {
                labels :    ["Jan","Feb","Mar","Apr","Maj","Jun","Jul", "Aug", "Sep", "Okt", "Nov", 
                    "Dec"],
                datasets : [{
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                     ***showScale: false ,***
                    pointStrokeColor : "#fff",
                    data : [0,0,0,0,0,0,0,0,0,0,-6147.20,22333.57]
                }]                  
                }

                var myLine = new Chart(document.getElementById("canvas-2010").getContext("2d"), 
                 options).Line(lineChartData);
            </script> 


        </div><!--closing lineGraph-->
        </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

</body>
</html>

1 Answer

Serhii Lihus
Serhii Lihus
6,352 Points

Hi there Tracy!

ะกould you copy and paste here what does your console in browser says or what it shows. Remember to watch inside console, because it always shows errors if you missing something, or if you mistype something. Depending on error community can give you a solution to your problem.

Best regards.