MyChart/scatter.php at master · Zubs/MyChart · 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
<div class="col-6">
    <div class="card text-center">
      <canvas id="chart8"></canvas>
      <script>
        var ctx = document.getElementById('chart8').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'scatter',

            // The data for our dataset
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'My First dataset',
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: 'white',
                    data: [{
                        x: 5,
                        y: 25,
                    },
                    {
                        x: 15,
                        y: 45,
                    },
                    {
                        x: 30,
                        y: 50,
                    },
                    {
                        x: 40,
                        y: 10,
                    },
                    {
                        x: 50,
                        y: 20,
                    },
                    {
                        x: 15,
                        y: 25,
                    },
                    {
                        x: 25,
                        y: 35,
                    },
                    ]
                }]
            },

            // Configuration options go here
            options: {}
        });
      </script>
      <h2 class="card-header mt-5">Scatter Chart</h2>
    </div>
</div>