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('sentiment-chart').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: {
                    footer: function(context) {
                        var foot = "Text: " + full_data[context[0].dataIndex].text + "\n";
                        foot += "Nick: " + full_data[context[0].dataIndex].nick + "\n";
                        foot += "Channel: " + full_data[context[0].dataIndex].channel + "\n";
                        foot += "Net: " + full_data[context[0].dataIndex].net;
                        return foot;
                    }
                }
            },
            legend: {
                display: false,
            },
        }
    }
});