Mix Shift

1. On your dashboard page, add a grid with the columns below (or map your own header names – see below). Keep it on the same page – tuck it behind the chart rather than hiding it, and make it tall.
2. Add an HTML container (one that runs JavaScript) and paste the snippet.
3. View the page. The chart finds the grid, reads every row and draws itself; it updates when filters change the grid.

<div data-chart-embed="mix-shift" style="height:100%"></div>
<script>
(function () {
  var s = document.createElement("script");
  s.src = "https://viz.kaijxnes.com/charts/mix-shift-1.1.0.js";
  s.integrity = "sha384-PbFQndI0GEzxRu5TRU1hzGy7ql5iYnFRvajDtgaEmH4YlorhP9vTGR08cRS2Y+Rm";
  s.crossOrigin = "anonymous";
  document.head.appendChild(s);
})();
</script>

Script URL

https://viz.kaijxnes.com/charts/mix-shift-1.1.0.js

Integrity (SRI)

sha384-PbFQndI0GEzxRu5TRU1hzGy7ql5iYnFRvajDtgaEmH4YlorhP9vTGR08cRS2Y+Rm

Chart.js

https://viz.kaijxnes.com/chart.umd-4.4.1.js · sha384-dug+JxfBvklEQdJ4AYuBBAIScUz0bVN73xpy273gcAwHjb3qI0fXmuYNaNfdyYJG

Your own column names

The chart looks for the default headers above. If your grid's headers are different, map them by key with data-columns on the placeholder – the chart then shows your names too. data-labels (same keys) changes just the on-screen names, and data-title changes the heading. For grids that draw rows in batches, data-grid-class and data-scroll-class name the grid's container and its scroll box so every row is read.

<div data-chart-embed="mix-shift" data-columns='{"month":"Your Month Header","v1":"Your Metric Header"}' data-title="Your title" style="height:100%"></div>
<script>
(function () {
  var s = document.createElement("script");
  s.src = "https://viz.kaijxnes.com/charts/mix-shift-1.1.0.js";
  s.integrity = "sha384-PbFQndI0GEzxRu5TRU1hzGy7ql5iYnFRvajDtgaEmH4YlorhP9vTGR08cRS2Y+Rm";
  s.crossOrigin = "anonymous";
  document.head.appendChild(s);
})();
</script>