CODEWITHSUNDEEP
javascriptjquerycanvas
user3438326
user3438326

Reputation: 89

Declaring an array of data elements so as to obtain scatter dot on the canvas

Consider this jsfiddle. Here I would like to declare a dataset so as to obtain scatter dots on the canvas.

 //   var data = [2,2],[3,3],[3,4]; // data to be declared

 var bw = 400;
 var bh = 400;

 var p = 10;

 var cw = bw + (p*2) + 1;
 var ch = bh + (p*2) + 1;

So as to obtain an output as below. How to achieve this ?

enter image description here

Upvotes: 0

Views: 140

Answers (2)

jhyap
jhyap

Reputation: 3837

  1. Prepare a location array to store all the x and y information of cross section point. Something should look like this (Note that your respective x and y value should be corresponding with your pixel location at your dashboard crosee section point:

    var location = [{x:0, y:0}, {x:0, y:1}, {x:0, y:2}....];

  2. Then you should have a function to draw a canvas circle: learn how to draw a circle

  3. Then it would depand how you get the location you want to draw the circle.

*You can actually skip 1 and directly use 2. But 1 is usefull where you can itenerate the index of array and access the x and y informations.

Upvotes: 0

Batu.Khan
Batu.Khan

Reputation: 3065

You can write a function like this

function drawData(_data) {
  _data.forEach(function(elem){
    console.log(elem[0], elem[1]);
    context.beginPath();
    context.arc((elem[0]*40 + 10),(elem[1]*40 + 10),10,0,2*Math.PI);
    context.fill();
  });
}

FIDDLE

EDIT FOR COLORS

You can define an array for colors like

var colors = ["black","yellow","blue","red","orange"];

Then in draw function before .fill you can do

context.fillStyle = colors[elem[1]];

UPDATED FIDDLE

Upvotes: 3

Related Questions