FancyGrid Sparklines

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>
<script src="https://fancygrid.com/resources/js/jquery.sparkline.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://fancygrid.com/resources/js/highchart-gray-theme.js"></script>

<div id="container" style="margin-left: 10px;margin-top: 10px;"></div>

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  new FancyGrid({
    renderTo: 'container',
    width: 'fit',
    height: 'fit',
    theme: 'blue',
    data: {
      items: data
    },
    defaults: {
      type: 'number',
      width: 100,
      resizable: true
    },
    clicksToEdit: 1,
    columns: [{
      title: 'Line',
      index: 'data1',
      type: 'sparklineline',
      sparkConfig: {
        spotRadius: 1.7
      }
    }, {
      title: 'Bar',
      index: 'data1',
      type: 'sparklinebar'
    }, {
      title: 'Tristate',
      index: 'data1',
      type: 'sparklinetristate'
    }, {
      title: 'Discrete',
      index: 'data1',
      type: 'sparklinediscrete'
    }, {
      title: 'Bullet',
      index: 'data1',
      type: 'sparklinebullet'
    }, {
      title: 'Pie',
      width: 50,
      index: 'data2',
      type: 'sparklinepie'
    }, {
      title: 'Box',
      index: 'data1',
      type: 'sparklinebox'
    }]
  });
});

const data = [{
    progreso: 1,
    data1: [-2, 3, 4, 1, 0, -5],
    data2: [1, 2, 3, 4, 5]
  },
  {
    progreso: 1,
    data1: [-2, 3, 4, 1, 0, -5],
    data2: [1, 2, 3, 4, 5]
  },
  {
    progreso: 1,
    data1: [-2, 3, 4, 1, 0, -5],
    data2: [1, 2, 3, 4, 5]
  },
  {
    progreso: 1,
    data1: [-2, 3, 4, 1, 0, -5],
    data2: [1, 2, 3, 4, 5]
  }
];