{% set ns = namespace(chart_id=0) %}
{% macro chartkick(name, data, height, options) %}
  {% if ns.chart_id == 0 %}
    <script src="{{ url_for('static/js/chart.min.js') }}"></script>
    <script src="{{ url_for('static/js/chartkick.min.js') }}"></script>
  {% endif %}
  {% set ns.chart_id = ns.chart_id + 1 %}
  <div id="chart-{{ ns.chart_id }}"
       style="height: {{ height }}; text-align: center; color: #999; line-height: {{ height }}; font-size: 14px; font-family: Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif">
    {% trans %}Loading...{% endtrans %}
  </div>
  <script>
    //<![CDATA[
    new Chartkick.{{ name }}(
      document.getElementById("chart-{{ns.chart_id}}"),
      {% if data is string %}"{{data|safe}}"{% else %}{{ data|tojson }}{% endif %},
      {{options|d({})|tojson}}
    );
    //]]>
  </script>
{% endmacro %}
{% macro line_chart(data, height="300px") %}
  {{ chartkick('LineChart', data, height, kwargs)}}
{% endmacro %}
{% macro bar_chart(data, height="300px") %}
  {{ chartkick('BarChart', data, height, kwargs)}}
{% endmacro %}
{% macro column_chart(data, height="300px") %}
  {{ chartkick('ColumnChart', data, height, kwargs)}}
{% endmacro %}
{% macro pie_chart(data, height="300px") %}
  {{ chartkick('PieChart', data, height, kwargs)}}
{% endmacro %}
