{% extends 'miner/base.html' %}
{% load i18n %}
{% load staticfiles %}
{% load static %}

{% block extra_head %}
    <link rel="stylesheet" href="{% static "miner/css/bar-plot.css" %}">
{% endblock %} 

{% block content %}
    <script src="http://d3js.org/d3.v3.min.js"></script>

    <div class="row">
        <form class="plot">
          <label><input type="radio" name="mode" value="grouped"> Grouped</label>
          <label><input type="radio" name="mode" value="stacked" checked> Stacked</label>
        </form>
    </div>

    <div class="row">
      <div id="plot_container" class="graph"></div>
    </div>

    {% block plot %}
        <script src="{% static "miner/js/plot-util.d3.js" %}"></script> 
        <script src="{% static "miner/js/bar-plot.d3.js" %}"></script> 
        <script>
            bar_plot({{ data.d3data|safe }}, 
                {
                 "plot_container_id": "plot_container",
                 "header": {{ data.header|default:"[]"|default_if_none:"[]"|safe }}
                });
        </script>
    {% endblock plot %}
{% endblock content %}