Web-Programming-Assignment/graph.js at master · junzai97/Web-Programming-Assignment · 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var config1 = {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'Books Own',
      backgroundColor: window.chartColors.red,
      borderColor: window.chartColors.red,
      data: [
        5, 10, 20, 40, 50, 70,100
      ],
      fill: false,
    }, {
      label: 'Loans Activity',
      fill: false,
      backgroundColor: window.chartColors.blue,
      borderColor: window.chartColors.blue,
      data: [
        1,2,3,4,5,6,9
      ],
    }]
  },
  options: {
    responsive: true,
    /*title: {
      display: true,
      text: ''
    },*/
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Month'
        }
      }],
      yAxes: [{
        display: true,
        scaleLabel: {
          display: false, // axis varries according to data
          labelString: 'Value'
        }
      }]
    }
  }
};

var config2 = {
  type: 'pie',
  data: {
    datasets: [{
      data: [
        6,7,8,3
      ],
      backgroundColor: [
        window.chartColors.red,
        window.chartColors.orange,
        window.chartColors.yellow,
        window.chartColors.green,
        window.chartColors.blue,
      ],
      label: 'Dataset 1'
    }],
    labels: [
      'Fantasy',
      'Sci-Fi',
      'Mystery',
      'Romance',
    ]
  },
  options: {
    responsive: true
  }
};

var config3 = {
  type: 'pie',
  data: {
    datasets: [{
      data: [
        4,1,3,1
      ],
      backgroundColor: [
        window.chartColors.red,
        window.chartColors.orange,
        window.chartColors.yellow,
        window.chartColors.green,
        window.chartColors.blue,
      ],
      label: 'Dataset 1'
    }],
    labels: [
      'Fantasy',
      'Sci-Fi',
      'Mystery',
      'Romance',
    ]
  },
  options: {
    responsive: true
  }
};

window.onload = function() {
  var ctx1 = document.getElementById('canvas').getContext('2d');
  var ctx2 = document.getElementById('chart-area').getContext('2d');
  var ctx3 = document.getElementById('chart-area2').getContext('2d');
  window.myLine = new Chart(ctx1, config1);
  window.myPie = new Chart(ctx2, config2)
  window.myPie = new Chart(ctx3, config3)
};