On making Point Custom Click Stop Works #1733
Labels
Comments
|
try increasing point.sensitivity value point: {
pattern: [
"<g><circle cx='10' cy='10' r='10'></circle><rect x='5' y='5' width='10' height='10' style='fill:#fff'></rect></g>"
],
sensitivity: 30
} |
|
HI @netil
|
|
Plz, provide reproducible working code for check. |
|
Please find below code |
|
HI @netil Did you got chance to look at code ? able to reproduce issue? |
|
if you overwrite data point by will remove correct functioning. function setPointSymbol()
{
abc.$.circles.each(function(){
debugger
this.outerHTML=diamondHtml
});
}`And I'm seeing incorrect approach from the code provided. I think Is useless using
var abc = bb.generate({
padding:{},
bindto:"#chart1",
zoom:{"enabled":false},
subchart:{"size":{"height":12},"show":false},
point:{
"pattern":[
`<rect width="3" height="3" style="fill:red;stroke-width:1;stroke:red" transform="rotate(-45 3 3)">`,
],
sensitivity: 50,
select: {
r: 1
},
},
data:
{
"xs":{"Series1":"134.566","Series2":"145.676"},
"xFormat":"%Y-%m-%d %H:%M:%S",
"columns":[
["134.566","2020-09-19 04:00:01","2020-09-19 23:29:46","2020-09-20 00:56:10","2020-09-20 02:22:34","2020-09-20 03:48:58","2020-09-20 05:15:22","2020-09-20 06:41:46","2020-09-20 08:08:10","2020-09-20 09:34:34","2020-09-20 11:00:58","2020-09-20 12:27:22","2020-09-20 13:53:46","2020-09-20 15:20:10","2020-09-20 16:46:34","2020-09-20 18:12:58","2020-09-20 19:39:22","2020-09-20 21:05:46","2020-09-20 22:32:10","2020-09-20 23:58:34","2020-09-21 01:24:58","2020-09-21 02:51:22","2020-09-22 02:48:01","2020-09-19 22:03:22","2020-09-19 23:29:46","2020-09-20 00:56:10","2020-09-20 02:22:34","2020-09-20 03:48:58","2020-09-20 05:15:22","2020-09-20 06:41:46","2020-09-20 08:08:10","2020-09-20 09:34:34","2020-09-20 11:00:58","2020-09-20 12:27:22","2020-09-20 13:53:46","2020-09-20 15:20:10","2020-09-20 16:46:34","2020-09-20 18:12:58","2020-09-20 19:39:22","2020-09-20 21:05:46","2020-09-20 22:32:10","2020-09-20 23:58:34","2020-09-21 01:24:58","2020-09-21 02:51:22","2020-09-21 04:17:46"],
["145.676","2020-09-19 22:03:22","2020-09-19 23:29:46","2020-09-19 22:03:22","2020-09-19 23:29:46"],
["Series1",26.8715170658834,17.806311159081,27.4838512911365,30.1629544275787,25.7372073687349,13.7174922721445,14.7832024322709,27.0552340181037,16.6885169688142,15.1171701065841,24.388260883552,32.6849728711951,16.4854949563814,31.1892358905941,17.2784962106645,27.9588088018725,24.1392810531018,16.3225998629261,28.511217670475,27.2286143325453,29.8336957717882,15.9340444653004,23.3780667145999,29.3489072103733,22.6277259027292,25.6704948403121,29.759710629001,21.5107495161506,17.9624525804379,22.1878679943229,16.5911362293172,27.2449889116911,32.5340579950165,13.4525676493021,28.633966976357,16.6495367221615,30.3414460546533,19.661723894034,32.0332336323647,20.355967448356,16.1874654472671,25.4839429048445,24.9163897901302,14.164561094793],
["Series2",25.7051543461472,16.8792398139194,19.1233227040687,23.7374131532805]
],
"labels":false,
"hide":[],
onclick:(data)=> {
debugger
GetTooptipData(abc,data,false);
}
},
"grid":{"x":{"lines":[]},"y":{"lines":[]}},
"legend":{"show":true,"position":"bottom", "usePoint": true},
//"color":{"pattern":["#FFFFFF","#FFFF00"]},
"regions":[{"axis":"y","start":13,"end":15,"class":"red"},{"axis":"y","start":15,"end":17,"class":"orange"},{"axis":"y","start":29,"end":31,"class":"orange"},{"axis":"y","start":31,"end":40,"class":"red"}],
"size":{"height":231},
"resize":{"auto":true},
"bar":{"width":{}},
"axis":{"x":{"type":"timeseries","localtime":true,"tick":{"format":"%d %H","rotate":0,"values":["2020-09-19 10:28:49","2020-09-19 22:28:49","2020-09-20 10:28:49","2020-09-20 22:28:49","2020-09-21 10:28:49","2020-09-21 22:28:49"]},"label":{text:"","position":"outer-center"},"show":true},"y":{"label":{text:"","position":"outer-middle"},"default":[13,33],"tick":{"values":[13,17,21,25,29,33]},"max":33,"min":13,"padding":{"bottom":0,"top":0},"show":true},"y2":{"show":false}},
"tooltip":{
"format":{},
"contents":()=>"",
onshow: (data) => {
GetTooptipData(abc,data,true)
},
"grouped":false},
});
function GetTooptipData(abc,d,flag) {
return new Promise(resolve => {
if(isShowTooltipOnHover == flag)
resolve(tooltipdata);
}).then(msg => {
abc.$.tooltip.html(`${msg}`);
});
} |
|
Thanks a lot @netil But we need to use this approach to achieve "Multiple type of point shape in Single Series" which billboard is not providing. will wait till next release to get this issue resolved |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Ticket Reference : #1711
@netil
After Making point customize , data click is not working
The text was updated successfully, but these errors were encountered: