https://cour16.com/admin/demo/js/flot-charts/line.js

1'use strict';
2
3$(document).ready(function(){
4
5    // Make some random data for Flot Line Chart
6    var data1 = [[1,60], [2,30], [3,50], [4,100], [5,10], [6,90], [7,85]];
7    var data2 = [[1,20], [2,90], [3,60], [4,40], [5,100], [6,25], [7,65]];
8    var data3 = [[1,100], [2,20], [3,60], [4,90], [5,80], [6,10], [7,5]];
9
10    // Create an Array push the data + Draw the bars
11    var barData = [
12        {
13            label: 'Tokyo',
14            data: data1,
15            color: '#edeff0'
16        },
17        {
18            label: 'Seoul',
19            data: data2,
20            color: '#8a99a0'
21        },
22        {
23            label: 'Beijing',
24            data: data3,
25            color: '#415158'
26        }
27    ]
28
29    // Let's create the chart
30    if ($('#chart-line')[0]) {
31        $.plot($("#chart-line"), barData, {
32            series: {
33                shadowSize: 0
34            },
35            grid : {
36                borderWidth: 1,
37                borderColor: '#31424b',
38                show : true,
39                hoverable : true
40            },
41
42            yaxis: {
43                tickColor: '#31424b',
44                tickDecimals: 0,
45                font :{
46                    lineHeight: 13,
47                    style: "normal",
48                    color: "#98a7ac"
49                },
50                shadowSize: 0
51            },
52
53            xaxis: {
54                tickColor: '#31424b',
55                tickDecimals: 0,
56                font :{
57                    lineHeight: 13,
58                    style: "normal",
59                    color: "#98a7ac"
60                },
61                shadowSize: 0
62            },
63
64            legend:{
65                container: '.flot-chart-legend--line',
66                noColumns: 5
67            }
68        });
69    }
70
71    // Tooltips for Flot Charts
72
73    if ($('.flot-chart')[0]) {
74        $('.flot-chart').bind('plothover', function (event, pos, item) {
75            if (item) {
76                var x = item.datapoint[0].toFixed(2),
77                    y = item.datapoint[1].toFixed(2);
78                $('.flot-tooltip').html(item.series.label + ' of ' + x + ' = ' + y).css({top: item.pageY+5, left: item.pageX+5}).show();
79            }
80            else {
81                $(".flot-tooltip").hide();
82            }
83        });
84
85        $("<div class='flot-tooltip'></div>").appendTo("body");
86    }
87});