2017/03/25

How to turn JSFiddle example into standalone code

This post is about how to turn JSFiddle example into standalone code.


Source: https://jsfiddle.net/red_stapler/mfvmoy64/



Code


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
  <head>
    <!-- For latest CDN version of Chart.js, visit https://cdnjs.com/libraries/Chart.js -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
  </head>

  <body>
    <canvas id="myChart" width="200" height="100"></canvas>

    <script>

      var canvas = document.getElementById('myChart');
      var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [65, 59, 30, 81, 56, 55, 40],
        }
        ]
      };
      var option = {
            animation: {
       duration:5000
            }
      };
      var myBarChart = Chart.Bar(canvas,{
            data:data,
            options:option
      });
      
    </script>
  </body>
</html>

Note,

 1. The code in the HTML section of JSFiddle goes to the <body> section (line 9);
2. The code in the JAVASCRIPT section of JSFiddle goes to the <script> section (line 13 ~ 36) in <body>;
3. The External Resources (left side menu, https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js) goes to the <script> section in <head>.

Posted by at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)