How can I "unfill" a strokeRect ?
« Back to message list
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 2017Posted by Sudarshan on 28th April 2017I 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
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 2017I 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.
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 2017Sorry I can't tell what you're saying. Try posting a URL to an example page.
Richard
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: "Segoe UI", 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: "Segoe UI", 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: "Segoe UI", 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: "Segoe UI", 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: "Segoe UI", 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: "Segoe UI", 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: "Segoe UI", 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<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: "Segoe UI", 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: "Segoe UI", 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: "Segoe UI", 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: "Segoe UI", 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: "Segoe UI", 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: "Segoe UI", 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: "Segoe UI", 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
Hi there,
Is this related to the other message that I've responded to?
Richard
Is this related to the other message that I've responded to?
Richard
Add a reply
« Back to message list