content.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. {% extends "base.html" %}
  2. {% block container %}
  3. {% if chart.display_container %}
  4. {{ chart.container }}
  5. {% endif %}
  6. {% endblock container %}
  7. {% block body %}
  8. {% block data %}
  9. data_{{ chart.name }}={{ chart.series_js|striptags }};
  10. {% endblock data %}
  11. {% block init %}
  12. nv.addGraph(function() {
  13. var chart = nv.models.{{ chart.model }}(){% if chart.use_interactive_guideline %}.useInteractiveGuideline(true){% endif %}{% if not chart.show_controls %}.showControls(false){% endif %}{% if chart.right_align_y_axis %}.rightAlignYAxis(true){% endif %};
  14. chart.margin({top: {{ chart.margin_top }}, right: {{ chart.margin_right }}, bottom: {{ chart.margin_bottom }}, left: {{ chart.margin_left }}});
  15. chart.xAxis.rotateLabels({{chart.xAxis_rotateLabel}})
  16. chart.xAxis.staggerLabels({{chart.xAxis_staggerLabel|lower}})
  17. chart.xAxis.showMaxMin({{chart.xAxis_showMaxMin|lower}})
  18. var datum = data_{{ chart.name }};
  19. {% if not chart.color_list and chart.color_category %}
  20. chart.color(d3.scale.{{ chart.color_category }}().range());
  21. {% endif %}
  22. {% endblock init %}
  23. {% block rendering_opts %}
  24. {% if chart.stacked %}
  25. chart.stacked(true);
  26. {% endif %}
  27. {% if chart.no_data_message %}
  28. chart.noData('{{chart.no_data_message}}')
  29. {% endif %}
  30. {% if chart.show_controls == False %}
  31. chart.showControls(false);
  32. {% endif %}
  33. {% if chart.show_values %}
  34. chart.showValues(true);
  35. {% endif %}
  36. {% endblock rendering_opts %}
  37. {% block focus %}
  38. {% endblock focus %}
  39. {% block axes %}
  40. {% for axis, a in chart.axislist.items() %}
  41. {% if a.items() %}
  42. chart.{{ axis }}
  43. {% for attr, value in a.items() %}
  44. .{{ attr}}({{ value}}){% if loop.last %};
  45. {% endif %}
  46. {% endfor %}
  47. {% endif %}
  48. {% endfor %}
  49. {% endblock axes %}
  50. {# generate custom tooltip for the chart #}
  51. {% block tooltip %}
  52. {% if chart.custom_tooltip_flag %}
  53. {% if not chart.date_flag %}
  54. {% if chart.model == 'pieChart' %}
  55. {% block pietooltip %}
  56. {% endblock pietooltip %}
  57. {% endif %}
  58. {% else %}
  59. {% if chart.model in ('discreteBarChart', ) %}
  60. chart.tooltip.keyFormatter(function(d, i) {
  61. return d3.time.format("{{ chart.charttooltip_dateformat }}")(new Date(parseInt(d)));
  62. });
  63. {% endif %}
  64. {% if chart.model in ('linePlusBarChart', 'lineChart', 'multiBarChart', 'cumulativeLineChart', 'lineWithFocusChart') %}
  65. chart.tooltip.headerFormatter(function(d, i) {
  66. return d3.time.format("{{ chart.charttooltip_dateformat }}")(new Date(parseInt(d)));
  67. });
  68. {% endif %}
  69. {% if chart.model in ('stackedAreaChart', ) %}
  70. chart.interactiveLayer.tooltip.headerFormatter(function(d, i) {
  71. return d3.time.format("{{ chart.charttooltip_dateformat }}")(new Date(parseInt(d)));
  72. });
  73. {% endif %}
  74. {% endif %}
  75. {% endif %}
  76. {% endblock tooltip %}
  77. {# the shape attribute in kwargs is not applied when #}
  78. {# not allowing other shapes to be rendered #}
  79. {% block legend %}
  80. chart.showLegend({{chart.show_legend|lower}});
  81. {% endblock legend %}
  82. {% block custoattr %}
  83. {# add custom chart attributes #}
  84. {% for attr, value in chart.chart_attr.items() %}
  85. {% if value is string and value.startswith(".") %}
  86. chart.{{ attr }}{{ value }};
  87. {% else %}
  88. chart.{{ attr }}({{ value }});
  89. {% endif %}
  90. {% endfor %}
  91. {% if chart.resize %}
  92. nv.utils.windowResize(chart.update);
  93. {% endif %}
  94. {# include specific subchart #}
  95. {{ chart.jschart }}
  96. {% endblock custoattr %}
  97. {% block y_axis_scale %}
  98. {% if chart.y_axis_scale_min or chart.y_axis_scale_max %}
  99. chart.forceY([{{ chart.y_axis_scale_min }},{{ chart.y_axis_scale_max }}]);
  100. {% endif %}
  101. {% endblock y_axis_scale %}
  102. {% block inject %}
  103. {# Inject data to D3 #}
  104. d3.select('#{{ chart.name }} svg')
  105. .datum(datum)
  106. .transition().duration(500)
  107. {% if chart.width %}
  108. .attr('width', '{{ chart.width}}')
  109. {% endif %}
  110. {% if chart.height %}
  111. .attr('height', {{ chart.height}})
  112. {% endif %}
  113. .call(chart);
  114. {% endblock inject %}
  115. {% block extras %}
  116. {# extra chart attributes #}
  117. {% if chart.extras %}
  118. {{ chart.extras }}
  119. {% endif %}
  120. {% endblock extras %}
  121. {# callback for clicking on charts #}
  122. {% if chart.callback %}
  123. },{{ chart.callback }});
  124. {% endif %}
  125. {# closing nv.addGraph #}
  126. {% block close %}
  127. });
  128. {% endblock close %}
  129. {% endblock body %}