Open BhavikThakkar opened 3 years ago
netil
commented
3 years ago 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
}
BhavikThakkar
commented
3 years ago HI @netil It is not working , I have did point level customization and have update OuterHtml for point
netil
commented
3 years ago Plz, provide reproducible working code for check. I can't determine the issue based on your screenshot's code.
BhavikThakkar
commented
3 years ago Please find below code
import "billboard.js/dist/theme/insight.css";
import bb from "billboard.js";
// for ESM environment, need to import modules as:
// import bb, {line} from "billboard.js"
const isShowTooltipOnHover =false;
const tooltipdata ='<style>'+
' .Status_Black {'+
' color: black;'+
' font-family: Arial;'+
' }'+
' .white-bg{'+
' background: white;'+
' }'+
''+
' .Status_Red {'+
' color: red;'+
' font-family: Arial;'+
' font-weight: bold;'+
' }'+
''+
' .Status_Orange {'+
' color: #FFA500;'+
' font-family: Arial;'+
' font-weight: bold;'+
' }'+
''+
' .ColHeader {'+
' color: black;'+
' font-family: Arial;'+
' font-weight: bold;'+
' width: 25%;'+
' }'+
''+
' .MeasureTable {'+
' width: 250px;'+
' background-color: gree;'+
' margin: 0;'+
' padding: 0;'+
' border: 0;'+
' }'+
''+
' .ColLeft {'+
' text-align: left;'+
' }'+
''+
' .ColRight {'+
' text-align: right;'+
' }'+
''+
' .ColCenter {'+
' text-align: center;'+
' }'+
' .table{'+
' border-collapse: collapse;'+
' border: 1px solid black;'+
' }'+
' tr, td, th{'+
' border: 1px solid black;'+
' }'+
' .table-header{'+
' background: white;'+
' }'+
' '+
' </style><div class="Status_Black ColLeft white-bg" bgcolor="white"> Date my wish ti show<mat-dialog-actions><button mat-button mat-dialog-close>Cancel</button><button id="modalBtnId" style="position: absolute;right: 12px;top: 4px;" class="filled-button mat-icon-button" mat-dialog-close><mat-icon class="mat-icon material-icons" style="line-height: 30px;" role="img" aria-hidden="true" onclick="closeTooltip()">close</mat-icon></button></mat-dialog-actions><br/> '+
' Operator Skippy <br/> '+
' <div class="ScrollTable"> '+
' <table class="MeasureTable"><thead><tr><th class="ColHeader ColCenter">Head</th><th class="ColHeader ColCenter">Sample</th><th class="ColHeader ColCenter">Reading</th><th class="ColHeader ColCenter">Value</th></tr></thead><tfoot><tr><th></th><th></th><th></th><th></th></tr></tfoot><tbody><tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr></tbody></table></div></div>'
const diamondHtml = '<rect width=' + 3 + ' height=' + 3 + ' ' +'style="fill:' + "red" + ';stroke-width:' + 1+ ';stroke:' + "red"+ ' " x=' + 3 + ' y=" ' + 3 + '" transform = "rotate(-45 ' + 3 + ' ' + 3 + ')" />'
var abc = bb.generate({
padding:{},
bindto:"#chart1",
zoom:{"enabled":false},
subchart:{"size":{"height":12},"show":false},
point:{
"pattern":["circle","rectangle"],
sensitivity: 50,
select: {
r: 1
},
},
data:
{
"xs":{"Series 1":"134.566","Series 2":"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"],["Series 1",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],["Series 2",25.7051543461472,16.8792398139194,19.1233227040687,23.7374131532805]],
"types": {
"Series 1": "line",
"Series 2": "line"
},
"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},
});
setPointSymbol()
function GetTooptipData(abc,d,flag)
{
return new Promise(resolve => {
if(isShowTooltipOnHover == flag)
resolve(tooltipdata);
}).then(msg => {
abc.$.tooltip.html(`${msg}`);
});
}
function setPointSymbol()
{
abc.$.circles.each(function(){
debugger
this.outerHTML=diamondHtml
});
}`
[Untitled_ Oct 21 2020 3_34 PM (1).zip](https://github.com/naver/billboard.js/files/5415057/Untitled_.Oct.21.2020.3_34.PM.1.zip)
PLease find video tooHI @netil
Did you got chance to look at code ? able to reproduce issue?
netil
commented
3 years ago 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 diamondHtml value.
Just setting point.pattern as below, will work.
BTW, there's a bug handling spaced data name(#1739), so try removing space from the data name. The issue will be fixed on next release
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
Ticket Reference : #1711
@netil
After Making point customize , data click is not working