examples/dashboard/templates/index.html


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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8">
        <title>Vainglory API demo</title>
    </head>
    <body>
        <div id="gameType" style="height: 100%; width: 400px;"></div>
        <div id="players" style="height: 100%; width: 400px;"></div>
        <div id="picks" style="height: 100%; width: 400px;"></div>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script>
            $(function () {
                Highcharts.chart("gameType", {
                    chart: {
                        type: "pie"
                    },
                    title:  {
                        text: "Game modes over the last {{ number }} matches"
                    },
                    series: [{
                        data: {{ gameModes|tojson|safe }}
                    }]
                });
                Highcharts.chart("players", {
                    chart: {
                        type: "bar"
                    },
                    xAxis: {
                        categories: ["matches"]
                    },
                    title:  {
                        text: "Most active players"
                    },
                    series: {{ players|tojson|safe }}
                });
                Highcharts.chart("picks", {
                    chart: {
                        type: "column"
                    },
                    title:  {
                        text: "Popular picks"
                    },
                    plotOptions: {
                        column: {
                            stacking: "normal"
                        }
                    },
                    xAxis: {
                        categories: {{ heroes|tojson|safe }}
                    },
                    series: {{ picks|tojson|safe }}
                });
            });
        </script>
    </body>
</html>