Chartjs-Displaying gif on tip of line chart

by

2👍

✅

Solution:

  • in JS define a regular image with the GIF/PNG/JPG, e.g. var myImg = new image(); myImg.src = "path.to.image/image.png".
  • datasets: {[ pointRadius: [10], pointStyle:[myImg] ]} must start as 1D arrays with a point radius and the image.
  • each timer loop, insert a new element at the beginning of the arrays with zero/empty values: datasets[0].pointRadius.unshift(0); datasets[0].pointStyle.unshift("");

Search for NEW in the snippet

// used for example purposes
const x = new Date().getTime();
let multiplier = 0;

function getRandomIntInclusive(min, max) {
  const elapsed = new Date().getTime() - x;
  const InvFact = 0.0000625;
  const value = Math.pow(Math.E, elapsed * InvFact);
  multiplier = value;
  return {
    value: value,
    elapsed: elapsed
  };
}

// NEW, example image
var myImg = new Image();
myImg.src = "https://picsum.photos/id/20/15";

// create initial empty chart
var ctx_live = document.getElementById("mycanvas");
var myChart = new Chart(ctx_live, {
  type: "line",
  data: {
    labels: [0, 2, 4],
    datasets: [
      {
        // NEW, a point to show an image
        pointRadius: [10],
        pointStyle: [myImg],

        data: [1],
        borderWidth: 1,
        borderColor: "#00c0ef",
        label: "liveCount"
      }
    ]
  },
  options: {
    animation: {
      duration: 1,
      easing: "linear"
    },
    responsive: true,
    title: {
      display: true,
      text: multiplier
    },
    legend: {
      display: false
    },
    maintainAspectRatio: false,
    elements: {
      line: {
        tension: 0
      }
    },
    scales: {
      x: {
        display: true
      },
      y: {
        min: 100,
        max: 40
      },
      yAxes: [
        {
          type: "linear",

          ticks: {
            max: 5,
            min: 1,
            maxTicksLimit: 10
          },
          gridLines: {
            display: false
          }
        }
      ],
      xAxes: [
        {
          max: 5,
          color: "rgba(255, 255, 255,1)",
          gridLines: {
            display: false
          },
          ticks: {
            maxTicksLimit: 1,
            min: 0,
            max: 5,
            callback: function (value, index, values) {
              return Math.floor(value) + "s";
            }
          }
        }
      ]
    }
  }
});

// this post id drives the example data
var postId = 1;
var arySize = 0;

// logic to get new data
var getData = function () {
  var tick = getRandomIntInclusive();

  // NEW
  // Extend the arrays by inserting elements in front
  myChart.data.datasets[0].pointRadius.unshift(0);
  myChart.data.datasets[0].pointStyle.unshift("");
  //

  myChart.data.labels.push(tick.elapsed / 1000);
  myChart.data.datasets[0].data.push(tick.value);
  myChart.options.title.text = multiplier.toFixed(2);
  myChart.options.scales.yAxes[0].ticks.max = multiplier + 2;
  // re-render the chart
  myChart.update();
};

// get new data every 3 seconds
setInterval(getData, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js" crossorigin="anonymous"></script>

<div style="width: 100%; min-height: 400px">
  <canvas id="mycanvas"></canvas>
</div>

Leave a comment