How can I "unfill" a strokeRect ?


« Back to message list
Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Sudarshan on 28th April 2017
Hi Richard,

I am drawing bar chart if i am clicked on bar i am highlighting the bar with black colour by using this

         var top = shape[1];
         var left = shape[2];
         var width = shape[3];
         var height = shape[4];
         co.strokeStyle = 'black';
         co.fillStyle = 'black';
         co.strokeRect(top, left, width, height);
         co.fillRect(top, left, width, height);
if i am selected on bar it's turned in to black shape that's working fine if i am click on same (already bar filled with black colour )bar how can i remove this black colour is there any option to unfill the colour i am using the colour sequential true so how can i solve this problem

Thank you
Sudarshan
Posted by Richard on 28th April 2017
Hi there,

Something like this example?

www.rgraph.net/tests/bar-multiple-select.html




Richard
Posted by Sudarshan on 28th April 2017
Hi Richard,

I am already used the above example it's working fine but if i selected one bar the border is highlighting
in that i wrote my another function to generate other charts the bar is on selection mode if i clicked on another canvas also the same function is calling if i clicked on any canvas it's going to the function may with that on draw function how can i solve this issue.
Posted by Richard on 28th April 2017
Hi there,

Sorry I can't tell what you're saying. Try posting a URL to an example page.

Richard
Posted by Jhon on 30th April 2017
Hi Richard,

<html><head>
     <meta name="robots" content="noindex">
    
     <script src="RGraph.common.core.js"></script>
     <script src="RGraph.common.dynamic.js"></script>
     <script src="RGraph.bar.js"></script>
</head>
<body>
     <canvas id=cvs1></canvas>
     <div id="cvs_rgraph_domtext_wrapper" class="rgraph_domtext_wrapper" style="overflow: visible; width: 600px; height: 250px; display: inline-block; position: relative;"><canvas id="cvs" width="600" height="250" style="border: 1px solid rgb(204, 204, 204); position: absolute; left: 0px; top: 0px; display: inline; float: none; cursor: default;">[No canvas support]</canvas><span id="300_6__cvs" style="position: absolute; display: inline; left: 301px; top: 6.048px; color: rgb(0, 0, 0); font-family: &quot;Segoe UI&quot;, Arial, Verdana, sans-serif; font-weight: bold; font-style: normal; font-size: 14pt; white-space: nowrap; text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; pointer-events: auto; text-align: center;"></span><span id="20_181_2_cvs" style="position: absolute; display: inline; left: 11.0667px; top: 173.448px; color: rgb(0, 0, 0); font-family: &quot;Segoe UI&quot;, Arial, Verdana, sans-serif; font-weight: normal; font-style: normal; font-size: 12pt; white-space: nowrap; text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; pointer-events: auto; text-align: right;">2</span><span id="20_142_4_cvs" style="position: absolute; display: inline; left: 11.0667px; top: 134.136px; color: rgb(0, 0, 0); font-family: &quot;Segoe UI&quot;, Arial, Verdana, sans-serif; font-weight: normal; font-style: normal; font-size: 12pt; white-space: nowrap; text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; pointer-events: auto; text-align: right;">4</span><span id="20_103_6_cvs" style="position: absolute; display: inline; left: 11.0667px; top: 94.824px; color: rgb(0, 0, 0); font-family: &quot;Segoe UI&quot;, Arial, Verdana, sans-serif; font-weight: normal; font-style: normal; font-size: 12pt; white-space: nowrap; text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; pointer-events: auto; text-align: right;">6</span><span id="20_64_8_cvs" style="position: absolute; display: inline; left: 11.0667px; top: 55.512px; color: rgb(0, 0, 0); font-family: &quot;Segoe UI&quot;, Arial, Verdana, sans-serif; font-weight: normal; font-style: normal; font-size: 12pt; white-space: nowrap; text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; pointer-events: auto; text-align: right;">8</span><span id="20_25_10_cvs" style="position: absolute; display: inline; left: 2.0667px; top: 16.2px; color: rgb(0, 0, 0); font-family: &quot;Segoe UI&quot;, Arial, Verdana, sans-serif; font-weight: normal; font-style: normal; font-size: 12pt; white-space: nowrap; text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; pointer-events: auto; text-align: right;">10</span><span id="20_220_0_cvs" style="position: absolute; display: inline; left: 11.0667px; top: 212.76px; color: rgb(0, 0, 0); font-family: &quot;Segoe UI&quot;, Arial, Verdana, sans-serif; font-weight: normal; font-style: normal; font-size: 12pt; white-space: nowrap; text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; pointer-events: auto; text-align: right;">0</span></div>
    
     <script>
         state = {
             selected: []
         };

         bar = new RGraph.Bar({
             id: 'cvs',
             data: [4,8,6,3,5,6,8,9],
             options: {
             }
         }).draw().on('mousemove', function (e, shape)
         {
             return true;
         }).draw().on('click', function (e, shape)
         {
             state.selected[shape.index] = state.selected[shape.index] ? false : true;
             RGraph.redraw();
         }).on('draw', function (obj)
         {
           console.log("click event fires on canvas");
             for (var i=0; i<obj.data.length; ++i) {
                 if (state.selected[i]) {
                
                     var coords = obj.coords[i];
                
                     RGraph.path2(
                         obj.context,
                         'lw 3 b r % % % % f rgba(255,255,255,0.8) s #a00 lw 1',
                         coords[0],
                         coords[1],
                         coords[2],
                         coords[3]
                     );
                 }
             }
         });
     </script>
<script>
   var bar = new RGraph.Bar({
             id: 'cvs1',
             data: [12,13,16,15,16,19,19,12,23,16,13,24],
             options: {
                 textAccessible: true,
                 gutterTop: 35,
                 gutterLeft: 35,
                 title: 'A basic chart',
                 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
             }
         }).draw();
</script>

</body></html>

plese use this code in this exmple i am added two canvases cvs and cvs1 i drawn onclick function for the cvs not for the   cvs1 but i am clicked on any canvas the console is printing how can i solve this issue
Posted by Richard on 30th April 2017
Hi there,

Is this related to the other message that I've responded to?


Richard

Add a reply




« Back to message list