{% extends "base.html" %} {% block container %} {% if chart.display_container %} {{ chart.container }} {% endif %} {% endblock container %} {% block body %} {% block data %} data_{{ chart.name }}={{ chart.series_js }}; {% endblock data %} {% block init %} nv.addGraph(function() { var chart = nv.models.{{ chart.model }}(){% if chart.use_interactive_guideline %}.useInteractiveGuideline(true){% endif %}; chart.margin({top: {{ chart.margin_top }}, right: {{ chart.margin_right }}, bottom: {{ chart.margin_bottom }}, left: {{ chart.margin_left }}}); var datum = data_{{ chart.name }}; {% if not chart.color_list and chart.color_category %} chart.color(d3.scale.{{ chart.color_category }}().range()); {% endif %} {% endblock init %} {% if chart.stacked %} chart.stacked(true); {% endif %} {% if chart.focus_enable %} chart.focusEnable(true); {% endif %} {% block axes %} {% for axis, a in chart.axislist.items() %} {% if a.items() %} chart.{{ axis }} {% for attr, value in a.items() %} .{{ attr}}({{ value}}){% if loop.last %}; {% endif %} {% endfor %} {% endif %} {% endfor %} {% endblock axes %} {# generate custom tooltip for the chart #} {% block tooltip %} {% if chart.custom_tooltip_flag %} {% if not chart.date_flag %} {% if chart.model == 'pieChart' %} {% block pietooltip %} {% endblock pietooltip %} {% else %} chart.tooltipContent(function(key, y, e, graph) { var x = String(graph.point.x); var y = String(graph.point.y); {{ chart.tooltip_condition_string }} tooltip_str = '
'+key+'
' + y + ' at ' + x; return tooltip_str; }); {% endif %} {% else %} chart.tooltipContent(function(key, y, e, graph) { var x = d3.time.format("{{ chart.charttooltip_dateformat }}")(new Date(parseInt(graph.point.x))); var y = String(graph.point.y); {{ chart.tooltip_condition_string }} tooltip_str = '
'+key+'
' + y + ' on ' + x; return tooltip_str; }); {% endif %} {% endif %} {% endblock tooltip %} {# the shape attribute in kwargs is not applied when #} {# not allowing other shapes to be rendered #} {% block legend %} chart.showLegend({{chart.show_legend|lower}}); {% endblock legend %} {% block custoattr %} {# add custom chart attributes #} {% for attr, value in chart.chart_attr.items() %} {% if value is string and value.startswith(".") %}: chart.{{ attr }}{{ value }}; {% else %} chart.{{ attr }}({{ value }}); {% endif %} {% endfor %} {% if chart.resize %} nv.utils.windowResize(chart.update); {% endif %} {# include specific subchart #} {{ chart.jschart }} {% endblock custoattr %} {% block inject %} {# Inject data to D3 #} d3.select('#{{ chart.name }} svg') .datum(datum) .transition().duration(500) {% if chart.width %} .attr('width', {{ chart.width}}) {% endif %} {% if chart.height %} .attr('height', {{ chart.height}}) {% endif %} .call(chart); {% endblock inject %} {# extra chart attributes #} {% if chart.extras %} {{ chart.extras }} {% endif %} {# closing nv.addGraph #} {% block close %} }); {% endblock close %} {% endblock body %}