django-sql-dashboard/django_sql_dashboard/templates/django_sql_dashboard/widgets/bar_label-bar_quantity.html
{% extends "django_sql_dashboard/widgets/_base_widget.html" %}
{% block widget_results %}
<script
src="https://cdn.jsdelivr.net/npm/vega@5.19.1"
integrity="sha384-dhyUMwHr1RzDslJIbzN+8UMRMobmqrmABSU3vFSBBnARl6XwbW37TVDCTQs+yEc5"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0"
integrity="sha384-nAwfbn/eKhGkpj7MbyqVuoGEyL/iSeZq4XJ1NNOxA9nT7eXfJuUQgpxYd27m1tAO"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/vega-embed@6.15.1"
integrity="sha384-RvXMbul/5q2mGE4PXcky3u5+A/K3lk/jv+oizUX/InRPD9wELInOy6YwUxdk/tEu"
crossorigin="anonymous"
></script>
<div id="vis{{ result.index }}"></div>
{% with "vis-data-"|add:result.index as script_name %}
{{ result.rows|json_script:script_name }}
<script>
vegaEmbed("#vis{{ result.index }}", {
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
description: "A simple bar chart with embedded data.",
data: {
values: JSON.parse(
document.getElementById("{{ script_name }}").textContent
),
},
mark: "bar",
encoding: {
x: {
field: "bar_label",
title: "Label",
type: "nominal",
axis: { labelAngle: 90 },
sort: null
},
y: { field: "bar_quantity", title: "Quantity", type: "quantitative" },
},
});
</script>
{% endwith %}
{% endblock %}