function loadJson(selector) {
    return JSON.parse(document.querySelector(selector).getAttribute('data-json'));
}
var jsonData = loadJson('#jsonData');
var full_data = jsonData.map((item) => item);

var ctx = document.getElementById('volume').getContext("2d");
new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [
      {
        label: "Sentiment",
        fill: false,
        backgroundColor: 'black',
        borderColor: 'lightblue',
        tension: 0.3,
        data: full_data,
        spanGaps: true,
      }
    ],
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    parsing: {
      xAxisKey: 'date',
      yAxisKey: 'value',
    },
    plugins: {
      tooltip: {
        callbacks: {
          beforeFooter: function(context) {
            return "Nick: " + full_data[context[0].dataIndex].nick;
          },
          footer: function(context) {
            return "Msg: " + full_data[context[0].dataIndex].text;
          }
        }
      }
    }
  }
});