Chartjs-New dataset is not accepted by chartj template

by

0👍

I would try the follwing:

1.- Check that your array[2500] has values between 1 and 100 and pass in the first 100 instead the whole 2500 array to check if that works

2.- Might depend on the chartjs version, but I would try to put the maintainAspectRatio property inside an options: {} object. See below.

var chart = new Chart('blabla', {
  type: 'bar',
  data: {},
  options: {
    maintainAspectRatio: false,
  }
});

Apart from that, 2500 records seems to be a too big amount of data to handle. If the graph renders for smaller amounts, I would try to keep the graph drawn with an amount that gets rendered, and the fetch the data + update the chart depending on the users x-scroll.

Edit:

I think you need to call the addData for your new array with a modified addData function that would look something like this, for the width to fit.

function addData(chart) {
    for (var i = 0; i < chart.data[0].data.length; i++) {
        //chart.data.datasets[0].data.push(Math.random() * 100);
        //chart.data.labels.push("Label" + i);
        var newwidth = $('.chartAreaWrapper2').width() + 60;
        $('.chartAreaWrapper2').width(newwidth);
    }
}

Note that your script work up determined num of records with the arrangements mentioned, so if the graph goes blank can only be that your new array is empty or has some issue.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>.chartWrapper {
  position: relative;
}

.chartWrapper > canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.chartAreaWrapper {
  width: auto;
  overflow-x: scroll;
}
</style>

<div class="chartWrapper">
  <div class="chartAreaWrapper">
  <div class="chartAreaWrapper2">
      <canvas id="chart-Test" height="300" width="1200"></canvas>
  </div>
  </div>
  <canvas id="axis-Test" height="300" width="0"></canvas>

<div class="chartWrapper">
  <div class="chartAreaWrapper">
    <div class="chartAreaWrapper2">
      <canvas id="chart-Test" height="351" width="4000"></canvas>
    </div>
  </div>
  <canvas id="axis-Test" height="351" width="0"></canvas>
</div>

<script>
    
$(document).ready(function () {
    function generateLabels() {
        var chartLabels = [];
        for (x = 0; x < 100; x++) {
            chartLabels.push(x);
        }
        return chartLabels;
    }

   function generateData() {
        var chartData = [];
        for (x = 0; x < 100; x++) {
            chartData.push(Math.floor((Math.random() * 100) + 1));
        }
        return chartData;
    }
    
    function addData(numData, chart) {
        for (var i = 0; i < numData; i++) {
            chart.data.datasets[0].data.push(Math.random() * 100);
            chart.data.labels.push("Label" + i);
            var newwidth = $('.chartAreaWrapper2').width() + 60;
            $('.chartAreaWrapper2').width(newwidth);
        }
    }

    var chartData = {
        labels: generateLabels(),
        datasets: [{
            label: "Test Data Set",
            data: generateData(),
            pointRadius: 0,
            borderColor: "#4ED7FC",
            borderWidth: 2,
            fill: false
        }]
    };

    $(function () {
        var rectangleSet = false;
        var canvasTest = $('#chart-Test');
        var chartTest = new Chart(canvasTest, {
            type: 'line',
            data: chartData,
            options: {
                maintainAspectRatio: false,
                responsive: true
            }
        });
        addData(300, chartTest);
    });
});    
</script>

0👍

I found out that the dashboard template node does not easily accept payload messages on the script section.
watch function
I have to use something like:

// Watch the payload and update
(function(scope) {
    scope.$watch('msg.payload', function(data) {
        update(data);
    });
})(scope);

function update(dta) {
    theScope.send({payload:dta});
    bleh = dta.name;
    otherStuff();
}

to watch a incoming payload and store it.

My initial question "Why is that?" is therefore answered.
Unfortunately I am not quite sure how to implement this new bit of code to the array coming in in msg.payload[0.data in my specific case.

Leave a comment