Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
9 lars 1 
var EcommerceDashboard = function() {
2 
 
3 
    function showTooltip(x, y, labelX, labelY) {
4 
        $('<div id="tooltip" class="chart-tooltip">' + (labelY.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')) + 'USD<\/div>').css({
5 
            position: 'absolute',
6 
            display: 'none',
7 
            top: y - 40,
8 
            left: x - 60,
9 
            border: '0px solid #ccc',
10 
            padding: '2px 6px',
11 
            'background-color': '#fff'
12 
        }).appendTo("body").fadeIn(200);
13 
    }
14 
 
15 
    var initChart1 = function() {
16 
 
17 
        var data = [
18 
            ['01/2013', 4],
19 
            ['02/2013', 8],
20 
            ['03/2013', 10],
21 
            ['04/2013', 12],
22 
            ['05/2013', 2125],
23 
            ['06/2013', 324],
24 
            ['07/2013', 1223],
25 
            ['08/2013', 1365],
26 
            ['09/2013', 250],
27 
            ['10/2013', 999],
28 
            ['11/2013', 390]
29 
        ];
30 
 
31 
        var plot_statistics = $.plot(
32 
            $("#statistics_1"), [{
33 
                data: data,
34 
                lines: {
35 
                    fill: 0.6,
36 
                    lineWidth: 0
37 
                },
38 
                color: ['#f89f9f']
39 
            }, {
40 
                data: data,
41 
                points: {
42 
                    show: true,
43 
                    fill: true,
44 
                    radius: 5,
45 
                    fillColor: "#f89f9f",
46 
                    lineWidth: 3
47 
                },
48 
                color: '#fff',
49 
                shadowSize: 0
50 
            }], {
51 
 
52 
                xaxis: {
53 
                    tickLength: 0,
54 
                    tickDecimals: 0,
55 
                    mode: "categories",
56 
                    min: 2,
57 
                    font: {
58 
                        lineHeight: 15,
59 
                        style: "normal",
60 
                        variant: "small-caps",
61 
                        color: "#6F7B8A"
62 
                    }
63 
                },
64 
                yaxis: {
65 
                    ticks: 3,
66 
                    tickDecimals: 0,
67 
                    tickColor: "#f0f0f0",
68 
                    font: {
69 
                        lineHeight: 15,
70 
                        style: "normal",
71 
                        variant: "small-caps",
72 
                        color: "#6F7B8A"
73 
                    }
74 
                },
75 
                grid: {
76 
                    backgroundColor: {
77 
                        colors: ["#fff", "#fff"]
78 
                    },
79 
                    borderWidth: 1,
80 
                    borderColor: "#f0f0f0",
81 
                    margin: 0,
82 
                    minBorderMargin: 0,
83 
                    labelMargin: 20,
84 
                    hoverable: true,
85 
                    clickable: true,
86 
                    mouseActiveRadius: 6
87 
                },
88 
                legend: {
89 
                    show: false
90 
                }
91 
            }
92 
        );
93 
 
94 
        var previousPoint = null;
95 
 
96 
        $("#statistics_1").bind("plothover", function(event, pos, item) {
97 
            $("#x").text(pos.x.toFixed(2));
98 
            $("#y").text(pos.y.toFixed(2));
99 
            if (item) {
100 
                if (previousPoint != item.dataIndex) {
101 
                    previousPoint = item.dataIndex;
102 
 
103 
                    $("#tooltip").remove();
104 
                    var x = item.datapoint[0].toFixed(2),
105 
                        y = item.datapoint[1].toFixed(2);
106 
 
107 
                    showTooltip(item.pageX, item.pageY, item.datapoint[0], item.datapoint[1]);
108 
                }
109 
            } else {
110 
                $("#tooltip").remove();
111 
                previousPoint = null;
112 
            }
113 
        });
114 
 
115 
    }
116 
 
117 
    var initChart2 = function() {
118 
 
119 
        var data = [
120 
            ['01/2013', 10],
121 
            ['02/2013', 0],
122 
            ['03/2013', 10],
123 
            ['04/2013', 12],
124 
            ['05/2013', 212],
125 
            ['06/2013', 324],
126 
            ['07/2013', 122],
127 
            ['08/2013', 136],
128 
            ['09/2013', 250],
129 
            ['10/2013', 99],
130 
            ['11/2013', 190]
131 
        ];
132 
 
133 
        var plot_statistics = $.plot(
134 
            $("#statistics_2"), [{
135 
                data: data,
136 
                lines: {
137 
                    fill: 0.6,
138 
                    lineWidth: 0
139 
                },
140 
                color: ['#BAD9F5']
141 
            }, {
142 
                data: data,
143 
                points: {
144 
                    show: true,
145 
                    fill: true,
146 
                    radius: 5,
147 
                    fillColor: "#BAD9F5",
148 
                    lineWidth: 3
149 
                },
150 
                color: '#fff',
151 
                shadowSize: 0
152 
            }], {
153 
 
154 
                xaxis: {
155 
                    tickLength: 0,
156 
                    tickDecimals: 0,
157 
                    mode: "categories",
158 
                    min: 2,
159 
                    font: {
160 
                        lineHeight: 14,
161 
                        style: "normal",
162 
                        variant: "small-caps",
163 
                        color: "#6F7B8A"
164 
                    }
165 
                },
166 
                yaxis: {
167 
                    ticks: 3,
168 
                    tickDecimals: 0,
169 
                    tickColor: "#f0f0f0",
170 
                    font: {
171 
                        lineHeight: 14,
172 
                        style: "normal",
173 
                        variant: "small-caps",
174 
                        color: "#6F7B8A"
175 
                    }
176 
                },
177 
                grid: {
178 
                    backgroundColor: {
179 
                        colors: ["#fff", "#fff"]
180 
                    },
181 
                    borderWidth: 1,
182 
                    borderColor: "#f0f0f0",
183 
                    margin: 0,
184 
                    minBorderMargin: 0,
185 
                    labelMargin: 20,
186 
                    hoverable: true,
187 
                    clickable: true,
188 
                    mouseActiveRadius: 6
189 
                },
190 
                legend: {
191 
                    show: false
192 
                }
193 
            }
194 
        );
195 
 
196 
        var previousPoint = null;
197 
 
198 
        $("#statistics_2").bind("plothover", function(event, pos, item) {
199 
            $("#x").text(pos.x.toFixed(2));
200 
            $("#y").text(pos.y.toFixed(2));
201 
            if (item) {
202 
                if (previousPoint != item.dataIndex) {
203 
                    previousPoint = item.dataIndex;
204 
 
205 
                    $("#tooltip").remove();
206 
                    var x = item.datapoint[0].toFixed(2),
207 
                        y = item.datapoint[1].toFixed(2);
208 
 
209 
                    showTooltip(item.pageX, item.pageY, item.datapoint[0], item.datapoint[1]);
210 
                }
211 
            } else {
212 
                $("#tooltip").remove();
213 
                previousPoint = null;
214 
            }
215 
        });
216 
 
217 
    }
218 
 
219 
    return {
220 
 
221 
        //main function
222 
        init: function() {
223 
            initChart1();
224 
 
225 
            $('#statistics_orders_tab').on('shown.bs.tab', function(e) {
226 
                initChart2();
227 
            });
228 
        }
229 
 
230 
    };
231 
 
232 
}();
233 
 
234 
jQuery(document).ready(function() {
235 
   EcommerceDashboard.init();
236 
});