javascript-learning/highcharts.html at master · CooperUnion/javascript-learning · GitHub

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
41
42
43
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Chart</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <style>

    </style>
    <script>
      $(function () {
          $('#container').highcharts({
              chart: {
                  type: 'bar'
              },
              title: {
                  text: 'Fruit Consumption'
              },
              xAxis: {
                  categories: ['Apples', 'Bananas', 'Oranges']
              },
              yAxis: {
                  title: {
                      text: 'Fruit eaten'
                  }
              },
              series: [{
                  name: 'Jane',
                  data: [1, 0, 4]
              }, {
                  name: 'John',
                  data: [5, 7, 3]
              }]
          });
      });
    </script>
  </head>
  <body>
    <div id="container" style="width:100%; height:400px;"></div>
  </body>
</html>