https://frontiersemi.com/Designs/admin/js/sparkline-chart.js

1var Script = function () {
2
3    $(".sparkline").each(function(){
4        var $data = $(this).data();
5
6        $data.valueSpots = {'0:': $data.spotColor};
7
8        $(this).sparkline( $data.data || "html", $data,
9        {
10            tooltipFormat: '<span style="display:block; padding:0px 10px 12px 0px;">' +
11            '<span style="color: {{color}}">&#9679;</span> {{offset:names}} ({{percent.1}}%)</span>'
12        });
13
14
15
16
17    });
18
19//sparkline chart
20
21    $("#barchart").sparkline([5,3,6,7,5,6,4,2,3,4,6,8,9,10,8,6,5,7,6,5,4,7,4], {
22        type: 'bar',
23        height: '65',
24        barWidth: 8,
25        barSpacing: 5,
26        barColor: '#fff'
27//        tooltipFormat: '<span style="display:block; padding:0px 10px 12px 0px;">' +
28//            '<span style="color: {{color}}">&#9679;</span> {{offset:names}} ({{percent.1}}%)</span>'
29
30    });
31
32
33    $("#linechart").sparkline([1,5,3,7,9,3,6,4,7,9,7,6,2], {
34        type: 'line',
35        width: '300',
36        height: '75',
37        fillColor: '',
38        lineColor: '#fff',
39        lineWidth: 2,
40        spotColor: '#fff',
41        minSpotColor: '#fff',
42        maxSpotColor: '#fff',
43        highlightSpotColor: '#fff',
44        highlightLineColor: '#ffffff',
45        spotRadius: 4,
46        highlightLineColor: '#ffffff'
47//        tooltipFormat: '<span style="display:block; padding:0px 10px 12px 0px;">' +
48//            '<span style="color: {{color}}">&#9679;</span> {{offset:names}} ({{percent.1}}%)</span>'
49
50
51
52    });
53
54    $("#pie-chart").sparkline([2,1,1,1], {
55        type: 'pie',
56        width: '100',
57        height: '100',
58        borderColor: '#00bf00',
59        sliceColors: ['#41CAC0', '#A8D76F', '#F8D347', '#EF6F66']
60//        tooltipFormat: '<span style="display:block; padding:0px 10px 12px 0px;">' +
61//            '<span style="color: {{color}}">&#9679;</span> {{offset:names}} ({{percent.1}}%)</span>'
62    });
63
64    //work progress bar
65
66    $("#work-progress1").sparkline([5,6,7,5,9,6,4], {
67        type: 'bar',
68        height: '20',
69        barWidth: 5,
70        barSpacing: 2,
71        barColor: '#5fbf00'
72//        tooltipFormat: '<span style="display:block; padding:0px 10px 12px 0px;">' +
73//            '<span style="color: {{color}}">&#9679;</span> {{offset:names}} ({{percent.1}}%)</span>'
74    });
75
76    $("#work-progress2").sparkline([3,2,5,8,4,7,5], {
77        type: 'bar',
78        height: '22',
79        barWidth: 5,
80        barSpacing: 2,
81        barColor: '#58c9f1'
82//        tooltipFormat: '<span style="display:block; padding:0px 10px 12px 0px;">' +
83//            '<span style="color: {{color}}">&#9679;</span> {{offset:names}} ({{percent.1}}%)</span>'
84    });
85
86    $("#work-progress3").sparkline([1,6,9,3,4,8,5], {
87        type: 'bar',
88        height: '22',
89        barWidth: 5,
90        barSpacing: 2,
91        barColor: '#8075c4'
92//        tooltipFormat: '<span style="display:block; padding:0px 10px 12px 0px;">' +
93//            '<span style="color: {{color}}">&#9679;</span> {{offset:names}} ({{percent.1}}%)</span>'
94    });
95
96    $("#work-progress4").sparkline([9,4,9,6,7,4,3], {
97        type: 'bar',
98        height: '22',
99        barWidth: 5,
100        barSpacing: 2,
101        barColor: '#ff6c60'
102//        tooltipFormat: '<span style="display:block; padding:0px 10px 12px 0px;">' +
103//            '<span style="color: {{color}}">&#9679;</span> {{offset:names}} ({{percent.1}}%)</span>'
104    });
105
106    $("#work-progress5").sparkline([6,8,5,7,6,8,3], {
107        type: 'bar',
108        height: '22',
109        barWidth: 5,
110        barSpacing: 2,
111        barColor: '#41cac0'
112//        tooltipFormat: '<span style="display:block; padding:0px 10px 12px 0px;">' +
113//            '<span style="color: {{color}}">&#9679;</span> {{offset:names}} ({{percent.1}}%)</span>'
114    });
115
116    $("#pie-chart2").sparkline([2,1,1,1], {
117        type: 'pie',
118        width: '250',
119        height: '125',
120        sliceColors: ['#41CAC0', '#A8D76F', '#F8D347', '#EF6F66']
121//        tooltipFormat: '<span style="display:block; padding:0px 10px 12px 0px;">' +
122//    '<span style="color: {{color}}">&#9679;</span> {{offset:names}} ({{percent.1}}%)</span>'});
123
124    });

125
126}();