Drawing shapes as values ​​on ZingChart

Question

I have a requirement when my data values ​​are two-dimensional objects that I have to draw in a diagram (scatter):

In this diagram, I have two values ​​(red and green), each of which consists of a rectangle with coordinates (x1, y1) - (x2-y2).

Do you know how this can be achieved using the ZingChart library? Is it possible? If not, do you know an alternative javascript library that I can use to implement this function?

Thanks!

Answer 1

I am on the ZingChart team and I am happy to help you. This is certainly possible using marker objects of type "poly." In the points array of the marker object, you need to specify all four points of the rectangle, which in general look something like this:

 [ [x1, y1], [x1, y2], [x2, y2], [x2, y1] ] 

Now, if you put your values ​​(x1, y1) and (x2, y2) in two arrays, you can do something like this to create the necessary array of 4 sets of coordinates:

 function getRectCoords(x1y1, x2y2){ var coordsArray = []; // Empty array to hold the 4 points coordsArray.push(x1y1); // Push bottom left point, [x1, y1] coordsArray.push( // Push top left point, [x1, y2] [ x1y1[0], x2y2[1] ] ); coordsArray.push(x2y2); // Push top right point, [x2, y2] coordsArray.push( // Push bottom right point, [x2, y1] [ x2y2[0], x1y1[1] ] ); return coordsArray; // [ [x1, y1], [x1, y2], [x2, y2], [x2, y1] ] } 

Then in ZingChart you can call your function from a JSON diagram, for example:

 ... "scale-y":{ "values":"0:10:1", "markers":[ { "type":"poly", "background-color":"#EA212D", "alpha":1.0, "range":getRectCoords(first_x1y1, first_x2y2), "value-range":true } ] } ... 

You can check it all out in this demo .

I'm not sure how your data looks, but you can see from the example above that ZingChart is quite flexible and that with a dash of creativity you can do a lot, especially when you use JavaScript in combination with ZingChart.

Let me know if I can do anything else to help!