Javascript Question posted in
A very good W3school tutorial can be found here.

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)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    enter image description here This is an example how the array looks like Plot1 is receiving the data from that array (it has valid data)


  2. 0

    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
    };*/
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search