{% if vis_list %}
    <div class="btn-group">
        <button class="btn btn-default dropdown-toggle dropdown-custom" type="button" id="dropdownMenuVis" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Visualize <span class="caret"></span>
        </button>
        <div class="dropdown-menu" role="menu">
            {% for x in vis_list %}
                <li>
                    {% for y in x.chart_types.all %}
                        <a class="dropdown-item" title="{{ x.help_text }}" href="?{{ request.GET.urlencode }}&charttype={{ y }}&property={{ x.field_path }}">{{ x.label }} {{ y.icon|safe }}</a>
                    {% endfor %}
                </li>
                <hr/>
            {% endfor %}
        </div>
    </div>
{% endif %}
{% if vis_list %}
    {% if data %}
        <div class="card">
            <div class="card-heading" style="text-align:center;">
                <h1>{{ data.title }}</h1>
                <legend>{{ data.items }}</legend>
                <button  type="button" class="btn btn-default" data-toggle="collapse" data-target="#howtocite" id="howtocite-btn">JSON data</button>
                <div id="howtocite" class="collapse">
                    <p>{{data}}</p>
                </div>
            </div>
            <div class="card-body">
                <div id="bar"></div>
            </div>
            {% if error %}
                <h4>{{ error_msg|safe }}</h4>
            {% endif %}
        </div>
    {% endif %}
{% endif %}