Draw multiple Rectangles on plot dynamically/ runtime

15 views
Skip to first unread message

Anirudha Deshpande

unread,
Oct 24, 2019, 9:36:38 AM10/24/19
to jqplot-users
Hi,

I want to add multiple rectangle overlay on the plot dynamically or run time based on the user input.

For Example, I want to add following 2 rectangle overlays dynamically,

canvasOverlay: {
                    show: true,
                    objects: 
               [                 
                     {
                         rectangle: {
                             xmin: new Date("2018-04-20 03:30"), xmax: new Date("2018-04-20 04:30"), xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                             color: "rgba(255, 255,0, 0.6)", showTooltip: true, tooltipFormatString: "Service/Maintenance Period"
                         }
                     },
                     {
                         rectangle: {
                             xmin: new Date("2018-04-20 07:30"), xmax: new Date("2018-04-20 08:30"), xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                             color: "rgba(255, 255,0, 0.6)", showTooltip: true, tooltipFormatString: "Service/Maintenance Period"
                         },
                     }
                    
                ]}


"Objects" (i.e. 2 rectangles overlays in this case) should be plotted dynamically . Multiple. Xmin-Xmax values will be supplied at the run time.

I have tried following but it did not work

var myArrayPoints = Array();
            myArrayPoints.push("[{"+" rectangle: {"+"xmin:"+ "new Date(\"2018-04-20 03:30\"),"+ "xmax:"+ "new Date(\"2018-04-20 04:30\"),"+ "xminOffset:"+ "\"0px\","+ "xmaxOffset:"+ "\"0px\","+"yminOffset:"+"\"0px\","+ "ymaxOffset:"+ "\"0px\","+"color:"+ "\"rgba(255, 255,0, 0.6)\","+ "showTooltip:"+ "true,"+ "tooltipFormatString:"+ "\"Service/Maintenance Period\""+"} }]");
            var ObjRectangle= jQuery.parseJSON(JSON.stringify(myArrayPoints));.


canvasOverlay: {
                    show: true,
                    objects: 
               [                 
                      
                    ObjRectangle
                ]}


Please correct me,if I am wrong.

.
Thanks & Regards,
Anirudha Deshpande 
Reply all
Reply to author
Forward
0 new messages