156
156
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li style=\"display: inline; margin-right: 24px; font-weight: bold;\"><span style=\"color:<%=datasets[i].strokeColor%>\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
157
157
{ % endverbatim % }
158
158
}
159
- var g_electricity_chart_instance1 = undefined ;
160
- var g_electricity_chart_instance2 = undefined ;
161
- var g_electricity_returned_chart_instance1 = undefined ;
162
- var g_electricity_returned_chart_instance2 = undefined ;
163
- var g_gas_chart_instance1 = undefined ;
164
- var g_gas_chart_instance2 = undefined ;
159
+
160
+ var g_chart_instances = {
161
+ electricity_1 : undefined ,
162
+ electricity_2 : undefined ,
163
+ electricity_returned_1 : undefined ,
164
+ electricity_returned_2 : undefined ,
165
+ gas_1 : undefined ,
166
+ gas_2 : undefined ,
167
+ }
165
168
166
169
var g_datepicker_view_mode = 'months' ;
167
170
277
280
'level' : g_datepicker_view_mode
278
281
} ,
279
282
} ) . done ( function ( response ) {
280
- var capabilities = response . capabilities ;
281
- var data = response . data ;
283
+ var charts = response . charts ;
282
284
283
- if ( capabilities . electricity )
285
+ if ( charts . electricity )
284
286
{
285
- render_electricity_chart (
286
- data . x ,
287
- data . electricity1 ,
288
- data . electricity2 ,
289
- id_postfix
287
+ render_chart (
288
+ 'electricity_' + id_postfix ,
289
+ "#electricity-chart-holder" ,
290
+ "#electricity-chart" + id_postfix ,
291
+ "#electricity-chart-legend" + id_postfix ,
292
+ charts . electricity
290
293
) ;
291
294
}
292
295
293
- if ( capabilities . electricity )
296
+ if ( charts . electricity_returned )
294
297
{
295
- render_electricity_returned_chart (
296
- data . x ,
297
- data . electricity1 ,
298
- data . electricity2 ,
299
- id_postfix
300
- ) ;
298
+ render_chart (
299
+ 'electricity_returned_' + id_postfix ,
300
+ "#electricity-returned-chart-holder" ,
301
+ "#electricity-returned-chart" + id_postfix ,
302
+ "#electricity-returned-chart-legend" + id_postfix ,
303
+ charts . electricity_returned
304
+ ) ;
301
305
}
302
-
303
- if ( capabilities . gas )
306
+
307
+ if ( charts . gas )
304
308
{
305
- render_gas_chart (
306
- data . x ,
307
- data . gas ,
308
- id_postfix
309
+ render_chart (
310
+ 'gas_' + id_postfix ,
311
+ "#gas-chart-holder" ,
312
+ "#gas-chart" + id_postfix ,
313
+ null ,
314
+ charts . gas
309
315
) ;
310
316
}
311
317
} ) ;
312
318
}
313
319
314
- function render_electricity_chart ( labels , electricity1 , electricity2 , id_postfix )
320
+ function render_chart ( global_instance_key , holder_id , chart_id , legend_id , chart_info )
315
321
{
316
322
var data = {
317
- labels : labels ,
318
- datasets : [ {
319
- data : electricity1 ,
320
- label : "{% trans 'Electricity 1 (low tariff)' %}" ,
321
- fillColor : "rgba({{frontend_settings.electricity_delivered_alternate_color|hex_to_rgb}},0.1)" ,
322
- strokeColor : "rgba({{frontend_settings.electricity_delivered_alternate_color|hex_to_rgb}},1)" ,
323
- pointColor : "rgba({{frontend_settings.electricity_delivered_alternate_color|hex_to_rgb}},1)" ,
324
- pointStrokeColor : "#fff" ,
325
- pointHighlightFill : "#fff" ,
326
- pointHighlightStroke : "rgba(255,0,0,1)"
327
- } , {
328
- data : electricity2 ,
329
- label : "{% trans 'Electricity 2 (high tariff)' %}" ,
330
- fillColor : "rgba({{frontend_settings.electricity_delivered_color|hex_to_rgb}},0.1)" ,
331
- strokeColor : "rgba({{frontend_settings.electricity_delivered_color|hex_to_rgb}},1)" ,
332
- pointColor : "rgba({{frontend_settings.electricity_delivered_color|hex_to_rgb}},1)" ,
333
- pointStrokeColor : "#fff" ,
334
- pointHighlightFill : "#fff" ,
335
- pointHighlightStroke : "rgba(255,0,0,1)"
336
- } ]
323
+ labels : chart_info . labels ,
324
+ datasets : chart_info . datasets
337
325
} ;
338
326
339
- if ( window [ 'g_electricity_chart_instance' + id_postfix ] )
327
+ if ( g_chart_instances [ global_instance_key ] )
340
328
{
341
- window [ 'g_electricity_chart_instance' + id_postfix ] . destroy ( ) ;
329
+ g_chart_instances [ global_instance_key ] . destroy ( ) ;
342
330
}
343
331
344
- $ ( "#electricity-chart-holder" ) . show ( ) ;
345
-
346
- var ctx = $ ( "#electricity-chart" + id_postfix ) . get ( 0 ) . getContext ( "2d" ) ;
347
- ctx . canvas . height = $ ( "#electricity-chart" + id_postfix ) . parent ( ) . height ( ) ;
348
- window [ 'g_electricity_chart_instance' + id_postfix ] = new Chart ( ctx ) . Line ( data , line_options ) ;
349
- $ ( "#electricity-chart-legend" + id_postfix ) . html ( window [ 'g_electricity_chart_instance' + id_postfix ] . generateLegend ( ) ) ;
350
- }
351
-
352
- function render_electricity_returned_chart ( labels , electricity1_returned , electricity2_returned , id_postfix )
353
- {
354
- var data = {
355
- labels : labels ,
356
- datasets : [ {
357
- data : electricity1_returned ,
358
- label : "{% trans 'Electricity 1 returned (low tariff)' %}" ,
359
- fillColor : "rgba({{frontend_settings.electricity_returned_alternate_color|hex_to_rgb}},0.1)" ,
360
- strokeColor : "rgba({{frontend_settings.electricity_returned_alternate_color|hex_to_rgb}},1)" ,
361
- pointColor : "rgba({{frontend_settings.electricity_returned_alternate_color|hex_to_rgb}},1)" ,
362
- pointStrokeColor : "#fff" ,
363
- pointHighlightFill : "#fff" ,
364
- pointHighlightStroke : "rgba(200,200,100,1)"
365
- } , {
366
- data : electricity2_returned ,
367
- label : "{% trans 'Electricity 1 returned (high tariff)' %}" ,
368
- fillColor : "rgba({{frontend_settings.electricity_returned_color|hex_to_rgb}},0.1)" ,
369
- strokeColor : "rgba({{frontend_settings.electricity_returned_color|hex_to_rgb}},1)" ,
370
- pointColor : "rgba({{frontend_settings.electricity_returned_color|hex_to_rgb}},1)" ,
371
- pointStrokeColor : "#fff" ,
372
- pointHighlightFill : "#fff" ,
373
- pointHighlightStroke : "rgba(39,194,76,1)"
374
- } ]
375
- } ;
376
-
377
- if ( window [ 'g_electricity_returned_chart_instance' + id_postfix ] )
378
- {
379
- window [ 'g_electricity_returned_chart_instance' + id_postfix ] . destroy ( ) ;
380
- }
381
-
382
- $ ( "#electricity-returned-chart-holder" ) . show ( ) ;
332
+ $ ( holder_id ) . show ( ) ;
383
333
384
- var ctx = $ ( "#electricity-returned-chart" + id_postfix ) . get ( 0 ) . getContext ( "2d" ) ;
385
- ctx . canvas . height = $ ( "#electricity-returned-chart" + id_postfix ) . parent ( ) . height ( ) ;
386
- window [ 'g_electricity_returned_chart_instance' + id_postfix ] = new Chart ( ctx ) . Line ( data , line_options ) ;
387
- $ ( "#electricity-returned-chart-legend" + id_postfix ) . html ( window [ 'g_electricity_returned_chart_instance' + id_postfix ] . generateLegend ( ) ) ;
388
- }
389
-
390
- function render_gas_chart ( labels , gas , id_postfix )
391
- {
392
- var data = {
393
- labels : labels ,
394
- datasets : [ {
395
- data : gas ,
396
- label : "{% trans 'Gas' %}" ,
397
- fillColor : "rgba({{frontend_settings.gas_delivered_color|hex_to_rgb}},0.1)" ,
398
- strokeColor : "rgba({{frontend_settings.gas_delivered_color|hex_to_rgb}},1)" ,
399
- pointColor : "rgba({{frontend_settings.gas_delivered_color|hex_to_rgb}},1)" ,
400
- pointStrokeColor : "#fff" ,
401
- pointHighlightFill : "#fff" ,
402
- pointHighlightStroke : "rgba(150,150,150,1)"
403
- } ]
404
- } ;
334
+ var ctx = $ ( chart_id ) . get ( 0 ) . getContext ( "2d" ) ;
335
+ ctx . canvas . height = $ ( chart_id ) . parent ( ) . height ( ) ;
336
+ g_chart_instances [ global_instance_key ] = new Chart ( ctx ) . Line ( data , line_options ) ;
405
337
406
- if ( window [ 'g_gas_chart_instance' + id_postfix ] )
338
+ if ( legend_id )
407
339
{
408
- window [ 'g_gas_chart_instance' + id_postfix ] . destroy ( ) ;
340
+ $ ( legend_id ) . html ( g_chart_instances [ global_instance_key ] . generateLegend ( ) ) ;
409
341
}
410
-
411
- $ ( "#gas-chart-holder" ) . show ( ) ;
412
-
413
- var ctx = $ ( "#gas-chart" + id_postfix ) . show ( ) . get ( 0 ) . getContext ( "2d" ) ;
414
- ctx . canvas . height = $ ( "#gas-chart" + id_postfix ) . parent ( ) . height ( ) ;
415
- window [ 'g_gas_chart_instance' + id_postfix ] = new Chart ( ctx ) . Line ( data , line_options ) ;
416
342
}
343
+
417
344
</ script >
418
345
{% endblock %}
0 commit comments