Adding JsCharts to Tampermonkey

Question

I'm trying to add JsCharts to a Tampermonkey script, but It's not working properly. Here's the script code and an image of how the chart just keeps on spinning the loading indicator. How can I make this work?

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://localhost:10050/
// @require      http://code.jquery.com/jquery-3.6.0.slim.min.js
// @require      https://code.jscharting.com/latest/jscharting.js
// @grant        none
// ==/UserScript==

$(document).ready(function() {
    'use strict';

    // Your code here...
    $('body').append('<div id="chartDiv" style="width:50%; height:300px; margin: 0 auto;"></div>')
    drawChart('chartDiv');
})();

function drawChart(element) {
    JSC.Chart(element, {
        type: 'horizontal column',
        series: [
            {
                points: [
                    {x: 'Apples', y: 50},
                    {x: 'Oranges', y: 42}
                ]
            }
        ]
    });
};

Answer 1

Instead of using a JSCharting, a proprietary charting framework with minified code, start with an open-source library like Chart.js.

The chart below is derived from the documentation. I modified to to conform to some basic data.

Userscript

// ==UserScript==
// @name         Chart Example
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  try to take over the world!
// @author       You
// @match        https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js
// @resource     CHART_JS_CSS https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css
// @grant        GM_addStyle
// @grant        GM_getResourceText
// ==/UserScript==
(function() {
  /* global Chart */
  /* eslint-disable no-multi-spaces, no-return-assign */
  'use strict';

  GM_addStyle(`${GM_getResourceText('CHART_JS_CSS')}
    .chart-wrapper {
      position: fixed;
      width: 400px;
      height: 200px;
      z-index: 1000;
      right: 1em;
      top: 1em;
      background: rgba(255, 255, 255, 0.9);
      border: thin solid grey;
    }
  `);

  const main = () => {
    document.body.prepend(createElement('div', {
      props: {
        className: 'chart-wrapper'
      },
      children: [
        createElement('canvas', {
          attrs: { id: 'my-canvas' }
        })
      ]
    }));

    const chartData = {
      label: '# of Votes',
      data: [
        { key: 'Red'    , value: 12 , backgroundColor: 'rgba(255, 99, 132, 0.2)'  , borderColor: 'rgba(255, 99, 132, 1)'  },
        { key: 'Blue'   , value: 19 , backgroundColor: 'rgba(54, 162, 235, 0.2)'  , borderColor: 'rgba(54, 162, 235, 1)'  },
        { key: 'Yellow' , value:  3 , backgroundColor: 'rgba(255, 206, 86, 0.2)'  , borderColor: 'rgba(255, 206, 86, 1)'  },
        { key: 'Green'  , value:  5 , backgroundColor: 'rgba(75, 192, 192, 0.2)'  , borderColor: 'rgba(75, 192, 192, 1)'  },
        { key: 'Purple' , value:  2 , backgroundColor: 'rgba(153, 102, 255, 0.2)' , borderColor: 'rgba(153, 102, 255, 1)' },
        { key: 'Orange' , value:  3 , backgroundColor: 'rgba(255, 159, 64, 0.2)'  , borderColor: 'rgba(255, 159, 64, 1)'  }
      ]
    };

    const myChart = createSimpleBarChart('#my-canvas', chartData);
  };

  const createChart = (canvas, settings) => new Chart((typeof canvas === 'string' ? document.querySelector(canvas) : canvas).getContext('2d'), settings);

  const createElement = (tagName, config = {}) => {
    const el = document.createElement(tagName);
    if (config.attrs) Object.entries(config.attrs).forEach(([attr, val]) => el.setAttribute(attr, val));
    if (config.props) Object.entries(config.props).forEach(([prop, val]) => el[prop] = val);
    if (config.css) Object.entries(config.css).forEach(([prop, val]) => el.style[prop] = val);
    if (config.children) config.children.forEach(child => el.append(child));
    return el;
  };

  const createSimpleBarChart = (selector, chartData) => {
    const { data, label } = chartData;
    return createChart(selector, {
      type: 'bar',
      data: {
        labels: data.map(({ key }) => key),
        datasets: [{
          label: label,
          data: data.map(({ value }) => value),
          backgroundColor: data.map(({ backgroundColor }) => backgroundColor),
          borderColor: data.map(({ borderColor }) => borderColor),
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  };

  main();
})();

Demo

const main = () => {
  document.body.prepend(createElement('div', {
    props: {
      className: 'chart-wrapper'
    },
    children: [
      createElement('canvas', {
        attrs: { id: 'my-canvas' }
      })
    ]
  }));

  const chartData = {
    label: '# of Votes',
    data: [
      { key: 'Red'    , value: 12 , backgroundColor: 'rgba(255, 99, 132, 0.2)'  , borderColor: 'rgba(255, 99, 132, 1)'  },
      { key: 'Blue'   , value: 19 , backgroundColor: 'rgba(54, 162, 235, 0.2)'  , borderColor: 'rgba(54, 162, 235, 1)'  },
      { key: 'Yellow' , value:  3 , backgroundColor: 'rgba(255, 206, 86, 0.2)'  , borderColor: 'rgba(255, 206, 86, 1)'  },
      { key: 'Green'  , value:  5 , backgroundColor: 'rgba(75, 192, 192, 0.2)'  , borderColor: 'rgba(75, 192, 192, 1)'  },
      { key: 'Purple' , value:  2 , backgroundColor: 'rgba(153, 102, 255, 0.2)' , borderColor: 'rgba(153, 102, 255, 1)' },
      { key: 'Orange' , value:  3 , backgroundColor: 'rgba(255, 159, 64, 0.2)'  , borderColor: 'rgba(255, 159, 64, 1)'  }
    ]
  };

  const myChart = createSimpleBarChart('#my-canvas', chartData);
};

const createChart = (canvas, settings) => new Chart((typeof canvas === 'string' ? document.querySelector(canvas) : canvas).getContext('2d'), settings);

const createElement = (tagName, config = {}) => {
  const el = document.createElement(tagName);
  if (config.attrs) Object.entries(config.attrs).forEach(([attr, val]) => el.setAttribute(attr, val));
  if (config.props) Object.entries(config.props).forEach(([prop, val]) => el[prop] = val);
  if (config.css) Object.entries(config.css).forEach(([prop, val]) => el.style[prop] = val);
  if (config.children) config.children.forEach(child => el.append(child));
  return el;
};

const createSimpleBarChart = (selector, chartData) => {
  const { data, label } = chartData;
  return createChart(selector, {
    type: 'bar',
    data: {
      labels: data.map(({ key }) => key),
      datasets: [{
        label: label,
        data: data.map(({ value }) => value),
        backgroundColor: data.map(({ backgroundColor }) => backgroundColor),
        borderColor: data.map(({ borderColor }) => borderColor),
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });
};

main();

.chart-wrapper {
  position: fixed;
  width: 400px;
  height: 200px;
  z-index: 1000;
  right: 1em;
  top: 1em;
  background: rgba(255, 255, 255, 0.9);
  border: thin solid grey;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>