javascriptchart.jsdataset

build data dynamic for data in dataset for chartjs in javascript


I would like to make the data been made dynamic according the variable 'AmountOfPoints'

Now i'm working with a switch and make the data fixed (please see example below):

__processPlot1() {
  if (this.__Plot1 !== null) {
    //Check how many points are used for draw the camtable
    let AmountOfPoints = 0;
    for (let i = 0; i < 10; i++) {
      if (this.__Plot1[i].Used === true) {
        AmountOfPoints++;
      }
    }
    //console.log("AmountOfPoints: " + AmountOfPoints);

    switch (AmountOfPoints) {
      case 10:
        this.__Plot.data.datasets[0] = {
          data: [
            { x: this.__Plot1[0].X, y: this.__Plot1[0].Y },
            { x: this.__Plot1[1].X, y: this.__Plot1[1].Y },
            { x: this.__Plot1[2].X, y: this.__Plot1[2].Y },
            { x: this.__Plot1[3].X, y: this.__Plot1[3].Y },
            { x: this.__Plot1[4].X, y: this.__Plot1[4].Y },
            { x: this.__Plot1[5].X, y: this.__Plot1[5].Y },
            { x: this.__Plot1[6].X, y: this.__Plot1[6].Y },
            { x: this.__Plot1[7].X, y: this.__Plot1[7].Y },
            { x: this.__Plot1[8].X, y: this.__Plot1[8].Y },
            { x: this.__Plot1[9].X, y: this.__Plot1[9].Y },
          ],
          fill: false,
          showLine: true,
          tension: 0,
          borderColor: "#CD5C5C",
          pointRadius: 7,
        };
        break;

      case 9:
        this.__Plot.data.datasets[0] = {
          data: [
            { x: this.__Plot1[0].X, y: this.__Plot1[0].Y },
            { x: this.__Plot1[1].X, y: this.__Plot1[1].Y },
            { x: this.__Plot1[2].X, y: this.__Plot1[2].Y },
            { x: this.__Plot1[3].X, y: this.__Plot1[3].Y },
            { x: this.__Plot1[4].X, y: this.__Plot1[4].Y },
            { x: this.__Plot1[5].X, y: this.__Plot1[5].Y },
            { x: this.__Plot1[6].X, y: this.__Plot1[6].Y },
            { x: this.__Plot1[7].X, y: this.__Plot1[7].Y },
            { x: this.__Plot1[8].X, y: this.__Plot1[8].Y },
          ],
          fill: false,
          showLine: true,
          tension: 0,
          borderColor: "#CD5C5C",
          pointRadius: 7,
        };
        break;

      case 8:
        this.__Plot.data.datasets[0] = {
          data: [
            { x: this.__Plot1[0].X, y: this.__Plot1[0].Y },
            { x: this.__Plot1[1].X, y: this.__Plot1[1].Y },
            { x: this.__Plot1[2].X, y: this.__Plot1[2].Y },
            { x: this.__Plot1[3].X, y: this.__Plot1[3].Y },
            { x: this.__Plot1[4].X, y: this.__Plot1[4].Y },
            { x: this.__Plot1[5].X, y: this.__Plot1[5].Y },
            { x: this.__Plot1[6].X, y: this.__Plot1[6].Y },
            { x: this.__Plot1[7].X, y: this.__Plot1[7].Y },
          ],
          fill: false,
          showLine: true,
          tension: 0,
          borderColor: "#CD5C5C",
          pointRadius: 7,
        };
        break;

      case 7:
        this.__Plot.data.datasets[0] = {
          data: [
            { x: this.__Plot1[0].X, y: this.__Plot1[0].Y },
            { x: this.__Plot1[1].X, y: this.__Plot1[1].Y },
            { x: this.__Plot1[2].X, y: this.__Plot1[2].Y },
            { x: this.__Plot1[3].X, y: this.__Plot1[3].Y },
            { x: this.__Plot1[4].X, y: this.__Plot1[4].Y },
            { x: this.__Plot1[5].X, y: this.__Plot1[5].Y },
            { x: this.__Plot1[6].X, y: this.__Plot1[6].Y },
          ],
          fill: false,
          showLine: true,
          tension: 0,
          borderColor: "#CD5C5C",
          pointRadius: 7,
        };
        break;

      case 6:
        this.__Plot.data.datasets[0] = {
          data: [
            { x: this.__Plot1[0].X, y: this.__Plot1[0].Y },
            { x: this.__Plot1[1].X, y: this.__Plot1[1].Y },
            { x: this.__Plot1[2].X, y: this.__Plot1[2].Y },
            { x: this.__Plot1[3].X, y: this.__Plot1[3].Y },
            { x: this.__Plot1[4].X, y: this.__Plot1[4].Y },
            { x: this.__Plot1[5].X, y: this.__Plot1[5].Y },
          ],
          fill: false,
          showLine: true,
          tension: 0,
          borderColor: "#CD5C5C",
          pointRadius: 7,
        };
        break;

      case 5:
        this.__Plot.data.datasets[0] = {
          data: [
            { x: this.__Plot1[0].X, y: this.__Plot1[0].Y },
            { x: this.__Plot1[1].X, y: this.__Plot1[1].Y },
            { x: this.__Plot1[2].X, y: this.__Plot1[2].Y },
            { x: this.__Plot1[3].X, y: this.__Plot1[3].Y },
            { x: this.__Plot1[4].X, y: this.__Plot1[4].Y },
          ],
          fill: false,
          showLine: true,
          tension: 0,
          borderColor: "#CD5C5C",
          pointRadius: 7,
        };
        break;

      case 4:
        this.__Plot.data.datasets[0] = {
          data: [
            { x: this.__Plot1[0].X, y: this.__Plot1[0].Y },
            { x: this.__Plot1[1].X, y: this.__Plot1[1].Y },
            { x: this.__Plot1[2].X, y: this.__Plot1[2].Y },
            { x: this.__Plot1[3].X, y: this.__Plot1[3].Y },
          ],
          fill: false,
          showLine: true,
          tension: 0,
          borderColor: "#CD5C5C",
          pointRadius: 7,
        };
        break;
    }
  }
  this.__Plot.update();
}

This is working, but i would like to have it be dynamic, if for example i would have 50 points, i don't need to add them all manually like in my example above, thank you

This is an example how the array looks like

Plot1 is receiving the data from that array (it has valid data)

Update: the result of the requested console.log:


Solution

  • You mean something like

    // test data
    const Plot1 = [
      {"Used":true, "X":1,"Y":10},
      {"Used":true, "X":2,"Y":20},
      {"Used":false,"X":3,"Y":30}, // will be skipped
      {"Used":true, "X":4,"Y":40}
    ];
    
    
        const plots = Plot1; // this.__Plot1; // change back to this.Plot1
        const data = plots
          .filter(({Used}) => Used)
          .map(({X, Y}) => ({x:X, y:Y}));
    
        console.log(data)
        /* Uncomment when happy
        this.__Plot.data.datasets[0] = {
          data: data,
          fill: false,
          showLine: true,
          tension: 0,
          borderColor: "#CD5C5C",
          pointRadius: 7
        };*/