Drawing Shapes as values on ZingChart

Question

I have a requirement where my data values are two-dimensional objects I must draw in the chart (scatter):

On this chart, I have two values (red, and green), each one consisting of a rectangle with (x1,y1)-(x2-y2) coordinates.

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

Thanks!

Figurate

Answer 1

I'm on the ZingChart team, and I'm happy to help you out. 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, altogether, would look something like this:

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

Now, if you put your (x1, y1) values and (x2, y2) values into two arrays, you could 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 could call your function from within the chart JSON, like this:

...
"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 out all of that in this demo.

I'm not sure what your data looks like, but you should be able to see from the above example that ZingChart is pretty flexible, and that with a dash of creativity, you can accomplish a lot, especially when you use JavaScript in conjunction with ZingChart.

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

Skysweeper