From 9923303279d638ed71c3f074446f127bb54b74d6 Mon Sep 17 00:00:00 2001 From: Francois Vancoppenolle Date: Sat, 31 Dec 2016 09:27:12 +0100 Subject: [PATCH 01/14] Create annotate.js --- Add-ins/annotate.js | 1582 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1582 insertions(+) create mode 100644 Add-ins/annotate.js diff --git a/Add-ins/annotate.js b/Add-ins/annotate.js new file mode 100644 index 0000000..6541aa4 --- /dev/null +++ b/Add-ins/annotate.js @@ -0,0 +1,1582 @@ + + +// options with associated default value defined in chartNew.js + +// annotateDisplay: false, +// annotateRelocate: false, +// annotateFunction: "mousemove", +// annotateFontFamily: "'Arial'", +// annotateBorder: 'none', +// annotateBorderRadius: '2px', +// annotateBackgroundColor: 'rgba(0,0,0,0.8)', +// annotateFontSize: 12, +// annotateFontColor: 'white', +// annotateFontStyle: "normal", +// annotatePadding: "3px", +// annotateClassName: "", +// annotateFunctionIn: null, +// annotateFunctionOut : null, + +// annotateBarMinimumDetectionHeight : 0, + +// chart.defaults.IExplorer8 ={ +// annotateBackgroundColor : "black", +// annotateFontColor: "white" +// }; + +var style = document.createElement('style'); +style.type = 'text/css'; + +line=""; +line=line+".toolTipTopRight { "; +line=line+"} "; +line=line+".toolTipTopLeft { "; +line=line+"} "; +line=line+".toolTipTopCenter { "; +line=line+"} "; +line=line+".toolTipBottomRight { "; +line=line+"} "; +line=line+".toolTipBottomLeft { "; +line=line+"} "; +line=line+".toolTipBottomCenter { "; +line=line+"} "; +line=line+".toolTipRightTop { "; +line=line+"} "; +line=line+".toolTipRightBottom { "; +line=line+"} "; +line=line+".toolTipRightCenter { "; +line=line+"} "; +line=line+".toolTipLeftTop { "; +line=line+"} "; +line=line+".toolTipLeftBottom { "; +line=line+"} "; +line=line+".toolTipLeftCenter { "; +line=line+"} "; +line=line+".toolTipLeftNone { "; +line=line+"}"; +line=line+'.toolTipTopRight .toolTipTopRightText::after { '; +line=line+' content: ""; '; +line=line+' position: absolute; '; +line=line+' border-style: solid; '; +line=line+' border-color: transparent transparent #555 transparent; '; +line=line+' '; +line=line+' bottom: 100%; '; +line=line+' right: 5px; '; +line=line+' '; +line=line+' width: 0; '; +line=line+' height: 0; '; +line=line+' border-left: 5px solid transparent; '; +line=line+' border-right: 5px solid transparent; '; +line=line+' '; +line=line+'/* border-bottom: 5px solid black; */ '; +line=line+'} '; +line=line+'.toolTipTopLeft .toolTipTopLeftText::after { '; +line=line+' content: ""; '; +line=line+' position: absolute; '; +line=line+' border-style: solid; '; +line=line+' border-color: transparent transparent #555 transparent; '; +line=line+' '; +line=line+' bottom: 100%; '; +line=line+' left: 5px; '; +line=line+' '; +line=line+' width: 0; '; +line=line+' height: 0; '; +line=line+' border-left: 5px solid transparent; '; +line=line+' border-right: 5px solid transparent; '; +line=line+' '; +line=line+'/* border-bottom: 5px solid black; */ '; +line=line+'} '; +line=line+' '; +line=line+'.toolTipTopCenter .toolTipTopCenterText::after { '; +line=line+' content: ""; '; +line=line+' position: absolute; '; +line=line+' border-style: solid; '; +line=line+' border-color: transparent transparent #555 transparent; '; +line=line+' '; +line=line+' bottom: 100%; '; +line=line+' left: 50%; '; +line=line+' '; +line=line+' width: 0; '; +line=line+' height: 0; '; +line=line+' border-left: 5px solid transparent; '; +line=line+' border-right: 5px solid transparent; '; +line=line+' margin-left : -5px; '; +line=line+' '; +line=line+'/* border-bottom: 5px solid black; */ '; +line=line+'} '; +line=line+' '; +line=line+'.toolTipBottomRight .toolTipBottomRightText::after { '; +line=line+' content: ""; '; +line=line+' position: absolute; '; +line=line+' border-style: solid; '; +line=line+' border-color: #555 transparent transparent transparent; '; +line=line+' '; +line=line+' top: 100%; '; +line=line+' right: 5px; '; +line=line+' '; +line=line+' width: 0; '; +line=line+' height: 0; '; +line=line+' border-left: 5px solid transparent; '; +line=line+' border-right: 5px solid transparent; '; +line=line+' '; +line=line+'/* border-top: 5px solid black;*/ '; +line=line+'} '; +line=line+' '; +line=line+'.toolTipBottomLeft .toolTipBottomLeftText::after { '; +line=line+' content: ""; '; +line=line+' position: absolute; '; +line=line+' border-style: solid; '; +line=line+' border-color: #555 transparent transparent transparent; '; +line=line+' '; +line=line+' top: 100%; '; +line=line+' left: 5px; '; +line=line+' '; +line=line+' width: 0; '; +line=line+' height: 0; '; +line=line+' border-left: 5px solid transparent; '; +line=line+' border-right: 5px solid transparent; '; +line=line+' '; +line=line+'/* border-top: 5px solid black; */ '; +line=line+'} '; +line=line+' '; +line=line+'.toolTipBottomCenter .toolTipBottomCenterText::after { '; +line=line+' content: ""; '; +line=line+' position: absolute; '; +line=line+' border-style: solid; '; +line=line+' border-color: #555 transparent transparent transparent; '; +line=line+' '; +line=line+' top: 100%; '; +line=line+' left: 50%; '; +line=line+' '; +line=line+' width: 0; '; +line=line+' height: 0; '; +line=line+' border-left: 5px solid transparent; '; +line=line+' border-right: 5px solid transparent; '; +line=line+' '; +line=line+' margin-left: -5px; '; +line=line+' '; +line=line+'/* border-top: 5px solid black; */ '; +line=line+'} '; +line=line+' '; +line=line+'.toolTipRightTop .toolTipRightTopText::after { '; +line=line+' content: ""; '; +line=line+' position: absolute; '; +line=line+' border-style: solid; '; +line=line+' border-color: transparent transparent transparent #555 ; '; +line=line+' '; +line=line+' top: 5px; '; +line=line+' left: 100%; '; +line=line+' '; +line=line+' width: 0; '; +line=line+' height: 0; '; +line=line+' border-top: 5px solid transparent; '; +line=line+' border-bottom: 5px solid transparent; '; +line=line+' '; +line=line+'/* border-left: 5px solid green; */ '; +line=line+'} '; +line=line+' '; +line=line+'.toolTipRightBottom .toolTipRightBottomText::after { '; +line=line+' content: ""; '; +line=line+' position: absolute; '; +line=line+' border-style: solid; '; +line=line+' border-color: transparent transparent transparent #555 ; '; +line=line+' '; +line=line+' bottom: 5px; '; +line=line+' left: 100%; '; +line=line+' '; +line=line+' width: 0; '; +line=line+' height: 0; '; +line=line+' border-top: 5px solid transparent; '; +line=line+' border-bottom: 5px solid transparent; '; +line=line+' '; +line=line+'/* border-left: 5px solid green; */ '; +line=line+'} '; +line=line+' '; +line=line+'.toolTipRightCenter .toolTipRightCenterText::after { '; +line=line+' content: ""; '; +line=line+' position: absolute; '; +line=line+' border-style: solid; '; +line=line+' border-color: transparent transparent transparent #555 ; '; +line=line+' '; +line=line+' bottom: 50%; '; +line=line+' left: 100%; '; +line=line+' '; +line=line+' width: 0; '; +line=line+' height: 0; '; +line=line+' border-top: 5px solid transparent; '; +line=line+' border-bottom: 5px solid transparent; '; +line=line+' margin-bottom: -5px; '; +line=line+' '; +line=line+'/* border-left: 5px solid green; */ '; +line=line+'} '; +line=line+' '; +line=line+'.toolTipLeftBottom .toolTipLeftBottomText::after { '; +line=line+' content: ""; '; +line=line+' position: absolute; '; +line=line+' border-style: solid; '; +line=line+' border-color: transparent #555 transparent transparent ; '; +line=line+' '; +line=line+' bottom: 5px; '; +line=line+' right: 100%; '; +line=line+' '; +line=line+' width: 0; '; +line=line+' height: 0; '; +line=line+' border-top: 5px solid transparent; '; +line=line+' border-bottom: 5px solid transparent; '; +line=line+' '; +line=line+'/* border-right: 5px solid green; */ '; +line=line+'} '; +line=line+' '; +line=line+'.toolTipLeftTop .toolTipLeftTopText::after { '; +line=line+' content: ""; '; +line=line+' position: absolute; '; +line=line+' border-style: solid; '; +line=line+' border-color: transparent #555 transparent transparent ; '; +line=line+' '; +line=line+' top: 5px; '; +line=line+' right: 100%; '; +line=line+' '; +line=line+' width: 0; '; +line=line+' height: 0; '; +line=line+' border-top: 5px solid transparent; '; +line=line+' border-bottom: 5px solid transparent; '; +line=line+' '; +line=line+'/* border-right: 5px solid green; */ '; +line=line+'} '; +line=line+' '; +line=line+'.toolTipLeftCenter .toolTipLeftCenterText::after { '; +line=line+' content: ""; '; +line=line+' position: absolute; '; +line=line+' border-style: solid; '; +line=line+' border-color: transparent #555 transparent transparent ; '; +line=line+' '; +line=line+' bottom: 50%; '; +line=line+' right: 100%; '; +line=line+' '; +line=line+' width: 0; '; +line=line+' height: 0; '; +line=line+' border-top: 5px solid transparent; '; +line=line+' border-bottom: 5px solid transparent; '; +line=line+' margin-bottom: -5px; '; +line=line+' '; +line=line+'/* border-right: 5px solid green; */ '; +line=line+'} '; +line=line+' '; +line=line+'.toolTipNone .toolTipNoneText::after { '; +line=line+' content: ""; '; +line=line+' position: absolute; '; +line=line+'} '; + +style.innerHTML = line +document.getElementsByTagName('head')[0].appendChild(style); + + +///// + +var style = document.createElement('style'); +style.type = 'text/css'; +line=""; +line=line+"#bubble_tooltip{ "; +line=line+"width:147px; "; +line=line+"position:absolute; "; +line=line+"display:none; "; +line=line+"} "; +line=line+"#bubble_tooltip .bubble_top{ "; +line=line+"background-image: url('../Add-ins/bubble_top.gif'); "; +line=line+"background-repeat:no-repeat; "; +line=line+"height:16px; "; +line=line+"} "; +line=line+"#bubble_tooltip .bubble_middle{ "; +line=line+"background-image: url('../Add-ins/bubble_middle.gif'); "; +line=line+"background-repeat:repeat-y; "; +line=line+"background-position:bottom left; "; +line=line+"padding-left:7px; "; +line=line+"padding-right:7px; "; +line=line+"} "; +line=line+"#bubble_tooltip .bubble_middle span{ "; +line=line+"position:relative; "; +line=line+"top:-8px; "; +line=line+"font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; "; +line=line+"font-size:11px; "; +line=line+"} "; +line=line+"#bubble_tooltip .bubble_bottom{ "; +line=line+"background-image: url('../Add-ins/bubble_bottom.gif'); "; +line=line+"background-repeat:no-repeat; "; +line=line+"background-repeat:no-repeat; "; +line=line+"height:44px; "; +line=line+"position:relative; "; +line=line+"top:-6px; "; +line=line+"} "; +style.innerHTML = line +document.getElementsByTagName('head')[0].appendChild(style); + + +///// + + + +function createCursorDiv(config) { + + + if (cursorDivCreated == false) { + + cursorDivCreated=true; + + if(annotate_shape=="bubble_tooltip") { + var div = document.createElement('div'); + div.id = 'bubble_tooltip'; + document.body.appendChild(div); + + var subdiv1 = document.createElement('div'); + subdiv1.id = 'bubble_top'; + subdiv1.className = 'bubble_top'; + div.appendChild(subdiv1); + + var subdiv2 = document.createElement('div'); + subdiv2.id = 'bubble_middle'; + subdiv2.className = 'bubble_middle'; + div.appendChild(subdiv2); + + + var subdiv3 = document.createElement('div'); + subdiv3.id = 'bubble_bottom'; + subdiv3.className = 'bubble_bottom'; + div.appendChild(subdiv3); + + var spa = document.createElement('span'); + spa.id = "bubble_tooltip_content"; + subdiv2.appendChild(spa); + } else if(annotate_shape == "ARROW") { + updateClass(".toolTipTopRight","font-size:"+config.annotateFontSize+"pt;font-style:"+config.annotateFontStyle+";font-family:"+config.annotateFontFamily+";background-color:"+config.annotateBackgroundColor+";padding:"+config.annotatePadding+"; border-style: "+config.annotateBorder+"; border-radius:"+config.annotateBorderRadius+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipTopLeft","font-size:"+config.annotateFontSize+"pt;font-style:"+config.annotateFontStyle+";font-family:"+config.annotateFontFamily+";background-color:"+config.annotateBackgroundColor+";padding:"+config.annotatePadding+"; border-style: "+config.annotateBorder+"; border-radius:"+config.annotateBorderRadius+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipTopCenter","font-size:"+config.annotateFontSize+"pt;font-style:"+config.annotateFontStyle+";font-family:"+config.annotateFontFamily+";background-color:"+config.annotateBackgroundColor+";padding:"+config.annotatePadding+"; border-style: "+config.annotateBorder+"; border-radius:"+config.annotateBorderRadius+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipBottomRight","font-size:"+config.annotateFontSize+"pt;font-style:"+config.annotateFontStyle+";font-family:"+config.annotateFontFamily+";background-color:"+config.annotateBackgroundColor+";padding:"+config.annotatePadding+"; border-style: "+config.annotateBorder+"; border-radius:"+config.annotateBorderRadius+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipBottomLeft","font-size:"+config.annotateFontSize+"pt;font-style:"+config.annotateFontStyle+";font-family:"+config.annotateFontFamily+";background-color:"+config.annotateBackgroundColor+";padding:"+config.annotatePadding+"; border-style: "+config.annotateBorder+"; border-radius:"+config.annotateBorderRadius+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipBottomCenter","font-size:"+config.annotateFontSize+"pt;font-style:"+config.annotateFontStyle+";font-family:"+config.annotateFontFamily+";background-color:"+config.annotateBackgroundColor+";padding:"+config.annotatePadding+"; border-style: "+config.annotateBorder+"; border-radius:"+config.annotateBorderRadius+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipRightTop","font-size:"+config.annotateFontSize+"pt;font-style:"+config.annotateFontStyle+";font-family:"+config.annotateFontFamily+";background-color:"+config.annotateBackgroundColor+";padding:"+config.annotatePadding+"; border-style: "+config.annotateBorder+"; border-radius:"+config.annotateBorderRadius+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipRightBottom","font-size:"+config.annotateFontSize+"pt;font-style:"+config.annotateFontStyle+";font-family:"+config.annotateFontFamily+";background-color:"+config.annotateBackgroundColor+";padding:"+config.annotatePadding+"; border-style: "+config.annotateBorder+"; border-radius:"+config.annotateBorderRadius+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipRightCenter","font-size:"+config.annotateFontSize+"pt;font-style:"+config.annotateFontStyle+";font-family:"+config.annotateFontFamily+";background-color:"+config.annotateBackgroundColor+";padding:"+config.annotatePadding+"; border-style: "+config.annotateBorder+"; border-radius:"+config.annotateBorderRadius+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipLeftTop","font-size:"+config.annotateFontSize+"pt;font-style:"+config.annotateFontStyle+";font-family:"+config.annotateFontFamily+";background-color:"+config.annotateBackgroundColor+";padding:"+config.annotatePadding+"; border-style: "+config.annotateBorder+"; border-radius:"+config.annotateBorderRadius+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipLeftBottom","font-size:"+config.annotateFontSize+"pt;font-style:"+config.annotateFontStyle+";font-family:"+config.annotateFontFamily+";background-color:"+config.annotateBackgroundColor+";padding:"+config.annotatePadding+"; border-style: "+config.annotateBorder+"; border-radius:"+config.annotateBorderRadius+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipLeftCenter","font-size:"+config.annotateFontSize+"pt;font-style:"+config.annotateFontStyle+";font-family:"+config.annotateFontFamily+";background-color:"+config.annotateBackgroundColor+";padding:"+config.annotatePadding+"; border-style: "+config.annotateBorder+"; border-radius:"+config.annotateBorderRadius+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipNone","font-size:"+config.annotateFontSize+"pt;font-style:"+config.annotateFontStyle+";font-family:"+config.annotateFontFamily+";background-color:"+config.annotateBackgroundColor+";padding:"+config.annotatePadding+"; border-style: "+config.annotateBorder+"; border-radius:"+config.annotateBorderRadius+"; color:"+config.annotateFontColor+";"); + + updateClass(".toolTipTopRight .toolTipTopRightText::after","border-bottom: 5px solid " +config.annotateBackgroundColor+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipTopLeft .toolTipTopLeftText::after","border-bottom: 5px solid " +config.annotateBackgroundColor+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipTopCenter .toolTipTopCenterText::after","border-bottom: 5px solid " +config.annotateBackgroundColor+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipBottomRight .toolTipBottomRightText::after","border-top: 5px solid " +config.annotateBackgroundColor+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipBottomLeft .toolTipBottomLeftText::after","border-top: 5px solid " +config.annotateBackgroundColor+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipBottomCenter .toolTipBottomCenterText::after","border-top: 5px solid " +config.annotateBackgroundColor+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipRightTop .toolTipRightTopText::after","border-left: 5px solid " +config.annotateBackgroundColor+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipRightBottom .toolTipRightBottomText::after","border-left: 5px solid " +config.annotateBackgroundColor+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipRightCenter .toolTipRightCenterText::after","border-left: 5px solid " +config.annotateBackgroundColor+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipLeftTop .toolTipLeftTopText::after","border-right: 5px solid " +config.annotateBackgroundColor+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipLeftBottom .toolTipLeftBottomText::after","border-right: 5px solid " +config.annotateBackgroundColor+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipLeftCenter .toolTipLeftCenterText::after","border-right: 5px solid " +config.annotateBackgroundColor+"; color:"+config.annotateFontColor+";"); + updateClass(".toolTipNone .toolTipNoneText::after","border-right: 5px solid " +config.annotateBackgroundColor+"; color:"+config.annotateFontColor+";"); + + var div = document.createElement(annotate_shape); + div.id = annotate_shape; +// div.className = 'toolTipTopRight'; + div.style.position = 'absolute'; + document.body.appendChild(div); + + var spa = document.createElement('span'); + spa.id = "arrow_content"; +// spa.className = 'toolTipTopRightText'; + div.appendChild(spa); + + } else { + var div = document.createElement(annotate_shape); + div.id = annotate_shape; + div.style.position = 'absolute'; + document.body.appendChild(div); + } + + } +}; + + +function updateClass(name,rules){ + var style = document.createElement('style'); + style.type = 'text/css'; + document.getElementsByTagName('head')[0].appendChild(style); + if(!(style.sheet||{}).insertRule) + (style.styleSheet || style.sheet).addRule(name, rules); + else + style.sheet.insertRule(name+"{"+rules+"}",0); +} + +//var arrow_class="TopCenter"; + +function initAnnotateDiv(annotateDIV,config,ctx) { + if(annotate_shape == "ARROW") { + } else if(annotate_shape!='divCursor'){ + annotateDIV.className = annotate_shape; + annotateDIV.style.border = '' ; + annotateDIV.style.padding = '' ; + annotateDIV.style.borderRadius = ''; + annotateDIV.style.backgroundColor = '' ; + annotateDIV.style.color = '' ; + annotateDIV.style.fontFamily = '' ; + annotateDIV.style.fontSize = '' ; + annotateDIV.style.fontStyle = '' ; + } else { + annotateDIV.className = (config.annotateClassName) ? config.annotateClassName : ''; + annotateDIV.style.border = (config.annotateClassName) ? '' : config.annotateBorder; + annotateDIV.style.padding = (config.annotateClassName) ? '' : config.annotatePadding; + annotateDIV.style.borderRadius = (config.annotateClassName) ? '' : config.annotateBorderRadius; + annotateDIV.style.backgroundColor = (config.annotateClassName) ? '' : config.annotateBackgroundColor; + annotateDIV.style.color = (config.annotateClassName) ? '' : config.annotateFontColor; + annotateDIV.style.fontFamily = (config.annotateClassName) ? '' : config.annotateFontFamily; + annotateDIV.style.fontSize = (config.annotateClassName) ? '' : (Math.ceil(ctx.chartTextScale*config.annotateFontSize)).toString() + "pt"; + annotateDIV.style.fontStyle = (config.annotateClassName) ? '' : config.annotateFontStyle; + } + annotateDIV.style.zIndex = 999; +}; + + + +function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate,piece,myStatData,statData) { + var arrow_class; + var dispString,newPosX,newPosY,decalX,decalY; + var addDecalX,addDecalY; + decalX=0; + decalY=0; + +// initAnnotateDiv(annotateDIV,config,ctx); + + if(typeof config.annotatePaddingX==="number") addDecalX=1*config.annotatePaddingX; + else addDecalX=fromLeft; + if(typeof config.annotatePaddingY==="number") addDecalY=1*config.annotatePaddingY; + else addDecalY=fromTop; + + if (jsGraphAnnotate[ctx.ChartNewId][piece.piece][0] == "ARC") dispString = tmplbis(setOptionValue(true,true,1,"ANNOTATELABEL",ctx,data,jsGraphAnnotate[ctx.ChartNewId][piece.piece][3],undefined,config.annotateLabel,"annotateLabel",jsGraphAnnotate[ctx.ChartNewId][piece.piece][1],-1,{otherVal:true}), myStatData,config); + else dispString = tmplbis(setOptionValue(true,true,1,"ANNOTATELABEL",ctx,data,jsGraphAnnotate[ctx.ChartNewId][piece.piece][3],undefined,config.annotateLabel,"annotateLabel",jsGraphAnnotate[ctx.ChartNewId][piece.piece][1],jsGraphAnnotate[ctx.ChartNewId][piece.piece][2],{otherVal:true}), myStatData,config); + + if(annotate_shape=="bubble_tooltip") { + document.getElementById('bubble_tooltip_content').innerHTML = dispString; + annotateDIV.style.display='block'; +// if(document.all)e = event; + var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop); + if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; + var leftPos = event.clientX - 100; + if(leftPos<0)leftPos = 0; + annotateDIV.style.left = leftPos+'px'; + + annotateDIV.style.top = event.clientY - annotateDIV.offsetHeight -1 + st + 'px'; + + } else if(annotate_shape == "ARROW") { + document.getElementById('arrow_content').innerHTML = dispString; + } else { + annotateDIV.innerHTML = dispString; + + } + + + if(annotate_shape=="bubble_tooltip") { + var textMsr={textHeight: 100, textWidth : 147}; + } else { + var textMsr={}; + annotateDIV.style.display = true ? '' : 'none'; + var lrect = annotateDIV.getBoundingClientRect(); + textMsr.textHeight=lrect.height; + textMsr.textWidth=lrect.width; + } + ctx.restore(); + + // set position; + + var x,y; + x = bw.ns4 || bw.ns5 ? event.pageX : event.x; + y = bw.ns4 || bw.ns5 ? event.pageY : event.y; + if (bw.ie4 || bw.ie5) y = y + eval(scrolled); + + if(config.annotateRelocate===true && (typeof config.annotatePosition)=="undefined" || config.annotatePosition=="mouse") { + var relocateX, relocateY; + relocateX=0;relocateY=0; + if(x+fromLeft+textMsr.textWidth > window.innerWidth-rect.left-fromLeft)relocateX=-textMsr.textWidth; + if(y+fromTop+textMsr.textHeight > 1*window.innerHeight-1*rect.top+fromTop)relocateY-=(textMsr.textHeight+2*fromTop); + newPosX=Math.max(8-rect.left,x + fromLeft+relocateX); + newPosY=Math.max(8-rect.top,y + fromTop + relocateY); + } else { + newPosX=x; + newPosY=y; + } + + var mouse_posrect = getMousePos(ctx.canvas, event); + var vj; + + var debj=piece.j; + var endj=piece.j+1; + + var refpiecei=piece.i; + var refpiecej=piece.j; + + var rayVal=-1; + var midPosX=0; + var midPosY=0; + + var minDecalY,minDecalX,maxDecalY,maxDecalX,maxRayVal,minRayVal; + var angle=9999; + var minAngle, maxAngle; + var forceY=false; + var forceX=false; + var multX=0; + var multY=0; + + + tpchart=ctx.tpchart; + if(data.datasets[piece.i].type=="Line" && (ctx.tpchart=="Bar" || ctx.tpchart=="StackedBar"))tpchart="Line"; + + switch(config.annotatePositionAngle) { + case "center" : + case "middle" : + switch(tpchart) { + case "Pie" : + case "Doughnut" : + case "PolarArea" : + angle=(myStatData.startAngle+myStatData.endAngle)/2; + break; + case "StackedBar" : + case "Bar" : + case "HorizontalBar" : + case "HorizontalStackedBar" : + case "Line" : + case "Radar" : + default: + break; + } + break; + case "start" : + switch(tpchart) { + case "Pie" : + case "Doughnut" : + case "PolarArea" : + angle=myStatData.startAngle; + break; + case "StackedBar" : + case "Bar" : + case "HorizontalBar" : + case "HorizontalStackedBar" : + case "Line" : + case "Radar" : + default: + break; + } + break; + case "end" : + switch(tpchart) { + case "Pie" : + case "Doughnut" : + case "PolarArea" : + angle=myStatData.endAngle; + break; + case "StackedBar" : + case "Bar" : + case "HorizontalBar" : + case "HorizontalStackedBar" : + case "Line" : + case "Radar" : + default: + break; + } + break; + default: + switch(tpchart) { + case "Pie" : + case "Doughnut" : + case "PolarArea" : + midPosX=myStatData.midPosX; + midPosY=myStatData.midPosY; + if(midPosX == mouse_posrect.x && midPosX > mouse_posrect.y) angle=Math.PI/2; + else if(midPosX == mouse_posrect.x && midPosX > mouse_posrect.y) angle=-Math.PI/2; + else angle=Math.atan((midPosY-mouse_posrect.y)/(midPosX-mouse_posrect.x)); + if(midPosX>mouse_posrect.x)angle+=Math.PI; + break; + + } + break; + } + + switch(config.annotatePositionRadius) { + case "MXout" : + case "Xout" : + switch(tpchart) { + case "StackedBar" : + case "Bar" : + case "HorizontalBar" : + case "HorizontalStackedBar" : + case "Line" : + break; + case "Radar" : + decalY=myStatData.posY-mouse_posrect.y - textMsr.textHeight; + decalX=myStatData.posX-mouse_posrect.x; + var refVal=myStatData.datavalue; + for(i=0;istatData[i][j].datavalue) { + refVal=statData[i][j].datavalue; + decalY=statData[i][j].posY-mouse_posrect.y - textMsr.textHeight; + decalX=statData[i][j].posX-mouse_posrect.x; + } + } + }; + debj=piece.j;endj=piece.j+1; + break; + case "Pie" : + case "Doughnut" : + case "PolarArea" : + multX=2; + multY=2; + rayVal=myStatData.int_radius; + midPosX=myStatData.midPosX; + midPosY=myStatData.midPosY; + for(i=0;istatData[i][j].datavalue) { + minRefVal=statData[i][j].datavalue; + minDecalY=statData[i][j].posY-mouse_posrect.y - textMsr.textHeight; + minDecalX=statData[i][j].posX-mouse_posrect.x; + } + if (maxRefValstatData[i][j].int_radius) { + minRayVal=statData[i][j].int_radius; + } + if (maxRayVal=0) { + decalY=myStatData.yPosTop-mouse_posrect.y - textMsr.textHeight + for(i=0;i=0) decalY=myStatData.yPosTop-mouse_posrect.y - textMsr.textHeight; + else { + if (config.annotatePositionY=="Stop" || config.annotatePositionY=="SXtop") { decalY=myStatData.yPosTop-mouse_posrect.y + 0*textMsr.textHeight; addDecalY=-addDecalY; } + else {decalY=myStatData.yPosBottom-mouse_posrect.y - textMsr.textHeight;} + } + break; + case "HorizontalBar" : + case "HorizontalStackedBar" : + decalY=myStatData.yPosTop-mouse_posrect.y - textMsr.textHeight; + if(config.annotatePositionY=="Stop") { + var lrect = ctx.canvas.getBoundingClientRect(); + if(mouse_posrect.y<(lrect.height/2)) { + decalY=myStatData.yPosBottom-mouse_posrect.y - 0*textMsr.textHeight; + } + }; + break; + case "Radar" : + break; + case "Line" : + decalY=myStatData.posY-mouse_posrect.y - textMsr.textHeight; + break; + case "Pie" : + case "Doughnut" : + case "PolarArea" : + break; + }; + break; + case "LXbottom" : + switch(tpchart) { + case "Line" : + decalY=statData[piece.i][piece.j].posY-mouse_posrect.y - 1*textMsr.textHeight; + for(vj=0;vj=0) { + decalY=myStatData.yPosBottom-mouse_posrect.y + 0*textMsr.textHeight; + for(i=0;i=0 || config.annotatePositionY=="Xbottom" || config.annotatePositionY=="MXbottom" ) { + if(statData[i][0].tpchart!="Line")decalY=Math.max(decalY,Math.max(statData[i][vj].yPosTop,statData[i][vj].yPosBottom)-mouse_posrect.y + 0*textMsr.textHeight); + } + } + } + } + else { + if (config.annotatePositionY=="SXbottom") { + addDecalY=-addDecalY; + decalY=myStatData.yPosBottom-mouse_posrect.y - textMsr.textHeight; + for(i=0;i=0) decalY=myStatData.yPosBottom-mouse_posrect.y + 0*textMsr.textHeight; + else { + if (config.annotatePositionY=="Sbottom" || config.annotatePositionY=="SXbottom") {decalY=myStatData.yPosBottom-mouse_posrect.y - textMsr.textHeight; addDecalY=-addDecalY; } + else decalY=myStatData.yPosTop-mouse_posrect.y + 0*textMsr.textHeight; + } + break; + case "HorizontalBar" : + case "HorizontalStackedBar" : + decalY=myStatData.yPosBottom-mouse_posrect.y - 0*textMsr.textHeight; + if(config.annotatePositionY=="Sbottom") { + var lrect = ctx.canvas.getBoundingClientRect(); + if(mouse_posrect.y<(lrect.height/2)) { + decalY=myStatData.yPosTop-mouse_posrect.y - textMsr.textHeight; + } + }; + break; + case "Radar" : + decalY+=textMsr.textHeight; + break; + case "Line" : + decalY=myStatData.posY-mouse_posrect.y - 0*textMsr.textHeight; + break; + case "Pie" : + case "Doughnut" : + case "PolarArea" : + break; + }; + break; + case "Xcenter" : + case "Xmiddle" : + switch(tpchart) { + case "HorizontalBar" : + var mtop=Math.min(statData[piece.i][piece.j].yPosTop,statData[piece.i][piece.j].yPosBottom); + var mbottom=Math.max(statData[piece.i][piece.j].yPosTop,statData[piece.i][piece.j].yPosBottom); + + for(i=0;i=0) decalY=(myStatData.yPosBottom+myStatData.yPosTop)/2-mouse_posrect.y - 0.5*textMsr.textHeight; + else decalY=(myStatData.yPosBottom+myStatData.yPosTop)/2-mouse_posrect.y - 0.5*textMsr.textHeight; + break; + case "HorizontalBar" : + case "HorizontalStackedBar" : + decalY=(myStatData.yPosBottom+myStatData.yPosTop)/2-mouse_posrect.y - 0.5*textMsr.textHeight; + break; + case "Radar" : + decalY+=0.5*textMsr.textHeight; + break; + case "Line" : + decalY=myStatData.posY-mouse_posrect.y - 0.5*textMsr.textHeight; + break; + case "Pie" : + case "Doughnut" : + case "PolarArea" : + break; + }; + break; + default: + if(typeof config.annotatePositionY==="number") { + var lrect = ctx.canvas.getBoundingClientRect(); + decalY=-newPosY+1*config.annotatePositionY+lrect.top+window.pageYOffset; + forceY=true; + } else if (typeof config.annotatePositionY!="undefined" && config.annotatePositionY.indexOf("%")>0) { + var lrect = ctx.canvas.getBoundingClientRect(); + var pct=1*config.annotatePositionY.substr(0,config.annotatePositionY.indexOf("%")); + decalY=-newPosY+1*ctx.canvas.height*pct/100+lrect.top+window.pageYOffset; + if(Math.abs(pct-50) < config.zeroValue) { + decalY=decalY-textMsr.textHeight/2; + } else if(pct > 50) { + decalY=decalY-textMsr.textHeight; + } + forceY=true; + } + break; + } + + switch(config.annotatePositionX) { + + case "MXright" : + case "Xright" : + case "SXright" : + switch(tpchart) { + case "HorizontalStackedBar" : + case "HorizontalBar" : + if(myStatData.datavalue>=0) { + decalX=myStatData.xPosRight-mouse_posrect.x; + for(i=0;i(lrect.width/2)) { + decalX=myStatData.xPosLeft-mouse_posrect.x-textMsr.textWidth; + } + }; + break; + case "HorizontalStackedBar" : + case "HorizontalBar" : + if(myStatData.datavalue>=0) decalX=myStatData.xPosRight-mouse_posrect.x; + else { + if(config.annotatePositionX=="SXright" || config.annotatePositionX=="Sright") { + decalX=myStatData.xPosRight-mouse_posrect.x -textMsr.textWidth; + addDecalX=-addDecalX; + } else { + decalX=myStatData.xPosLeft-mouse_posrect.x ; + } + } + break; + case "Radar" : + break; + case "Line" : + decalX=myStatData.xPos-mouse_posrect.x; + break; + case "Pie" : + case "Doughnut" : + case "PolarArea" : + break; + }; + break; + case "MXleft" : + case "SXleft" : + case "Xleft" : + switch(tpchart) { + case "HorizontalStackedBar" : + case "HorizontalBar" : + if(myStatData.datavalue>=0) { + decalX=myStatData.xPosLeft-mouse_posrect.x-textMsr.textWidth; + for(i=0;i0) { + decalX=Math.min(decalX,Math.min(statData[i][vj].xPosLeft,statData[i][vj].xPosRight)-mouse_posrect.x-textMsr.textWidth); + } + } + } + } else { + if(config.annotatePositionX=="SXleft") { + addDecalX=-addDecalX; + decalX=myStatData.xPosLeft-mouse_posrect.x ; + for(i=0;i(lrect.width/2)) { + decalX=myStatData.xPosRight-mouse_posrect.x; + } + }; + break; + case "HorizontalStackedBar" : + case "HorizontalBar" : + if(myStatData.datavalue>=0) decalX=myStatData.xPosLeft-mouse_posrect.x-textMsr.textWidth; + else { + if(config.annotatePositionX=="Sleft" || config.annotatePositionX=="SXleft"){ + decalX=myStatData.xPosLeft-mouse_posrect.x ; + addDecalX=-addDecalX; + } else { + decalX=myStatData.xPosRight-mouse_posrect.x-textMsr.textWidth ; + } + } + break; + case "Radar" : + decalX-=textMsr.textWidth; + break; + case "Line" : + decalX=myStatData.xPos-mouse_posrect.x-textMsr.textWidth; + break; + case "Pie" : + case "Doughnut" : + case "PolarArea" : + break; + }; + break; + case "Xcenter" : + case "Xmiddle" : + switch(tpchart) { + case "Bar" : + var mright=Math.min(statData[piece.i][piece.j].xPosRight,statData[piece.i][piece.j].xPosLeft); + var mleft=Math.max(statData[piece.i][piece.j].xPosRight,statData[piece.i][piece.j].xPosLeft); + + for(i=0;i=0) decalX=(myStatData.xPosLeft+myStatData.xPosRight)/2-mouse_posrect.x-textMsr.textWidth/2; + else decalX=(myStatData.xPosLeft+myStatData.xPosRight)/2-mouse_posrect.x - textMsr.textWidth/2 ; + break; + case "Radar" : + decalX-=0.5*textMsr.textWidth; + break; + case "Line" : + decalX=myStatData.xPos-mouse_posrect.x-(textMsr.textWidth/2); + break; + case "Pie" : + case "Doughnut" : + case "PolarArea" : + break; + }; + break; + default: + if(typeof config.annotatePositionX==="number") { + var lrect = ctx.canvas.getBoundingClientRect(); + decalX=-newPosX+1*config.annotatePositionX+lrect.left+window.pageXOffset; + forceX=true; + } else if (typeof config.annotatePositionX !="undefined" && config.annotatePositionX.indexOf("%")>0) { + var pct=1*config.annotatePositionX.substr(0,config.annotatePositionX.indexOf("%")); + decalX=-newPosX+1*1*ctx.canvas.width*pct/100+lrect.left+window.pageXOffset; + if(Math.abs(pct-50) < config.zeroValue) { + decalX=decalX-textMsr.textWidth/2; + } else if(pct > 50) { + decalX=decalX-textMsr.textWidth; + } + forceX=true; + + } + break; + } + + if(tpchart=="Pie" || tpchart=="Doughnut" || tpchart=="PolarArea") { + + while(angle<0){angle+=2*Math.PI;} + while(angle>2*Math.PI){angle-=2*Math.PI;} + + var lrect = ctx.canvas.getBoundingClientRect(); + if(!forceY){ + decalY=-newPosY+1*midPosY+lrect.top+window.pageYOffset; + decalY+=rayVal*Math.sin(angle); + } + if(!forceX){ + decalX=-newPosX+1*midPosX+lrect.left+window.pageXOffset; + decalX+=rayVal*Math.cos(angle); + } + + if(angle>0.5*Math.PI && angle < 1.5*Math.PI) { + if(multX==1){decalX-=textMsr.textWidth;addDecalX=-addDecalX;} + else if(multX==3)decalX-=0.5*textMsr.textWidth; + } + if(angle<=0.5*Math.PI || angle >= 1.5*Math.PI) { + if(multX==2){decalX-=textMsr.textWidth;addDecalX-=addDecalX;} + else if(multX==3)decalX-=0.5*textMsr.textWidth; + } + + if(angle>Math.PI) { + if(multY==1){decalY-=textMsr.textHeight;addDecalY=-addDecalY;} + else if(multY==3)decalY-=0.5*textMsr.textHeight; + } + if(angle<=Math.PI) { + if(multY==2){decalY-=textMsr.textHeight;addDecalY=-addDecalY;} + else if(multY==3)decalY-=0.5*textMsr.textHeight; + } + + } + + + if(annotate_shape!='bubble_tooltip') { + if(annotate_shape == "ARROW") { + var lrect = ctx.canvas.getBoundingClientRect(); + arrow_class=arrowDirection(newPosX+decalX+addDecalX-(lrect.left+window.pageXOffset), newPosY+decalY+addDecalY-(lrect.top+window.pageYOffset), angle, rayVal, textMsr.textWidth,textMsr.textHeight,ctx,jsGraphAnnotate[ctx.ChartNewId][piece.piece],myStatData); + annotateDIV.className = "toolTip"+arrow_class; + document.getElementById('arrow_content').className="toolTip"+arrow_class+"Text"; + } + + oCursor.moveIt(newPosX+decalX+addDecalX, newPosY+decalY+addDecalY); + annotateDIV.style.display = true ? '' : 'none'; + } +}; + + +function arrowDirection(x,y,angle,rayVal,width,height,ctx,jsGraphAnnotate,myStatData) { + var h_arrow="Center"; + var h_in=true; + var v_arrow="Center"; + var v_in=true; + switch(jsGraphAnnotate[0]) { + case "ARC": + return("None"); + break; + case "MARC": + var centerPosX=myStatData.midPosX+((myStatData.radiusOffset+myStatData.int_radius)/2)*Math.cos((myStatData.startAngle+myStatData.endAngle)/2); + var centerPosY=myStatData.midPosY+((myStatData.radiusOffset+myStatData.int_radius)/2)*Math.sin((myStatData.startAngle+myStatData.endAngle)/2); + + var minDist=Number.MAX_VALUE; + var arrow="None"; + var topCenterPos=compAnglPos((2*x+width)/2,y-5,myStatData,centerPosX,centerPosY); + if(topCenterPos.distCenter < minDist){ arrow="TopCenter"; minDist=topCenterPos.distCenter; } + var bottomCenterPos=compAnglPos((2*x+width)/2,y+height+5,myStatData,centerPosX,centerPosY); + if(bottomCenterPos.distCenter < minDist){ arrow="BottomCenter"; minDist=bottomCenterPos.distCenter; } + + var topLeftPos=compAnglPos(x+5+2.5,y-5,myStatData,centerPosX,centerPosY); + if(topLeftPos.distCenter < minDist){ arrow="TopLeft"; minDist=topLeftPos.distCenter; } + + var topRightPos=compAnglPos(x+width-5-2.5,y-5,myStatData,centerPosX,centerPosY); + if(topRightPos.distCenter < minDist){ arrow="TopRight"; minDist=topRightPos.distCenter; } + + var bottomLeftPos=compAnglPos(x+5+2.5,y+height+5,myStatData,centerPosX,centerPosY); + if(bottomLeftPos.distCenter < minDist){ arrow="BottomLeft"; minDist=bottomLeftPos.distCenter; } + + var bottomRightPos=compAnglPos(x+width-5-2.5,y+height+5,myStatData,centerPosX,centerPosY); + if(bottomRightPos.distCenter < minDist){ arrow="BottomRight"; minDist=bottomRightPos.distCenter; } + + var leftCenterPos=compAnglPos(x-5,(2*y+height)/2,myStatData,centerPosX,centerPosY); + if(leftCenterPos.distCenter < minDist){ arrow="LeftCenter"; minDist=leftCenterPos.distCenter; } + + var leftTopPos=compAnglPos(x-5,y+5+2.5,myStatData,centerPosX,centerPosY); + if(leftTopPos.distCenter < minDist){ arrow="LeftTop"; minDist=leftTopPos.distCenter; } + + var leftBottomPos=compAnglPos(x-5,y+height-5-2.5,myStatData,centerPosX,centerPosY); + if(leftBottomPos.distCenter < minDist){ arrow="LeftBottom"; minDist=leftBottomPos.distCenter; } + + var rightCenterPos=compAnglPos(x+width+5,(2*y+height)/2,myStatData,centerPosX,centerPosY); + if(rightCenterPos.distCenter < minDist){ arrow="RightCenter"; minDist=rightCenterPos.distCenter; } + + var rightTopPos=compAnglPos(x+width+5,y+5+2.5,myStatData,centerPosX,centerPosY); + if(rightTopPos.distCenter < minDist){ arrow="RightTop"; minDist=rightTopPos.distCenter; } + + var rightBottomPos=compAnglPos(x+width+5,y+height-5-2.5,myStatData,centerPosX,centerPosY); + if(rightBottomPos.distCenter < minDist){ arrow="RightBottom"; minDist=rightBottomPos.distCenter; } + + return(arrow); + + var topCenterPos=compAnglPos((2*x+width)/2,y-5,myStatData,centerPosX,centerPosY); + if(inArc(topCenterPos,myStatData))return("TopCenter"); + var bottomCenterPos=compAnglPos((2*x+width)/2,y+height+5,myStatData,centerPosX,centerPosY); + if(inArc(bottomCenterPos,myStatData))return("BottomCenter"); + var topLeftPos=compAnglPos(x+5+2.5,y-5,myStatData,centerPosX,centerPosY); + if(inArc(topLeftPos,myStatData))return("TopLeft"); + var topRightPos=compAnglPos(x+width-5-2.5,y-5,myStatData,centerPosX,centerPosY); + if(inArc(topRightPos,myStatData))return("TopRight"); + var bottomLeftPos=compAnglPos(x+5+2.5,y+height+5,myStatData,centerPosX,centerPosY); + if(inArc(bottomLeftPos,myStatData))return("BottomLeft"); + var bottomRightPos=compAnglPos(x+width-5-2.5,y+height+5,myStatData,centerPosX,centerPosY); + if(inArc(bottomRightPos,myStatData))return("BottomRight"); + var leftCenterPos=compAnglPos(x-5,(2*y+height)/2,myStatData,centerPosX,centerPosY); + if(inArc(leftCenterPos,myStatData))return("LeftCenter"); + var leftTopPos=compAnglPos(x-5,y+5+2.5,myStatData,centerPosX,centerPosY); + if(inArc(leftTopPos,myStatData))return("LeftTop"); + var leftBottomPos=compAnglPos(x-5,y+height-5-2.5,myStatData,centerPosX,centerPosY); + if(inArc(leftBottomPos,myStatData))return("LeftBottom"); + var rightCenterPos=compAnglPos(x+width+5,(2*y+height)/2,myStatData,centerPosX,centerPosY); + if(inArc(rightCenterPos,myStatData))return("RightCenter"); + var rightTopPos=compAnglPos(x+width+5,y+5+2.5,myStatData,centerPosX,centerPosY); + if(inArc(rightTopPos,myStatData))return("RightTop"); + var rightBottomPos=compAnglPos(x+width+5,y+height-5-2.5,myStatData,centerPosX,centerPosY); + if(inArc(rightBottomPos,myStatData))return("RightBottom"); + + return("None"); + + + var rightCenterPos=compAnglPos((2*x+height)/2,y,myStatData); + var topLeftPos=compAnglPos((2*x+height)/2,y,myStatData); + var topLeftPos=compAnglPos((2*x+height)/2,y,myStatData); + var topLeftPos=compAnglPos((2*x+height)/2,y,myStatData); + if(angle < Math.PI*1/6) { + if(rayVal> myStatData.radiusOffset)return("LeftCenter"); + } else if(angle < Math.PI*2/6) { + return("LeftTop"); + } else if(angle < Math.PI*3/6) { + return("TopLeft"); + } else if(angle < Math.PI*4/6) { + return("TopRight"); + } else if(angle < Math.PI*5/6) { + return("RightTop"); + } else if(angle < Math.PI*7/6) { + return("RightCenter"); + } else if(angle < Math.PI*8/6) { + return("RightBottom"); + } else if(angle < Math.PI*9/6) { + return("BottomRight"); + } else if(angle < Math.PI*10/6) { + return("BottomLeft"); + } else if(angle < Math.PI*11/6) { + return("LeftBottom"); + } else if(angle < Math.PI*12/6) { + return("LeftBottom"); + } + return("None"); + break; + case "RECT" : + var xright=Math.min(myStatData.xPosRight,myStatData.xPosLeft); + var xleft=Math.max(myStatData.xPosRight,myStatData.xPosLeft); + var ytop=Math.min(myStatData.yPosBottom,myStatData.yPosTop); + var ybottom=Math.max(myStatData.yPosBottom,myStatData.yPosTop); + var minDistance,distance; + var arrow; + arrow="None"; + + if((2*x+width)/2 > xright && (2*x+width)/2 < xleft) { + if((2*y+height)/2 < (ytop+ybottom)/2) return("BottomCenter"); + else return ("TopCenter"); + } else if(x > xright+5 && x < xleft-5) { + if((2*y+height)/2 < (ytop+ybottom)/2) return("BottomLeft"); + else return ("TopLeft"); + } else if(x+width > xright+5 && x+width < xleft-5) { + if((2*y+height)/2 < (ytop+ybottom)/2) return("BottomRight"); + else return ("TopRight"); + } else if((2*y+height)/2 > ytop && (2*y+height)/2 < ybottom) { + if(x>xleft-5) return("LeftCenter"); + else if (x+width < xright+5) return("RightCenter"); + else return("None"); // Should never come here; + } else if(y < ybottom -5 && y > ytop+5) { + if(x>xleft-5) return("LeftTop"); + else if (x+width < xright+5) return("RightTop"); + else return("None"); // Should never come here; + } else if(y+height < ybottom -5 && y+height > ytop+5) { + if(x>xleft-5) return("LeftBottom"); + else if (x+width < xright+5) return("RightBottom"); + else return("None"); // Should never come here; + } + return("None"); + break; + case "POINT" : + var xP=myStatData.posX; + var yP=myStatData.posY; + if(xP>x && xPy && yPy+height) { + if(xP>x && xPx+3*width/4) return("BottomRight"); + else return("BottomCenter"); + } else return("None") + } else if(yPx && xPx+3*width/4) return("TopRight"); + else return("TopCenter"); + } else return("None") + } else if(xP>x+width) { + if(yP>y && yPy+3*height/4) return("RightBottom"); + else return("RightCenter"); + } else return("None") + } else if(xPy && yPy+3*height/4) return("LeftBottom"); + else return("LeftCenter"); + } else return("None") + } + return("None"); + break; + default: + return("None"); + break; + } +}; + +function inArc(elt,myStatData) { + if(elt.rayVal<=myStatData.radiusOffset && elt.rayVal>=myStatData.int_radius && inAngle(elt.angle,myStatData.startAngle,myStatData.endAngle)) return(true); + else return(false); +}; + +function inAngle(angle,startAngle,stopAngle){ + if(angle>startAngle && angle startAngle && angle+2*Math.PI myStatData.radiusOffset) { + if(inAngle(angle,myStatData.startAngle,myStatData.endAngle)) distCenter+=(rayVal-myStatData.radiusOffset); + else { + distCenter*=2; + if(angle Date: Sat, 31 Dec 2016 09:28:22 +0100 Subject: [PATCH 02/14] Update ChartNew.js --- ChartNew.js | 100 +++++++++++++++++++++++++++++++--------------------- 1 file changed, 60 insertions(+), 40 deletions(-) diff --git a/ChartNew.js b/ChartNew.js index 648266d..146b3a1 100644 --- a/ChartNew.js +++ b/ChartNew.js @@ -37,7 +37,7 @@ // non standard functions; - +var annotate_shape='divCursor' var chartJSLineStyle=[]; chartJSLineStyle["solid"]=[]; chartJSLineStyle["dotted"]=[1,4]; @@ -516,10 +516,10 @@ if (typeof CanvasRenderingContext2D !== 'undefined') { cursorDivCreated = false; -function createCursorDiv() { +function createCursorDiv(config) { if (cursorDivCreated == false) { - var div = document.createElement('divCursor'); - div.id = 'divCursor'; + var div = document.createElement(annotate_shape); + div.id = annotate_shape; div.style.position = 'absolute'; document.body.appendChild(div); cursorDivCreated = true; @@ -743,8 +743,8 @@ function cursorInit() { /******************************************************************** Contructs the cursorobjects *********************************************************************/ -function makeCursorObj(obj, nest) { - createCursorDiv(); +function makeCursorObj(config,obj, nest) { + createCursorDiv(config); nest = (!nest) ? '' : 'document.' + nest + '.' this.css = bw.dom ? document.getElementById(obj).style : bw.ie4 ? document.all[obj].style : bw.ns4 ? eval(nest + "document.layers." + obj) : 0; this.moveIt = b_moveIt; @@ -1022,6 +1022,42 @@ function highLightAction(action,ctx,data,config,v1,v2) { var inMouseAction=new Array(); +function initAnnotateDiv(annotateDIV,config,ctx) { + annotateDIV.className = (config.annotateClassName) ? config.annotateClassName : ''; + annotateDIV.style.border = (config.annotateClassName) ? '' : config.annotateBorder; + annotateDIV.style.padding = (config.annotateClassName) ? '' : config.annotatePadding; + annotateDIV.style.borderRadius = (config.annotateClassName) ? '' : config.annotateBorderRadius; + annotateDIV.style.backgroundColor = (config.annotateClassName) ? '' : config.annotateBackgroundColor; + annotateDIV.style.color = (config.annotateClassName) ? '' : config.annotateFontColor; + annotateDIV.style.fontFamily = (config.annotateClassName) ? '' : config.annotateFontFamily; + annotateDIV.style.fontSize = (config.annotateClassName) ? '' : (Math.ceil(ctx.chartTextScale*config.annotateFontSize)).toString() + "pt"; + annotateDIV.style.fontStyle = (config.annotateClassName) ? '' : config.annotateFontStyle; + annotateDIV.style.zIndex = 999; +}; + +function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate,piece,myStatData,statData) { + + if (jsGraphAnnotate[ctx.ChartNewId][piece.piece][0] == "ARC") dispString = tmplbis(setOptionValue(true,true,1,"ANNOTATELABEL",ctx,data,jsGraphAnnotate[ctx.ChartNewId][piece.piece][3],undefined,config.annotateLabel,"annotateLabel",jsGraphAnnotate[ctx.ChartNewId][piece.piece][1],-1,{otherVal:true}), myStatData,config); + else dispString = tmplbis(setOptionValue(true,true,1,"ANNOTATELABEL",ctx,data,jsGraphAnnotate[ctx.ChartNewId][piece.piece][3],undefined,config.annotateLabel,"annotateLabel",jsGraphAnnotate[ctx.ChartNewId][piece.piece][1],jsGraphAnnotate[ctx.ChartNewId][piece.piece][2],{otherVal:true}), myStatData,config); + textMsr=ctx.measureTextMultiLine(dispString,1*annotateDIV.style.fontSize.replace("pt","")); + ctx.restore(); + + annotateDIV.innerHTML = dispString; + x = bw.ns4 || bw.ns5 ? event.pageX : event.x; + y = bw.ns4 || bw.ns5 ? event.pageY : event.y; + if (bw.ie4 || bw.ie5) y = y + eval(scrolled); + if(config.annotateRelocate===true) { + var relocateX, relocateY; + relocateX=0;relocateY=0; + if(x+fromLeft+textMsr.textWidth > window.innerWidth-rect.left-fromLeft)relocateX=-textMsr.textWidth; + if(y+fromTop+textMsr.textHeight > 1*window.innerHeight-1*rect.top+fromTop)relocateY-=(textMsr.textHeight+2*fromTop); + oCursor.moveIt(Math.max(8-rect.left,x + fromLeft+relocateX), Math.max(8-rect.top,y + fromTop + relocateY)); + } else oCursor.moveIt(x + fromLeft, y + fromTop); + annotateDIV.style.display = true ? '' : 'none'; +}; + + + function doMouseAction(event, ctx, action) { if (ctx.firstPass != 9)return; if(action=="mousedown") action=action+" "+event.which; @@ -1063,6 +1099,8 @@ function doMouseAction(event, ctx, action) { myStatData.graphPosY = canvas_pos.y; pieceOfChartFound[pieceOfChartFound.length]={ piece : i, + i : jsGraphAnnotate[ctx.ChartNewId][i][1], + j : jsGraphAnnotate[ctx.ChartNewId][i][2], myStatData: myStatData }; } @@ -1085,6 +1123,8 @@ function doMouseAction(event, ctx, action) { myStatData.graphPosY = canvas_pos.y; pieceOfChartFound[pieceOfChartFound.length]={ piece : i, + i : jsGraphAnnotate[ctx.ChartNewId][i][1], + j : jsGraphAnnotate[ctx.ChartNewId][i][2], myStatData: myStatData }; } @@ -1108,6 +1148,8 @@ function doMouseAction(event, ctx, action) { myStatData.graphPosY = canvas_pos.y; pieceOfChartFound[pieceOfChartFound.length]={ piece : i, + i : jsGraphAnnotate[ctx.ChartNewId][i][1], + j : jsGraphAnnotate[ctx.ChartNewId][i][2], myStatData: myStatData }; } @@ -1136,6 +1178,8 @@ function doMouseAction(event, ctx, action) { myStatData.graphPosY = canvas_pos.y; pieceOfChartFound[pieceOfChartFound.length]={ piece : i, + i : jsGraphAnnotate[ctx.ChartNewId][i][1], + j : jsGraphAnnotate[ctx.ChartNewId][i][2], myStatData: myStatData }; } @@ -1219,41 +1263,17 @@ function doMouseAction(event, ctx, action) { if(config.annotateDisplay && isAction(config.annotateFunction,realAction)) { // annotate display functionality; - annotateDIV = document.getElementById('divCursor'); + annotateDIV = document.getElementById(annotate_shape); annotateDIV.style.display = false ? '' : 'none'; if(pieceOfChartFound.length>0) { - annotateDIV.className = (config.annotateClassName) ? config.annotateClassName : ''; - annotateDIV.style.border = (config.annotateClassName) ? '' : config.annotateBorder; - annotateDIV.style.padding = (config.annotateClassName) ? '' : config.annotatePadding; - annotateDIV.style.borderRadius = (config.annotateClassName) ? '' : config.annotateBorderRadius; - annotateDIV.style.backgroundColor = (config.annotateClassName) ? '' : config.annotateBackgroundColor; - annotateDIV.style.color = (config.annotateClassName) ? '' : config.annotateFontColor; - annotateDIV.style.fontFamily = (config.annotateClassName) ? '' : config.annotateFontFamily; - annotateDIV.style.fontSize = (config.annotateClassName) ? '' : (Math.ceil(ctx.chartTextScale*config.annotateFontSize)).toString() + "pt"; - annotateDIV.style.fontStyle = (config.annotateClassName) ? '' : config.annotateFontStyle; - annotateDIV.style.zIndex = 999; + initAnnotateDiv(annotateDIV,config,ctx); ctx.save(); ctx.font= annotateDIV.style.fontStyle+" "+ annotateDIV.style.fontSize+" "+annotateDIV.style.fontFamily; var rect = ctx.canvas.getBoundingClientRect(); showDiv=false; if(whoToReferAnnotate!=-1) { if (jsGraphAnnotate[ctx.ChartNewId][pieceOfChartFound[whoToReferAnnotate].piece][4]) { - if (jsGraphAnnotate[ctx.ChartNewId][pieceOfChartFound[whoToReferAnnotate].piece][0] == "ARC") dispString = tmplbis(setOptionValue(true,true,1,"ANNOTATELABEL",ctx,data,jsGraphAnnotate[ctx.ChartNewId][pieceOfChartFound[whoToReferAnnotate].piece][3],undefined,config.annotateLabel,"annotateLabel",jsGraphAnnotate[ctx.ChartNewId][pieceOfChartFound[whoToReferAnnotate].piece][1],-1,{otherVal:true}), pieceOfChartFound[whoToReferAnnotate].myStatData,config); - else dispString = tmplbis(setOptionValue(true,true,1,"ANNOTATELABEL",ctx,data,jsGraphAnnotate[ctx.ChartNewId][pieceOfChartFound[whoToReferAnnotate].piece][3],undefined,config.annotateLabel,"annotateLabel",jsGraphAnnotate[ctx.ChartNewId][pieceOfChartFound[whoToReferAnnotate].piece][1],jsGraphAnnotate[ctx.ChartNewId][pieceOfChartFound[whoToReferAnnotate].piece][2],{otherVal:true}), pieceOfChartFound[whoToReferAnnotate].myStatData,config); - textMsr=ctx.measureTextMultiLine(dispString,1*annotateDIV.style.fontSize.replace("pt","")); - ctx.restore(); - annotateDIV.innerHTML = dispString; - x = bw.ns4 || bw.ns5 ? event.pageX : event.x; - y = bw.ns4 || bw.ns5 ? event.pageY : event.y; - if (bw.ie4 || bw.ie5) y = y + eval(scrolled); - if(config.annotateRelocate===true) { - var relocateX, relocateY; - relocateX=0;relocateY=0; - if(x+fromLeft+textMsr.textWidth > window.innerWidth-rect.left-fromLeft)relocateX=-textMsr.textWidth; - if(y+fromTop+textMsr.textHeight > 1*window.innerHeight-1*rect.top+fromTop)relocateY-=(textMsr.textHeight+2*fromTop); - oCursor.moveIt(Math.max(8-rect.left,x + fromLeft+relocateX), Math.max(8-rect.top,y + fromTop + relocateY)); - } else oCursor.moveIt(x + fromLeft, y + fromTop); - annotateDIV.style.display = true ? '' : 'none'; + displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate,pieceOfChartFound[whoToReferAnnotate],pieceOfChartFound[whoToReferAnnotate].myStatData,jsGraphAnnotate[ctx.ChartNewId][pieceOfChartFound[whoToReferAnnotate].piece][3]); showDiv=true; } } @@ -2529,10 +2549,10 @@ window.Chart = function(context) { var total_data=0; var total_non_missing_data=0; for(i=0;i 0) { @@ -3266,7 +3286,7 @@ window.Chart = function(context) { if (chartType=="Pie")dataCutoutRadius=cutoutRadius; else dataCutoutRadius=cutoutRadius - dataDoughnutRadius=doughnutRadius + dataDoughnutRadius=doughnutRadius // correct radius for Multiple Doughnuts; @@ -3277,7 +3297,7 @@ window.Chart = function(context) { dataDoughnutRadius=rdataDoughnutRadius; if (chartType!="Pie" || j>0)rdataCutoutRadius=dataCutoutRadius-(dataDoughnutRadius-dataCutoutRadius)*setOptionValue(false,true,1,"EXPANDINRADIUS",ctx,data,statData,data.datasets[i].expandInRadius,0,"expandInRadius",i,j,{animationDecimal: animationDecimal, scaleAnimation : scaleAnimation} ); - rdataDoughnutRadius=dataDoughnutRadius+(dataDoughnutRadius-dataCutoutRadius)*setOptionValue(false,true,1,"EXPANDOUTRADIUS",ctx,data,statData,data.datasets[i].expandOutRadius,0,"expandOutRadius",i,j,{animationDecimal: animationDecimal, scaleAnimation : scaleAnimation} ); + rdataDoughnutRadius=dataDoughnutRadius+(dataDoughnutRadius-dataCutoutRadius)*setOptionValue(false,true,1,"EXPANDOUTRADIUS",ctx,data,statData,data.datasets[i].expandOutRadius,0,"expandOutRadius",i,j,{animationDecimal: animationDecimal, scaleAnimation : scaleAnimation} ); dataCutoutRadius=rdataCutoutRadius; dataDoughnutRadius=rdataDoughnutRadius; @@ -7326,7 +7346,7 @@ window.Chart = function(context) { // - annotateDisplay : true, annotateFunction: "mousemove" if(config.annotateDisplay==true) { - if (cursorDivCreated == false) oCursor = new makeCursorObj('divCursor'); + if (cursorDivCreated == false) oCursor = new makeCursorObj(config,annotate_shape); if(config.annotateFunction=="mousedown left")setAction(ctx,"mousedown 1"); else if(config.annotateFunction=="mousedown middle")setAction(ctx,"mousedown 2"); else if(config.annotateFunction=="mousedown right")setAction(ctx,"mousedown 3"); @@ -7816,7 +7836,7 @@ var startRadius,stopRadius; prevpos[0]=[]; prevpos[1]=[]; grandtotal=0; - MstartAngle=[]; + MstartAngle=[]; McumulativeAngle=[]; MrealCumulativeAngle=[]; startRadius=[]; From 7be89ba86c430e258414c6890ff5a7377a888aa7 Mon Sep 17 00:00:00 2001 From: Francois Vancoppenolle Date: Mon, 2 Jan 2017 22:22:43 +0100 Subject: [PATCH 03/14] Update ChartNew.js --- ChartNew.js | 173 +++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 130 insertions(+), 43 deletions(-) diff --git a/ChartNew.js b/ChartNew.js index 146b3a1..e0e991d 100644 --- a/ChartNew.js +++ b/ChartNew.js @@ -1705,8 +1705,7 @@ window.Chart = function(context) { onAnimationComplete: null, alwaysRunFunctionAtCompletion: false, annotateLabel: "<%=(v1 == '' ? '' : v1) + (v1!='' && v2 !='' ? ' - ' : '')+(v2 == '' ? '' : v2)+(v1!='' || v2 !='' ? ':' : '') + v3%>", - pointHitDetectionRadius : 10, - xAxisMiddle : false + pointHitDetectionRadius : 10 }; // merge annotate defaults if(isIE()<9 && isIE() != false)chart.Line.defaults = mergeChartConfig(chart.defaults.IExplorer8, chart.Line.defaults); @@ -2474,7 +2473,9 @@ window.Chart = function(context) { scaleMinorTickVerticalLines : true, scaleMinorTickHorizontalLines : true, tickColor : "gridLine", - minorTickColor : "gridLine" + minorTickColor : "gridLine", + xAxisMiddle : false, + yAxisMiddle : false }; var clear = function(c) { c.clearRect(0, 0, width, height); @@ -3603,6 +3604,7 @@ window.Chart = function(context) { function drawLabels() { + var decal, subloop; ctx.font = config.scaleFontStyle + " " + (Math.ceil(ctx.chartTextScale*config.scaleFontSize)).toString() + "px " + config.scaleFontFamily; //X Labels if (config.xAxisTop || config.xAxisBottom) { @@ -3619,8 +3621,8 @@ window.Chart = function(context) { } else { ctx.textAlign = "center"; } - var decal=0; - var subloop=0; + decal=0; + subloop=0; if(config.xAxisMiddle==true) { decal=valueHop/2; subloop=1; @@ -3653,11 +3655,17 @@ window.Chart = function(context) { if(typeof data.labels2 =="object")label=data.labels2; else label=data.labels; - for (var i = 0; i < label.length; i++) { + decal=0; + subloop=0; + if(config.xAxisMiddle==true) { + decal=valueHop/2; + subloop=1; + } + for (var i = 0; i < label.length-subloop; i++) { if(showLabels(ctx,data,config,i)){ ctx.save(); if (msr.rotateTLabels > 0) { - ctx.translate(yAxisPosX + i * valueHop - msr.highestXLabel / 2, msr.xTLabelPos); + ctx.translate(yAxisPosX + i * valueHop - msr.highestXLabel / 2+decal, msr.xTLabelPos); ctx.rotate(-((msr.rotateTLabels + 180*(msr.rotateTLabels>90)) * (Math.PI / 180))); ctx.fillTextMultiLine(fmtChartJS(config, label[i], config.fmtXLabel), 0, 0, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"XSCALE_TEXTMOUSE",-(msr.rotateTLabels * (Math.PI / 180)),yAxisPosX + i * valueHop - msr.highestXLabel / 2, msr.xTLabelPos,i,-1); } else { @@ -3671,16 +3679,22 @@ window.Chart = function(context) { //Y Labels ctx.textAlign = "right"; ctx.textBaseline = "middle"; - for (var j = ((config.showYAxisMin) ? -1 : 0); j < calculatedScale.steps; j++) { + decal=0; + subloop=0; + if(config.yAxisMiddle==true) { + decal=scaleHop/2; + subloop=1; + } + for (var j = ((config.showYAxisMin) ? -1 : 0); j < calculatedScale.steps-subloop; j++) { if (config.scaleShowLabels) { if(showYLabels(ctx,data,config,j+1,calculatedScale.labels[j + 1])) { if (config.yAxisLeft) { ctx.textAlign = "right"; - ctx.fillTextMultiLine(calculatedScale.labels[j + 1], yAxisPosX - (Math.ceil(ctx.chartLineScale*config.scaleTickSizeLeft) + Math.ceil(ctx.chartSpaceScale*config.yAxisSpaceRight)), xAxisPosY - ((j + 1) * scaleHop), ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"YLEFTAXIS_TEXTMOUSE",0,0,0,-1,j); + ctx.fillTextMultiLine(calculatedScale.labels[j + 1], yAxisPosX - (Math.ceil(ctx.chartLineScale*config.scaleTickSizeLeft) + Math.ceil(ctx.chartSpaceScale*config.yAxisSpaceRight)), xAxisPosY - ((j + 1) * scaleHop)-decal, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"YLEFTAXIS_TEXTMOUSE",0,0,0,-1,j); } if (config.yAxisRight && !(valueBounds.dbAxis || config.forceSecondScale)) { ctx.textAlign = "left"; - ctx.fillTextMultiLine(calculatedScale.labels[j + 1], yAxisPosX + msr.availableWidth + (Math.ceil(ctx.chartLineScale*config.scaleTickSizeRight) + Math.ceil(ctx.chartSpaceScale*config.yAxisSpaceRight)), xAxisPosY - ((j + 1) * scaleHop), ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"YRIGHTAXIS_TEXTMOUSE",0,0,0,-1,j); + ctx.fillTextMultiLine(calculatedScale.labels[j + 1], yAxisPosX + msr.availableWidth + (Math.ceil(ctx.chartLineScale*config.scaleTickSizeRight) + Math.ceil(ctx.chartSpaceScale*config.yAxisSpaceRight)), xAxisPosY - ((j + 1) * scaleHop)-decal, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"YRIGHTAXIS_TEXTMOUSE",0,0,0,-1,j); } } } @@ -4107,26 +4121,38 @@ window.Chart = function(context) { //Y axis ctx.textAlign = "right"; ctx.textBaseline = "middle"; - for (var j = ((config.showYAxisMin) ? -1 : 0); j < calculatedScale.steps; j++) { + subloop=0; + decal=0; + if(config.yAxisMiddle==true) { + decal=scaleHop/2; + subloop=1; + } + for (var j = ((config.showYAxisMin) ? -1 : 0); j < calculatedScale.steps-subloop; j++) { if (config.scaleShowLabels) { if(showYLabels(ctx,data,config,j+1,calculatedScale.labels[j + 1])) { if (config.yAxisLeft) { ctx.textAlign = "right"; - ctx.fillTextMultiLine(calculatedScale.labels[j + 1], yAxisPosX - (Math.ceil(ctx.chartLineScale*config.scaleTickSizeLeft) + Math.ceil(ctx.chartSpaceScale*config.yAxisSpaceRight)), xAxisPosY - ((j + 1) * scaleHop), ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"YLEFTAXIS_TEXTMOUSE",0,0,0,-1,j); + ctx.fillTextMultiLine(calculatedScale.labels[j + 1], yAxisPosX - (Math.ceil(ctx.chartLineScale*config.scaleTickSizeLeft) + Math.ceil(ctx.chartSpaceScale*config.yAxisSpaceRight)), xAxisPosY - ((j + 1) * scaleHop)-decal, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"YLEFTAXIS_TEXTMOUSE",0,0,0,-1,j); } if (config.yAxisRight && !(valueBounds.dbAxis || config.forceSecondScale) ) { ctx.textAlign = "left"; - ctx.fillTextMultiLine(calculatedScale.labels[j + 1], yAxisPosX + msr.availableWidth + (Math.ceil(ctx.chartLineScale*config.scaleTickSizeRight) + Math.ceil(ctx.chartSpaceScale*config.yAxisSpaceRight)), xAxisPosY - ((j + 1) * scaleHop), ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"YRIGHTAXIS_TEXTMOUSE",0,0,0,-1,j); + ctx.fillTextMultiLine(calculatedScale.labels[j + 1], yAxisPosX + msr.availableWidth + (Math.ceil(ctx.chartLineScale*config.scaleTickSizeRight) + Math.ceil(ctx.chartSpaceScale*config.yAxisSpaceRight)), xAxisPosY - ((j + 1) * scaleHop)-decal, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"YRIGHTAXIS_TEXTMOUSE",0,0,0,-1,j); } } } } if (config.yAxisRight && (valueBounds.dbAxis || config.forceSecondScale)) { - for (j = ((config.showYAxisMin) ? -1 : 0); j < calculatedScale2.steps; j++) { + subloop=0; + decal=0; + if(config.yAxisMiddle==true) { + decal=valueHop/2; + subloop=1; + } + for (j = ((config.showYAxisMin) ? -1 : 0); j < calculatedScale2.steps-subloop; j++) { if (config.scaleShowLabels) { ctx.textAlign = "left"; - ctx.fillTextMultiLine(calculatedScale2.labels[j + 1], yAxisPosX + msr.availableWidth + (Math.ceil(ctx.chartLineScale*config.scaleTickSizeRight) + Math.ceil(ctx.chartSpaceScale*config.yAxisSpaceRight)), xAxisPosY - ((j + 1) * scaleHop2), ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"YRIGHTAXIS_TEXTMOUSE",0,0,0,-1,j); + ctx.fillTextMultiLine(calculatedScale2.labels[j + 1], yAxisPosX + msr.availableWidth + (Math.ceil(ctx.chartLineScale*config.scaleTickSizeRight) + Math.ceil(ctx.chartSpaceScale*config.yAxisSpaceRight)), xAxisPosY - ((j + 1) * scaleHop2)-decal, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"YRIGHTAXIS_TEXTMOUSE",0,0,0,-1,j); } } } @@ -4323,7 +4349,6 @@ window.Chart = function(context) { labelTemplateString = (config.scaleShowLabels) ? config.scaleLabel : ""; if (!config.scaleOverride) { calculatedScale = calculateScale(1, config, valueBounds.maxSteps, valueBounds.minSteps, valueBounds.maxValue, valueBounds.minValue, labelTemplateString); - msr = setMeasures(data, config, ctx, ctx.canvas.height, ctx.canvas.width, calculatedScale.labels, calculatedScale.labels, true, true, true, true, "HorizontalStackedBar"); } else { var scaleStartValue= setOptionValue(true,true,1,"SCALESTARTVALUE",ctx,data,statData,undefined,config.scaleStartValue,"scaleStartValue",-1,-1,{nullValue : true} ); var scaleSteps =setOptionValue(true,true,1,"SCALESTEPS",ctx,data,statData,undefined,config.scaleSteps,"scaleSteps",-1,-1,{nullValue : true} ); @@ -4342,8 +4367,31 @@ window.Chart = function(context) { },config)); } } - msr = setMeasures(data, config, ctx, ctx.canvas.height, ctx.canvas.width, calculatedScale.labels, null, true, true, true, true, "HorizontalStackedBar"); } + + if (!config.scaleOverride2) { + calculatedScale2 = calculateScale(1, config, valueBounds.maxSteps, valueBounds.minSteps, valueBounds.maxValue, valueBounds.minValue, labelTemplateString); + } else { + var scaleStartValue2= setOptionValue(true,true,1,"SCALESTARTVALUE",ctx,data,statData,undefined,config.scaleStartValue2,"scaleStartValue2",-1,-1,{nullValue : true} ); + var scaleSteps2 =setOptionValue(true,true,1,"SCALESTEPS",ctx,data,statData,undefined,config.scaleSteps2,"scaleSteps2",-1,-1,{nullValue : true} ); + var scaleStepWidth2 = setOptionValue(true,true,1,"SCALESTEPWIDTH",ctx,data,statData,undefined,config.scaleStepWidth2,"scaleStepWidth2",-1,-1,{nullValue : true} ); + + calculatedScale2 = { + steps: scaleSteps2, + stepValue: scaleStepWidth2, + graphMin: scaleStartValue2, + labels: [] + } + for (var i = 0; i <= calculatedScale2.steps; i++) { + if (labelTemplateString) { + calculatedScale2.labels.push(tmpl(labelTemplateString, { + value: fmtChartJS(config, 1 * ((scaleStartValue2 + (scaleStepWidth2 * i)).toFixed(getDecimalPlaces(scaleStepWidth2))), config.fmtYLabel) + },config)); + } + } + } + msr = setMeasures(data, config, ctx, ctx.canvas.height, ctx.canvas.width, calculatedScale.labels, calculatedScale2.labels, true, true, true, true, "HorizontalStackedBar"); + msr.availableHeight = msr.availableHeight - Math.ceil(ctx.chartLineScale*config.scaleTickSizeBottom) - Math.ceil(ctx.chartLineScale*config.scaleTickSizeTop); msr.availableWidth = msr.availableWidth - Math.ceil(ctx.chartLineScale*config.scaleTickSizeLeft) - Math.ceil(ctx.chartLineScale*config.scaleTickSizeRight); scaleHop = Math.floor(msr.availableHeight / data.labels.length); @@ -4514,15 +4562,21 @@ window.Chart = function(context) { } else { ctx.textAlign = "center"; } - for (var i = ((config.showYAxisMin) ? -1 : 0); i < calculatedScale.steps; i++) { + subloop=0; + decal=0; + if(config.yAxisMiddle==true) { + decal=valueHop/2; + subloop=1; + } + for (var i = ((config.showYAxisMin) ? -1 : 0); i < calculatedScale.steps-subloop; i++) { if(showYLabels(ctx,data,config,i+1,calculatedScale.labels[i+ 1])) { ctx.save(); if (msr.rotateLabels > 0) { - ctx.translate(yAxisPosX + (i + 1) * valueHop - msr.highestXLabel / 2, msr.xLabelPos); + ctx.translate(yAxisPosX + (i + 1) * valueHop - msr.highestXLabel / 2+decal, msr.xLabelPos); ctx.rotate(-((msr.rotateLabels + 180*(msr.rotateLabels > 90)) * (Math.PI / 180))); ctx.fillTextMultiLine(calculatedScale.labels[i + 1], 0, 0, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"XAXIS_TEXTMOUSE",-(msr.rotateLabels * (Math.PI / 180)),yAxisPosX + (i + 1) * valueHop - msr.highestXLabel / 2, msr.xLabelPos,i,-1); } else { - ctx.fillTextMultiLine(calculatedScale.labels[i + 1], yAxisPosX + ((i + 1) * valueHop), msr.xLabelPos, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"XAXIS_TEXTMOUSE",0,0,0,i,-1); + ctx.fillTextMultiLine(calculatedScale.labels[i + 1], yAxisPosX + ((i + 1) * valueHop)+decal, msr.xLabelPos, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"XAXIS_TEXTMOUSE",0,0,0,i,-1); } ctx.restore(); } @@ -4538,16 +4592,21 @@ window.Chart = function(context) { } else { ctx.textAlign = "center"; } - - for (var i = ((config.showYAxisMin) ? -1 : 0); i < calculatedScale.steps; i++) { + subloop=0; + decal=0; + if(config.yAxisMiddle==true) { + decal=valueHop/2; + subloop=1; + } + for (var i = ((config.showYAxisMin) ? -1 : 0); i < calculatedScale.steps-subloop; i++) { if(showYLabels(ctx,data,config,i+1,calculatedScale.labels[i+ 1])) { ctx.save(); if (msr.rotateTLabels > 0) { - ctx.translate(yAxisPosX + (i + 1) * valueHop - msr.highestTXLabel / 2, msr.xTLabelPos); + ctx.translate(yAxisPosX + (i + 1) * valueHop - msr.highestTXLabel / 2+decal, msr.xTLabelPos); ctx.rotate(-((msr.rotateTLabels + 180* (msr.rotateTLabels >90))* (Math.PI / 180))); ctx.fillTextMultiLine(calculatedScale.labels[i + 1], 0, 0, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"XAXIS_TEXTMOUSE",-(msr.rotateLabels * (Math.PI / 180)),yAxisPosX + (i + 1) * valueHop - msr.highestXLabel / 2, msr.xLabelPos,i,-1); } else { - ctx.fillTextMultiLine(calculatedScale.labels[i + 1], yAxisPosX + ((i + 1) * valueHop), msr.xTLabelPos, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"XAXIS_TEXTMOUSE",0,0,0,i,-1); + ctx.fillTextMultiLine(calculatedScale.labels[i + 1], yAxisPosX + ((i + 1) * valueHop)+decal, msr.xTLabelPos, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"XAXIS_TEXTMOUSE",0,0,0,i,-1); } ctx.restore(); } @@ -4555,8 +4614,7 @@ window.Chart = function(context) { } } //Y axis - ctx.textAlign = "right"; - ctx.textBaseline = "middle"; + for (var j = 0; j < data.labels.length; j++) { if(showLabels(ctx,data,config,j)){ if (config.yAxisLeft) { @@ -4967,6 +5025,7 @@ window.Chart = function(context) { function drawLabels() { + var decal,subloop; ctx.font = config.scaleFontStyle + " " + (Math.ceil(ctx.chartTextScale*config.scaleFontSize)).toString() + "px " + config.scaleFontFamily; //X axis line if (config.xAxisTop || config.xAxisBottom) { @@ -4982,15 +5041,17 @@ window.Chart = function(context) { } else { ctx.textAlign = "center"; } + subloop=0; + decal=0; for (var i = 0; i < data.labels.length; i++) { if(showLabels(ctx,data,config,i)){ ctx.save(); if (msr.rotateLabels > 0) { - ctx.translate(yAxisPosX + i * valueHop + (valueHop / 2) - msr.highestXLabel / 2, msr.xLabelPos); + ctx.translate(yAxisPosX + i * valueHop + (valueHop / 2) - msr.highestXLabel / 2 , msr.xLabelPos); ctx.rotate(-((msr.rotateLabels + 180*(msr.rotateLabels>90)) * (Math.PI / 180))); ctx.fillTextMultiLine(fmtChartJS(config, data.labels[i], config.fmtXLabel), 0, 0, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"XAXIS_TEXTMOUSE",-(msr.rotateLabels * (Math.PI / 180)),yAxisPosX + i * valueHop + (valueHop / 2) - msr.highestXLabel / 2, msr.xLabelPos,i,-1); } else { - ctx.fillTextMultiLine(fmtChartJS(config, data.labels[i], config.fmtXLabel), yAxisPosX + i * valueHop + (valueHop / 2), msr.xLabelPos, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"XAXIS_TEXTMOUSE",0,0,0,i,-1); + ctx.fillTextMultiLine(fmtChartJS(config, data.labels[i], config.fmtXLabel), yAxisPosX + i * valueHop + (valueHop / 2)+decal, msr.xLabelPos, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"XAXIS_TEXTMOUSE",0,0,0,i,-1); } ctx.restore(); } @@ -5028,25 +5089,38 @@ window.Chart = function(context) { //Y axis ctx.textAlign = "right"; ctx.textBaseline = "middle"; - for (var j = ((config.showYAxisMin) ? -1 : 0); j < calculatedScale.steps; j++) { + subloop=0; + decal=0; + if(config.yAxisMiddle==true) { + decal=scaleHop/2; + subloop=1; + } + for (var j = ((config.showYAxisMin) ? -1 : 0); j < calculatedScale.steps-subloop; j++) { if (config.scaleShowLabels) { if(showYLabels(ctx,data,config,j+1,calculatedScale.labels[j+ 1])) { if (config.yAxisLeft) { ctx.textAlign = "right"; - ctx.fillTextMultiLine(calculatedScale.labels[j + 1], yAxisPosX - (Math.ceil(ctx.chartLineScale*config.scaleTickSizeLeft) + Math.ceil(ctx.chartSpaceScale*config.yAxisSpaceRight)), xAxisPosY - ((j + 1) * scaleHop), ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"YLEFTAXIS_TEXTMOUSE",0,0,0,-1,j); + ctx.fillTextMultiLine(calculatedScale.labels[j + 1], yAxisPosX - (Math.ceil(ctx.chartLineScale*config.scaleTickSizeLeft) + Math.ceil(ctx.chartSpaceScale*config.yAxisSpaceRight)), xAxisPosY - ((j + 1) * scaleHop)-decal, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"YLEFTAXIS_TEXTMOUSE",0,0,0,-1,j); } if (config.yAxisRight && !(valueBounds.dbAxis || config.forceSecondScale)) { ctx.textAlign = "left"; - ctx.fillTextMultiLine(calculatedScale.labels[j + 1], yAxisPosX + msr.availableWidth + (Math.ceil(ctx.chartLineScale*config.scaleTickSizeRight) + Math.ceil(ctx.chartSpaceScale*config.yAxisSpaceRight)), xAxisPosY - ((j + 1) * scaleHop), ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"YRIGHTAXIS_TEXTMOUSE",0,0,0,-1,j); + ctx.fillTextMultiLine(calculatedScale.labels[j + 1], yAxisPosX + msr.availableWidth + (Math.ceil(ctx.chartLineScale*config.scaleTickSizeRight) + Math.ceil(ctx.chartSpaceScale*config.yAxisSpaceRight)), xAxisPosY - ((j + 1) * scaleHop)-decal, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"YRIGHTAXIS_TEXTMOUSE",0,0,0,-1,j); } } } } if (config.yAxisRight && (valueBounds.dbAxis || config.forceSecondScale)) { - for (j = ((config.showYAxisMin) ? -1 : 0); j < calculatedScale2.steps; j++) { + subloop=0; + decal=0; + if(config.yAxisMiddle==true) { + decal=scaleHop/2; + subloop=1; + } + + for (j = ((config.showYAxisMin) ? -1 : 0); j < calculatedScale2.steps-subloop; j++) { if (config.scaleShowLabels) { ctx.textAlign = "left"; - ctx.fillTextMultiLine(calculatedScale2.labels[j + 1], yAxisPosX + msr.availableWidth + (Math.ceil(ctx.chartLineScale*config.scaleTickSizeRight) + Math.ceil(ctx.chartSpaceScale*config.yAxisSpaceRight)), xAxisPosY - ((j + 1) * scaleHop2), ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"YRIGHTAXIS_TEXTMOUSE",0,0,0,-1,j); + ctx.fillTextMultiLine(calculatedScale2.labels[j + 1], yAxisPosX + msr.availableWidth + (Math.ceil(ctx.chartLineScale*config.scaleTickSizeRight) + Math.ceil(ctx.chartSpaceScale*config.yAxisSpaceRight))-decal, xAxisPosY - ((j + 1) * scaleHop2), ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"YRIGHTAXIS_TEXTMOUSE",0,0,0,-1,j); } } } @@ -5399,15 +5473,21 @@ window.Chart = function(context) { } else { ctx.textAlign = "center"; } - for (var i = ((config.showYAxisMin) ? -1 : 0); i < calculatedScale.steps; i++) { + subloop=0; + decal=0; + if(config.yAxisMiddle==true) { + decal=valueHop/2; + subloop=1; + } + for (var i = ((config.showYAxisMin) ? -1 : 0); i < calculatedScale.steps-subloop; i++) { if(showYLabels(ctx,data,config,i+1,calculatedScale.labels[i+ 1])) { ctx.save(); if (msr.rotateLabels > 0) { - ctx.translate(yAxisPosX + (i + 1) * valueHop - msr.highestXLabel / 2, msr.xLabelPos); + ctx.translate(yAxisPosX + (i + 1) * valueHop - msr.highestXLabel / 2+decal, msr.xLabelPos); ctx.rotate(-((msr.rotateLabels + 180*(msr.rotateLabels>90)) * (Math.PI / 180))); ctx.fillTextMultiLine(calculatedScale.labels[i + 1], 0, 0, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"XAXIS_TEXTMOUSE",-(msr.rotateLabels * (Math.PI / 180)),yAxisPosX + (i + 1) * valueHop - msr.highestXLabel / 2, msr.xLabelPos,i,-1); } else { - ctx.fillTextMultiLine(calculatedScale.labels[i + 1], yAxisPosX + (i + 1) * valueHop, msr.xLabelPos, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"XAXIS_TEXTMOUSE",0,0,0,i,-1); + ctx.fillTextMultiLine(calculatedScale.labels[i + 1], yAxisPosX + (i + 1) * valueHop+decal, msr.xLabelPos, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"XAXIS_TEXTMOUSE",0,0,0,i,-1); } ctx.restore(); } @@ -5423,16 +5503,22 @@ window.Chart = function(context) { } else { ctx.textAlign = "center"; } + subloop=0; + decal=0; + if(config.yAxisMiddle==true) { + decal=valueHop/2; + subloop=1; + } - for (var i = ((config.showYAxisMin) ? -1 : 0); i < calculatedScale.steps; i++) { + for (var i = ((config.showYAxisMin) ? -1 : 0); i < calculatedScale.steps-subloop; i++) { if(showYLabels(ctx,data,config,i+1,calculatedScale.labels[i+ 1])) { ctx.save(); if (msr.rotateTLabels > 0) { - ctx.translate(yAxisPosX + (i + 1) * valueHop - msr.highestTXLabel / 2, msr.xTLabelPos); + ctx.translate(yAxisPosX + (i + 1) * valueHop - msr.highestTXLabel / 2+decal, msr.xTLabelPos); ctx.rotate(-((msr.rotateTLabels + 180*(msr.rotateTLabels>90))* (Math.PI / 180))); ctx.fillTextMultiLine(calculatedScale.labels[i + 1], 0, 0, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"XAXIS_TEXTMOUSE",-(msr.rotateLabels * (Math.PI / 180)),yAxisPosX + (i + 1) * valueHop - msr.highestXLabel / 2, msr.xLabelPos,i,-1); } else { - ctx.fillTextMultiLine(calculatedScale.labels[i + 1], yAxisPosX + ((i + 1) * valueHop), msr.xTLabelPos, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"XAXIS_TEXTMOUSE",0,0,0,i,-1); + ctx.fillTextMultiLine(calculatedScale.labels[i + 1], yAxisPosX + ((i + 1) * valueHop)+decal, msr.xTLabelPos, ctx.textBaseline, (Math.ceil(ctx.chartTextScale*config.scaleFontSize)),true,config.detectMouseOnText,ctx,"XAXIS_TEXTMOUSE",0,0,0,i,-1); } ctx.restore(); } @@ -6401,14 +6487,15 @@ window.Chart = function(context) { widestYLabel = Math.max(1,Math.ceil(ctx.chartTextScale*config.yScaleLabelsMinimumWidth)); widestYLabel2=widestYLabel; - + if (ylabels != null && ylabels != "nihil") { ctx.font = config.scaleFontStyle + " " + (Math.ceil(ctx.chartTextScale*config.scaleFontSize)).toString() + "px " + config.scaleFontFamily; for (i = ylabels.length - 1; i >= 0; i--) { if (typeof(ylabels[i]) == "string") { if(showYLabels(ctx,data,config,i,ylabels[i])) { if (ylabels[i].trim() != "") { - textMsr = ctx.measureTextMultiLine(fmtChartJS(config, ylabels[i], config.fmtYLabel), (Math.ceil(ctx.chartTextScale*config.scaleFontSize))); +// textMsr = ctx.measureTextMultiLine(fmtChartJS(config, ylabels[i], config.fmtYLabel), (Math.ceil(ctx.chartTextScale*config.scaleFontSize))); + textMsr = ctx.measureTextMultiLine(ylabels[i], (Math.ceil(ctx.chartTextScale*config.scaleFontSize))); widestYLabel = Math.max(widestYLabel,textMsr.textWidth); highestYLabel = Math.max(highestYLabel,textMsr.textHeight); @@ -6417,13 +6504,13 @@ window.Chart = function(context) { } } } - if (ylabels2 != null && config.yAxisRight) { ctx.font = config.scaleFontStyle + " " + (Math.ceil(ctx.chartTextScale*config.scaleFontSize)).toString() + "px " + config.scaleFontFamily; for (i = ylabels2.length - 1; i >= 0; i--) { if (typeof(ylabels2[i]) == "string") { if (showYLabels(ctx,data,config,i,ylabels2[i])) { - textMsr = ctx.measureTextMultiLine(fmtChartJS(config, ylabels2[i], config.fmtYLabel2), (Math.ceil(ctx.chartTextScale*config.scaleFontSize))); +// textMsr = ctx.measureTextMultiLine(fmtChartJS(config, ylabels2[i], config.fmtYLabel2), (Math.ceil(ctx.chartTextScale*config.scaleFontSize))); + textMsr = ctx.measureTextMultiLine(ylabels2[i], (Math.ceil(ctx.chartTextScale*config.scaleFontSize))); widestYLabel2 = Math.max(textMsr.textWidth,widestYLabel2); highestYLabel2 = Math.max(textMsr.textHeight,highestYLabel2); } From 14b190a6cd39df4b402867f1729bb2e4933f10ee Mon Sep 17 00:00:00 2001 From: Francois Vancoppenolle Date: Mon, 2 Jan 2017 22:29:48 +0100 Subject: [PATCH 04/14] Sample for issue 491 --- Samples/attendance_chart.html | 170 ++++++++++++++++++++++++++++++++++ 1 file changed, 170 insertions(+) create mode 100644 Samples/attendance_chart.html diff --git a/Samples/attendance_chart.html b/Samples/attendance_chart.html new file mode 100644 index 0000000..d0f3401 --- /dev/null +++ b/Samples/attendance_chart.html @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + From adeae108e77c71aac2f58c5ac33b96ac4a1656bf Mon Sep 17 00:00:00 2001 From: Francois Vancoppenolle Date: Tue, 3 Jan 2017 00:22:28 +0100 Subject: [PATCH 05/14] Update annotate.js --- Add-ins/annotate.js | 219 ++++++-------------------------------------- 1 file changed, 28 insertions(+), 191 deletions(-) diff --git a/Add-ins/annotate.js b/Add-ins/annotate.js index 6541aa4..475d292 100644 --- a/Add-ins/annotate.js +++ b/Add-ins/annotate.js @@ -16,13 +16,10 @@ // annotateClassName: "", // annotateFunctionIn: null, // annotateFunctionOut : null, - // annotateBarMinimumDetectionHeight : 0, - // chart.defaults.IExplorer8 ={ // annotateBackgroundColor : "black", // annotateFontColor: "white" -// }; var style = document.createElement('style'); style.type = 'text/css'; @@ -270,7 +267,6 @@ line=line+'} '; style.innerHTML = line document.getElementsByTagName('head')[0].appendChild(style); - ///// var style = document.createElement('style'); @@ -307,21 +303,15 @@ line=line+"height:44px; "; line=line+"position:relative; "; line=line+"top:-6px; "; line=line+"} "; + style.innerHTML = line document.getElementsByTagName('head')[0].appendChild(style); - ///// - - function createCursorDiv(config) { - - if (cursorDivCreated == false) { - cursorDivCreated=true; - if(annotate_shape=="bubble_tooltip") { var div = document.createElement('div'); div.id = 'bubble_tooltip'; @@ -337,7 +327,6 @@ function createCursorDiv(config) { subdiv2.className = 'bubble_middle'; div.appendChild(subdiv2); - var subdiv3 = document.createElement('div'); subdiv3.id = 'bubble_bottom'; subdiv3.className = 'bubble_bottom'; @@ -360,7 +349,6 @@ function createCursorDiv(config) { updateClass(".toolTipLeftBottom","font-size:"+config.annotateFontSize+"pt;font-style:"+config.annotateFontStyle+";font-family:"+config.annotateFontFamily+";background-color:"+config.annotateBackgroundColor+";padding:"+config.annotatePadding+"; border-style: "+config.annotateBorder+"; border-radius:"+config.annotateBorderRadius+"; color:"+config.annotateFontColor+";"); updateClass(".toolTipLeftCenter","font-size:"+config.annotateFontSize+"pt;font-style:"+config.annotateFontStyle+";font-family:"+config.annotateFontFamily+";background-color:"+config.annotateBackgroundColor+";padding:"+config.annotatePadding+"; border-style: "+config.annotateBorder+"; border-radius:"+config.annotateBorderRadius+"; color:"+config.annotateFontColor+";"); updateClass(".toolTipNone","font-size:"+config.annotateFontSize+"pt;font-style:"+config.annotateFontStyle+";font-family:"+config.annotateFontFamily+";background-color:"+config.annotateBackgroundColor+";padding:"+config.annotatePadding+"; border-style: "+config.annotateBorder+"; border-radius:"+config.annotateBorderRadius+"; color:"+config.annotateFontColor+";"); - updateClass(".toolTipTopRight .toolTipTopRightText::after","border-bottom: 5px solid " +config.annotateBackgroundColor+"; color:"+config.annotateFontColor+";"); updateClass(".toolTipTopLeft .toolTipTopLeftText::after","border-bottom: 5px solid " +config.annotateBackgroundColor+"; color:"+config.annotateFontColor+";"); updateClass(".toolTipTopCenter .toolTipTopCenterText::after","border-bottom: 5px solid " +config.annotateBackgroundColor+"; color:"+config.annotateFontColor+";"); @@ -377,38 +365,29 @@ function createCursorDiv(config) { var div = document.createElement(annotate_shape); div.id = annotate_shape; -// div.className = 'toolTipTopRight'; div.style.position = 'absolute'; document.body.appendChild(div); var spa = document.createElement('span'); spa.id = "arrow_content"; -// spa.className = 'toolTipTopRightText'; div.appendChild(spa); - } else { var div = document.createElement(annotate_shape); div.id = annotate_shape; div.style.position = 'absolute'; document.body.appendChild(div); } - } }; - function updateClass(name,rules){ var style = document.createElement('style'); style.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(style); - if(!(style.sheet||{}).insertRule) - (style.styleSheet || style.sheet).addRule(name, rules); - else - style.sheet.insertRule(name+"{"+rules+"}",0); + if(!(style.sheet||{}).insertRule) (style.styleSheet || style.sheet).addRule(name, rules); + else style.sheet.insertRule(name+"{"+rules+"}",0); } -//var arrow_class="TopCenter"; - function initAnnotateDiv(annotateDIV,config,ctx) { if(annotate_shape == "ARROW") { } else if(annotate_shape!='divCursor'){ @@ -435,8 +414,6 @@ function initAnnotateDiv(annotateDIV,config,ctx) { annotateDIV.style.zIndex = 999; }; - - function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate,piece,myStatData,statData) { var arrow_class; var dispString,newPosX,newPosY,decalX,decalY; @@ -444,8 +421,6 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, decalX=0; decalY=0; -// initAnnotateDiv(annotateDIV,config,ctx); - if(typeof config.annotatePaddingX==="number") addDecalX=1*config.annotatePaddingX; else addDecalX=fromLeft; if(typeof config.annotatePaddingY==="number") addDecalY=1*config.annotatePaddingY; @@ -457,22 +432,17 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, if(annotate_shape=="bubble_tooltip") { document.getElementById('bubble_tooltip_content').innerHTML = dispString; annotateDIV.style.display='block'; -// if(document.all)e = event; var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop); if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; var leftPos = event.clientX - 100; if(leftPos<0)leftPos = 0; annotateDIV.style.left = leftPos+'px'; - annotateDIV.style.top = event.clientY - annotateDIV.offsetHeight -1 + st + 'px'; - } else if(annotate_shape == "ARROW") { document.getElementById('arrow_content').innerHTML = dispString; } else { annotateDIV.innerHTML = dispString; - } - if(annotate_shape=="bubble_tooltip") { var textMsr={textHeight: 100, textWidth : 147}; @@ -506,17 +476,13 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, var mouse_posrect = getMousePos(ctx.canvas, event); var vj; - var debj=piece.j; var endj=piece.j+1; - var refpiecei=piece.i; var refpiecej=piece.j; - var rayVal=-1; var midPosX=0; var midPosY=0; - var minDecalY,minDecalX,maxDecalY,maxDecalX,maxRayVal,minRayVal; var angle=9999; var minAngle, maxAngle; @@ -524,7 +490,6 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, var forceX=false; var multX=0; var multY=0; - tpchart=ctx.tpchart; if(data.datasets[piece.i].type=="Line" && (ctx.tpchart=="Bar" || ctx.tpchart=="StackedBar"))tpchart="Line"; @@ -538,12 +503,6 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, case "PolarArea" : angle=(myStatData.startAngle+myStatData.endAngle)/2; break; - case "StackedBar" : - case "Bar" : - case "HorizontalBar" : - case "HorizontalStackedBar" : - case "Line" : - case "Radar" : default: break; } @@ -555,12 +514,6 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, case "PolarArea" : angle=myStatData.startAngle; break; - case "StackedBar" : - case "Bar" : - case "HorizontalBar" : - case "HorizontalStackedBar" : - case "Line" : - case "Radar" : default: break; } @@ -572,12 +525,6 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, case "PolarArea" : angle=myStatData.endAngle; break; - case "StackedBar" : - case "Bar" : - case "HorizontalBar" : - case "HorizontalStackedBar" : - case "Line" : - case "Radar" : default: break; } @@ -594,7 +541,8 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, else angle=Math.atan((midPosY-mouse_posrect.y)/(midPosX-mouse_posrect.x)); if(midPosX>mouse_posrect.x)angle+=Math.PI; break; - + default: + break; } break; } @@ -603,12 +551,6 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, case "MXout" : case "Xout" : switch(tpchart) { - case "StackedBar" : - case "Bar" : - case "HorizontalBar" : - case "HorizontalStackedBar" : - case "Line" : - break; case "Radar" : decalY=myStatData.posY-mouse_posrect.y - textMsr.textHeight; decalX=myStatData.posX-mouse_posrect.x; @@ -641,7 +583,6 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, }; debj=piece.j;endj=piece.j+1; break; - case "PolarArea" : default: break; }; @@ -649,12 +590,6 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, case "MXin" : case "Xin" : switch(tpchart) { - case "StackedBar" : - case "Bar" : - case "HorizontalBar" : - case "HorizontalStackedBar" : - case "Line" : - break; case "Radar" : decalY=myStatData.posY-mouse_posrect.y - textMsr.textHeight; decalX=myStatData.posX-mouse_posrect.x; @@ -693,12 +628,6 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, break; case "in" : switch(tpchart) { - case "StackedBar" : - case "Bar" : - case "HorizontalBar" : - case "HorizontalStackedBar" : - case "Line" : - break; case "Radar" : decalY=myStatData.posY-mouse_posrect.y - textMsr.textHeight; decalX=myStatData.posX-mouse_posrect.x; @@ -718,12 +647,6 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, break; case "out" : switch(tpchart) { - case "StackedBar" : - case "Bar" : - case "HorizontalBar" : - case "HorizontalStackedBar" : - case "Line" : - break; case "Radar" : decalY=myStatData.posY-mouse_posrect.y - textMsr.textHeight; decalX=myStatData.posX-mouse_posrect.x; @@ -746,12 +669,6 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, case "Lcenter" : case "Lmiddle" : switch(tpchart) { - case "StackedBar" : - case "Bar" : - case "HorizontalBar" : - case "HorizontalStackedBar" : - case "Line" : - break; case "Radar" : minDecalY=myStatData.posY-mouse_posrect.y - textMsr.textHeight; minDecalX=myStatData.posX-mouse_posrect.x; @@ -807,12 +724,6 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, case "center" : case "middle" : switch(tpchart) { - case "StackedBar" : - case "Bar" : - case "HorizontalBar" : - case "HorizontalStackedBar" : - case "Line" : - break; case "Radar" : decalY=myStatData.posY-mouse_posrect.y - textMsr.textHeight; decalX=myStatData.posX-mouse_posrect.x; @@ -849,11 +760,6 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, break; } - - - - - switch(config.annotatePositionY) { case "LXtop" : switch(tpchart) { @@ -931,9 +837,7 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, case "Line" : decalY=myStatData.posY-mouse_posrect.y - textMsr.textHeight; break; - case "Pie" : - case "Doughnut" : - case "PolarArea" : + default: break; }; break; @@ -1024,9 +928,7 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, case "Line" : decalY=myStatData.posY-mouse_posrect.y - 0*textMsr.textHeight; break; - case "Pie" : - case "Doughnut" : - case "PolarArea" : + default : break; }; break; @@ -1067,9 +969,7 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, case "Line" : decalY=myStatData.posY-mouse_posrect.y - 0.5*textMsr.textHeight; break; - case "Pie" : - case "Doughnut" : - case "PolarArea" : + default : break; }; break; @@ -1162,9 +1062,7 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, case "Line" : decalX=myStatData.xPos-mouse_posrect.x; break; - case "Pie" : - case "Doughnut" : - case "PolarArea" : + default : break; }; break; @@ -1239,9 +1137,7 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, case "Line" : decalX=myStatData.xPos-mouse_posrect.x-textMsr.textWidth; break; - case "Pie" : - case "Doughnut" : - case "PolarArea" : + default: break; }; break; @@ -1282,9 +1178,7 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, case "Line" : decalX=myStatData.xPos-mouse_posrect.x-(textMsr.textWidth/2); break; - case "Pie" : - case "Doughnut" : - case "PolarArea" : + default: break; }; break; @@ -1302,13 +1196,15 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, decalX=decalX-textMsr.textWidth; } forceX=true; - } break; } if(tpchart=="Pie" || tpchart=="Doughnut" || tpchart=="PolarArea") { + if(typeof config.annotatePaddingAngle=="number" )angle+=Math.PI*(1*config.annotatePaddingAngle)/180; + if(typeof config.annotatePaddingRadius=="number")rayVal+=(1*config.annotatePaddingRadius); + while(angle<0){angle+=2*Math.PI;} while(angle>2*Math.PI){angle-=2*Math.PI;} @@ -1341,19 +1237,22 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, } } - - if(annotate_shape!='bubble_tooltip') { - if(annotate_shape == "ARROW") { - var lrect = ctx.canvas.getBoundingClientRect(); - arrow_class=arrowDirection(newPosX+decalX+addDecalX-(lrect.left+window.pageXOffset), newPosY+decalY+addDecalY-(lrect.top+window.pageYOffset), angle, rayVal, textMsr.textWidth,textMsr.textHeight,ctx,jsGraphAnnotate[ctx.ChartNewId][piece.piece],myStatData); - annotateDIV.className = "toolTip"+arrow_class; - document.getElementById('arrow_content').className="toolTip"+arrow_class+"Text"; - } - - oCursor.moveIt(newPosX+decalX+addDecalX, newPosY+decalY+addDecalY); - annotateDIV.style.display = true ? '' : 'none'; + if(annotate_shape!='bubble_tooltip') { + if(annotate_shape == "ARROW") { + if(config.annotateClassName =="") { + var lrect = ctx.canvas.getBoundingClientRect(); + arrow_class=arrowDirection(newPosX+decalX+addDecalX-(lrect.left+window.pageXOffset), newPosY+decalY+addDecalY-(lrect.top+window.pageYOffset), angle, rayVal, textMsr.textWidth,textMsr.textHeight,ctx,jsGraphAnnotate[ctx.ChartNewId][piece.piece],myStatData); + annotateDIV.className = "toolTip"+arrow_class; + document.getElementById('arrow_content').className="toolTip"+arrow_class+"Text"; + } else { + annotateDIV.className = "toolTip"+config.annotateClassName; + document.getElementById('arrow_content').className="toolTip"+config.annotateClassName+"Text"; } + } + oCursor.moveIt(newPosX+decalX+addDecalX, newPosY+decalY+addDecalY); + annotateDIV.style.display = true ? '' : 'none'; + } }; @@ -1408,63 +1307,6 @@ function arrowDirection(x,y,angle,rayVal,width,height,ctx,jsGraphAnnotate,myStat if(rightBottomPos.distCenter < minDist){ arrow="RightBottom"; minDist=rightBottomPos.distCenter; } return(arrow); - - var topCenterPos=compAnglPos((2*x+width)/2,y-5,myStatData,centerPosX,centerPosY); - if(inArc(topCenterPos,myStatData))return("TopCenter"); - var bottomCenterPos=compAnglPos((2*x+width)/2,y+height+5,myStatData,centerPosX,centerPosY); - if(inArc(bottomCenterPos,myStatData))return("BottomCenter"); - var topLeftPos=compAnglPos(x+5+2.5,y-5,myStatData,centerPosX,centerPosY); - if(inArc(topLeftPos,myStatData))return("TopLeft"); - var topRightPos=compAnglPos(x+width-5-2.5,y-5,myStatData,centerPosX,centerPosY); - if(inArc(topRightPos,myStatData))return("TopRight"); - var bottomLeftPos=compAnglPos(x+5+2.5,y+height+5,myStatData,centerPosX,centerPosY); - if(inArc(bottomLeftPos,myStatData))return("BottomLeft"); - var bottomRightPos=compAnglPos(x+width-5-2.5,y+height+5,myStatData,centerPosX,centerPosY); - if(inArc(bottomRightPos,myStatData))return("BottomRight"); - var leftCenterPos=compAnglPos(x-5,(2*y+height)/2,myStatData,centerPosX,centerPosY); - if(inArc(leftCenterPos,myStatData))return("LeftCenter"); - var leftTopPos=compAnglPos(x-5,y+5+2.5,myStatData,centerPosX,centerPosY); - if(inArc(leftTopPos,myStatData))return("LeftTop"); - var leftBottomPos=compAnglPos(x-5,y+height-5-2.5,myStatData,centerPosX,centerPosY); - if(inArc(leftBottomPos,myStatData))return("LeftBottom"); - var rightCenterPos=compAnglPos(x+width+5,(2*y+height)/2,myStatData,centerPosX,centerPosY); - if(inArc(rightCenterPos,myStatData))return("RightCenter"); - var rightTopPos=compAnglPos(x+width+5,y+5+2.5,myStatData,centerPosX,centerPosY); - if(inArc(rightTopPos,myStatData))return("RightTop"); - var rightBottomPos=compAnglPos(x+width+5,y+height-5-2.5,myStatData,centerPosX,centerPosY); - if(inArc(rightBottomPos,myStatData))return("RightBottom"); - - return("None"); - - - var rightCenterPos=compAnglPos((2*x+height)/2,y,myStatData); - var topLeftPos=compAnglPos((2*x+height)/2,y,myStatData); - var topLeftPos=compAnglPos((2*x+height)/2,y,myStatData); - var topLeftPos=compAnglPos((2*x+height)/2,y,myStatData); - if(angle < Math.PI*1/6) { - if(rayVal> myStatData.radiusOffset)return("LeftCenter"); - } else if(angle < Math.PI*2/6) { - return("LeftTop"); - } else if(angle < Math.PI*3/6) { - return("TopLeft"); - } else if(angle < Math.PI*4/6) { - return("TopRight"); - } else if(angle < Math.PI*5/6) { - return("RightTop"); - } else if(angle < Math.PI*7/6) { - return("RightCenter"); - } else if(angle < Math.PI*8/6) { - return("RightBottom"); - } else if(angle < Math.PI*9/6) { - return("BottomRight"); - } else if(angle < Math.PI*10/6) { - return("BottomLeft"); - } else if(angle < Math.PI*11/6) { - return("LeftBottom"); - } else if(angle < Math.PI*12/6) { - return("LeftBottom"); - } - return("None"); break; case "RECT" : var xright=Math.min(myStatData.xPosRight,myStatData.xPosLeft); @@ -1547,9 +1389,7 @@ function inAngle(angle,startAngle,stopAngle){ else return(false); }; - function compAnglPos(x,y,myStatData,centerX,centerY) { -// distCenter=Math.sqrt(Math.pow(x-centerX,2)+Math.pow(y-centerY,2)); rayVal=Math.sqrt(Math.pow(x-myStatData.midPosX,2)+Math.pow(y-myStatData.midPosY,2)); angle=Math.acos((x-myStatData.midPosX)/rayVal); if(y Date: Tue, 3 Jan 2017 00:24:10 +0100 Subject: [PATCH 06/14] Update chart_list.js --- demo_program/chart_list.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/demo_program/chart_list.js b/demo_program/chart_list.js index 6f04c6d..cd89df6 100644 --- a/demo_program/chart_list.js +++ b/demo_program/chart_list.js @@ -115,3 +115,15 @@ lst[lst.length]=["bar_over_others","../Samples/third_bar.html","50.Varia bar cha lst[lst.length]=["LegendSample2","../Samples/legendSample2.html","90.Add-ins add-ins drawLegend","","example of the add-ins drawLegend.js"]; lst[lst.length]=["LegendSample3","../Samples/legendSample3.html","90.Add-ins add-ins drawLegend","","example of the add-ins drawLegend.js"]; lst[lst.length]=["LegendSample4","../Samples/legendSample4.html","90.Add-ins add-ins drawLegend","","example of the add-ins drawLegend.js"]; +lst[lst.length]=["arrow_annotate","../Samples/annotate_arrow.html","90.Add-ins add-ins annotate.js","","example of annotates with arrow shape"]; +lst[lst.length]=["bubble_annotate","../Samples/annotate_bubble.html","90.Add-ins add-ins annotate.js","","example of annotates with bubbles"]; +lst[lst.length]=["annotate_bar","../Samples/annotate_for_bar_charts.html","90.Add-ins add-ins annotate.js","","example of annotates positions for bar charts"]; +lst[lst.length]=["annotate_circular","../Samples/annotate_for_circular_charts.html","90.Add-ins add-ins annotate.js","","example of annotates position for circular charts"]; +lst[lst.length]=["annotate_lines","../Samples/annotate_for_line_charts.html","90.Add-ins add-ins annotate.js","","example of annotates positions for line charts"]; +lst[lst.length]=["annotate_stackedBar","../Samples/annotate_for_stackedbar_charts.html","90.Add-ins add-ins annotate.js","","example of annotates positions for stackedbar charts"]; +lst[lst.length]=["attendance_chart","../Samples/attendance_chart.html","90.Add-ins add-ins shapesInChart","","example of attendance chart"]; +lst[lst.length]=["background_for_bars","../Samples/bars_with_background_color.html","90.Add-ins add-ins shapesInChart","","example of charts with background colors"]; +lst[lst.length]=["highlight5","../Samples/highLight5.html","90.Add-ins add-ins shapesInChart","","example highlights with rectangle"]; +lst[lst.length]=["click_on_point","../Samples/issue_0486.html","50.Varia Line Mouse Action","","Action performed when you click on a point"]; +lst[lst.length]=["Percentage","../Samples/issue_475.html","90.Add-ins add-ins shapesInChart specialInChartData stats","","example with percentage as label"]; +lst[lst.length]=["test_result","../Samples/testChartIsDrawn.html","50.Varia test chart is drawn","","example on how to test if chart is drawn"]; From 6af8d6d0794379be625389fdde4cab081585444a Mon Sep 17 00:00:00 2001 From: Francois Vancoppenolle Date: Tue, 3 Jan 2017 00:27:55 +0100 Subject: [PATCH 07/14] Create annotate_bubble.html --- Samples/annotate_bubble.html | 190 +++++++++++++++++++++++++++++++++++ 1 file changed, 190 insertions(+) create mode 100644 Samples/annotate_bubble.html diff --git a/Samples/annotate_bubble.html b/Samples/annotate_bubble.html new file mode 100644 index 0000000..42c40e1 --- /dev/null +++ b/Samples/annotate_bubble.html @@ -0,0 +1,190 @@ + + + + + + + + + + + +
Bubble_tooltip
+ + + + + + + + From f4bea1807b73234e6b8861225684a026d214d611 Mon Sep 17 00:00:00 2001 From: Francois Vancoppenolle Date: Tue, 3 Jan 2017 00:28:37 +0100 Subject: [PATCH 08/14] Create annotate_arrow.html --- Samples/annotate_arrow.html | 189 ++++++++++++++++++++++++++++++++++++ 1 file changed, 189 insertions(+) create mode 100644 Samples/annotate_arrow.html diff --git a/Samples/annotate_arrow.html b/Samples/annotate_arrow.html new file mode 100644 index 0000000..1bbd180 --- /dev/null +++ b/Samples/annotate_arrow.html @@ -0,0 +1,189 @@ + + + + + + + + + + +
tooltip with an arrow
+ + + + + + + + From 2a34951326ea579c60510a1bacf299fe9610f732 Mon Sep 17 00:00:00 2001 From: Francois Vancoppenolle Date: Tue, 3 Jan 2017 00:29:30 +0100 Subject: [PATCH 09/14] Create annotate_for_line_charts.html --- Samples/annotate_for_line_charts.html | 67 +++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 Samples/annotate_for_line_charts.html diff --git a/Samples/annotate_for_line_charts.html b/Samples/annotate_for_line_charts.html new file mode 100644 index 0000000..d4f1bd5 --- /dev/null +++ b/Samples/annotate_for_line_charts.html @@ -0,0 +1,67 @@ + + + + + + + + + + +
some sample tooltip position for (stacked)bar charts
+ + + + + + + + + + + + + + From 7554f907a25072b8c8908e1af9454d8cc269996a Mon Sep 17 00:00:00 2001 From: Francois Vancoppenolle Date: Tue, 3 Jan 2017 00:29:56 +0100 Subject: [PATCH 10/14] Create annotate_for_bar_charts.html --- Samples/annotate_for_bar_charts.html | 67 ++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 Samples/annotate_for_bar_charts.html diff --git a/Samples/annotate_for_bar_charts.html b/Samples/annotate_for_bar_charts.html new file mode 100644 index 0000000..1b02628 --- /dev/null +++ b/Samples/annotate_for_bar_charts.html @@ -0,0 +1,67 @@ + + + + + + + + + + +
some sample tooltip position for (stacked)bar charts
+ + + + + + + + + + + + + + From 61071372c5cff509bbd4962b14ebb4712ad65b36 Mon Sep 17 00:00:00 2001 From: Francois Vancoppenolle Date: Tue, 3 Jan 2017 00:31:04 +0100 Subject: [PATCH 11/14] Create annotate_for_stackedbar_charts.html --- Samples/annotate_for_stackedbar_charts.html | 67 +++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 Samples/annotate_for_stackedbar_charts.html diff --git a/Samples/annotate_for_stackedbar_charts.html b/Samples/annotate_for_stackedbar_charts.html new file mode 100644 index 0000000..94fbeb6 --- /dev/null +++ b/Samples/annotate_for_stackedbar_charts.html @@ -0,0 +1,67 @@ + + + + + + + + + + +
some sample tooltip position for (stacked)bar charts
+ + + + + + + + + + + + + + From 5e0397abee84a83a0dd70287ef51977ced41b96f Mon Sep 17 00:00:00 2001 From: Francois Vancoppenolle Date: Tue, 3 Jan 2017 00:31:28 +0100 Subject: [PATCH 12/14] Create annotate_for_circular_charts.html --- Samples/annotate_for_circular_charts.html | 75 +++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 Samples/annotate_for_circular_charts.html diff --git a/Samples/annotate_for_circular_charts.html b/Samples/annotate_for_circular_charts.html new file mode 100644 index 0000000..93dba5e --- /dev/null +++ b/Samples/annotate_for_circular_charts.html @@ -0,0 +1,75 @@ + + + + + + + + + + +
some sample tooltip position for circular charts
+ + + + + + + + + + + + + + From ce85e6bd4151fbbf138cd938ba042341128ce425 Mon Sep 17 00:00:00 2001 From: Francois Vancoppenolle Date: Tue, 3 Jan 2017 17:54:44 +0100 Subject: [PATCH 13/14] Update annotate.js --- Add-ins/annotate.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Add-ins/annotate.js b/Add-ins/annotate.js index 475d292..5aeb110 100644 --- a/Add-ins/annotate.js +++ b/Add-ins/annotate.js @@ -981,7 +981,7 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, } else if (typeof config.annotatePositionY!="undefined" && config.annotatePositionY.indexOf("%")>0) { var lrect = ctx.canvas.getBoundingClientRect(); var pct=1*config.annotatePositionY.substr(0,config.annotatePositionY.indexOf("%")); - decalY=-newPosY+1*ctx.canvas.height*pct/100+lrect.top+window.pageYOffset; + decalY=-newPosY+(1*ctx.canvas.height*pct/100)/window.devicePixelRatio+lrect.top+window.pageYOffset; if(Math.abs(pct-50) < config.zeroValue) { decalY=decalY-textMsr.textHeight/2; } else if(pct > 50) { @@ -1189,7 +1189,7 @@ function displayAnnotate(ctx,data,config,rect,event,annotateDIV,jsGraphAnnotate, forceX=true; } else if (typeof config.annotatePositionX !="undefined" && config.annotatePositionX.indexOf("%")>0) { var pct=1*config.annotatePositionX.substr(0,config.annotatePositionX.indexOf("%")); - decalX=-newPosX+1*1*ctx.canvas.width*pct/100+lrect.left+window.pageXOffset; + decalX=-newPosX+(1*ctx.canvas.width*pct/100)/window.devicePixelRatio+lrect.left+window.pageXOffset; if(Math.abs(pct-50) < config.zeroValue) { decalX=decalX-textMsr.textWidth/2; } else if(pct > 50) { From 2210005dbf9f4d0ac4d67e917320a7afe82727cd Mon Sep 17 00:00:00 2001 From: Francois Vancoppenolle Date: Tue, 3 Jan 2017 18:10:50 +0100 Subject: [PATCH 14/14] Update annotate.js --- Add-ins/annotate.js | 68 +++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 65 insertions(+), 3 deletions(-) diff --git a/Add-ins/annotate.js b/Add-ins/annotate.js index 5aeb110..e486a02 100644 --- a/Add-ins/annotate.js +++ b/Add-ins/annotate.js @@ -269,6 +269,65 @@ document.getElementsByTagName('head')[0].appendChild(style); ///// +var bubble_top_data = 'data:image/gif;base64,'+ + 'R0lGODlhkwAQANUxAP7+/sHBwePj4+Hh4eXl5XZ2dmdnZ7q6urOzs+zs7KSkpHR0dNfX15ubm7u7'+ + 'u4CAgKqqqo6Ojurq6rKyssrKyu/v73l5efr6+vv7+/Ly8vb29v39/Wtra6Ghoff392VlZZOTk9bW'+ + '1oqKiufn52lpadPT0/n5+ZWVlbGxscDAwM7Ozvj4+Ovr6+jo6Ly8vGZmZv///////wAAAAAAAAAA'+ + 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADEALAAAAACTABAAAAb2wJhw'+ + 'SCwaj8ikcslsOp/QaLFCgUQsnJd2y+16v+CweEwum7kcSwRCqcBgUiJhUmg4GInLe8/v+/+AgYKD'+ + 'hIWGfRcJDA4NBRMEb3EBDwgCh5eYmZqbhgIIDwEAcE8SBgoDnKmqq6yAAwoGEqNMAgsHrbi5upgH'+ + 'CwMATBILAbvFxsd7AQsjwEoGt8jR0qwHBh7NRwEK09zdmgooGhtHBA+o3ujpgQMPKhrYQxMI6vT1'+ + 'ewgnBCuiQxUFlvYCohNQIAALDNgoNBDI0FsDECEyjBMCwUHDi9IcFHBBwMSQCAwwijTGgESHEhmG'+ + 'WEgwsmWuBB9EpGiBAUYQADs='; + + +var bubble_middle_data = 'data:image/gif;base64,'+ + 'R0lGODlhkwA8AKIGAL+/v4CAgOrq6lVVVWZmZv///////wAAACH5BAEAAAYALAAAAACTADwAAAPp'+ + 'aFTc/jDKSau9OOtGRgBCoWxkaZ4o2n3hmL5wLF8rKC5zru9m3eK8oHDI8dhcxKQy5rstn9BSExmt'+ + 'WiNT4HV7zXK/Vi94vBSTz0Izep1Ts98vN3wuNf7o+J7dme9n5H6BEICChQWEhoGIiX2LjHiOj3OR'+ + 'km+UlWuXmGeam2Odnl+goVujpGF7VKdwpqtQra5lqVqxmbO1rLe4bLC7abq+nMDBn8PEosbHpcnK'+ + 'qCx8zVy90UzM1E/T1ynZ2ifc3XXPquBK3+Qa5ucY6eoW7O0U7/AS8vOD1vYz9flF4rT8bfABjCNw'+ + 'oIo9CQAAOw=='; + +var bubble_bottom_data = 'data:image/gif;base64,'+ + 'R0lGODlhkwAtAPetAEBAQICAgOrq6lVVVb+/v2ZmZkFBQf39/fr6+vj4+Pv7+/n5+UpKSp6enuzs'+ + '7PLy8uXl5UNDQ0JCQqqqqlZWVkZGRt3d3fX19VJSUsLCwkRERFxcXF5eXvb29sTExOvr68vLy9TU'+ + '1LOzs2pqauPj42hoaHR0dIqKiunp6VNTU+3t7Wtra+Hh4UdHR7q6uklJScDAwHZ2dpKSkvz8/EVF'+ + 'RW1tbXh4eKGhoU9PT4mJiWVlZU1NTWJiYq2trejo6Jubm9fX166uroyMjNvb26SkpISEhHp6enNz'+ + 'c2FhYVhYWHx8fN/f3/T09FRUVH9/f3d3d8XFxVFRUWdnZ+Dg4NbW1t7e3vDw8O/v74GBgbu7u05O'+ + 'TtPT06Wlpby8vO7u7vPz82xsbLCwsFdXV4ODg3BwcOfn59nZ2bKyspGRkb29vUtLS8bGxsrKysHB'+ + 'wfHx8f7+/ubm5q+vr3JyclBQUHl5eUxMTIeHh9zc3GBgYLi4uM7OzpOTk11dXWRkZL6+vpSUlI6O'+ + 'jtXV1aOjo4WFhZCQkFlZWWlpaX5+fltbW5WVlbe3t29vb3t7e+Tk5FpaWpeXl6mpqZiYmNHR0XFx'+ + 'cdra2rS0tJ2dnc3NzZycnKKioo2NjcfHx4iIiLGxsYuLi+Li4qurq6ysrNLS0rm5uZaWll9fX2Nj'+ + 'Y319fcPDw6CgoMnJydDQ0P///////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+ + 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+ + 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+ + 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+ + 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAK0ALAAAAACTAC0A'+ + 'AAj/AFutQMCqoMGDCBMqXMiwocOHECNKnMgKgY4BAQgIYNWKjgOKIEOKHElSpAMkGDVyBASkpMuX'+ + 'MGM+BLKBQkYBrVpNyCKzp8+fIbNQoIAFBs5WbH4AXcq0qcEfWpIUyeAg55UYJJxq3eqSRIwWG3Ks'+ + 'UZGz1RkRXNOqlSgiRQUeMkBYKQshAIu1ePMeZBGgBYMRDUIwKdsqDRG9iNcSwSEBw5MeFhIQRiDF'+ + 'ReLLTl1IMdCCwwkYPhQQbrXERBvMqH22MUFDAg4yN7Y8eDN6gR4TllPrLunCRAsDL/Cc6AJhwehW'+ + 'Bx5skkLk7u7nElkQkULDQAUxRiZQeXDgeCsFH9hw/wogIiv08wpJiAiAA4D1AUcagPiggLb3BBA8'+ + 'yAAT40cWIA4QhF5qCDgARBY/xOCWARK8IMYRP3gAQQL2eddKByR40IANPGzAARI6FCDiiCSWaOKJ'+ + 'KKaoYoorCBHKElpNIYIQBeiAxAYD7BABgy3ggIcRDXhAQgcWEnZABxCAMMEJZHCAAQMV7GgAAFRW'+ + 'aeWVWGap5ZZcXtkgBhyM4cEBQIEwSClNvFClAQZEUAEDYJJxwgQgQNBBd0USlsAHVHRxwwlPjNBh'+ + 'EkMNYOihiCaq6KKMNuqook2kkAIiTgzR0xBOOKImgzQwgEMKYmzAwwhPnHBDF1R8IFmexynwAARb'+ + 'wP/QQwMy5FAEFgHkquuuvPbq66/ABuvrIUaYMAISJYRBpksJTMDHDu5pwEAKHBhighJj5CBDAz3A'+ + 'sAUED4jGqncHLPCADxaEAMIaGcBAwLvwxivvvPTWa++99KaRx6xCPFFAJAKOpAIWTUjQJgMD6GCD'+ + 'J9yOAsMaIIRggQ8PLIDnuEUqkAATVqjggAAghyzyyCSXbPLJKJeMAgoQVBGCB2GQsgggAYNkxhEY'+ + 'uNdCFKYwkkgQqGxRBRwCqGAFEwmIi/HSTDft9NPILcDEB1WwEYcNiSxLUQgrQBsBA4XIQUgcqlgg'+ + 'wBcWQ6322my3fUACXtzRxiFBgBTCCGoYoMEOPDj/cUMGd6iQwMVtF2744UXOcAEcUNgQwkRA4K33'+ + 'HCXkEMcqPtyJ+Oacd77AB2HEkEBEKCxShwE0YLACIXmYcQUCnccue+EFPlL3Qw8oEYXeGNTwRxpV'+ + 'fDHD7MQX7zQCjYyAgkMHoNEEABrMAcYfBLBwAeHGZ6/9cQsEIYhDZ1AAQARaGCKDH9Zjv/3627ux'+ + 'ghsMDVFCBBLU0YcQLixxPfv8s38AKGdYCAKUsAPgcKAIIhjCF9TXvwbOrgxGWMgEKGCdJDBiAoFw'+ + 'w/AcyEHjjQFGCLFACSQQgShMogGXcIDSOsjC2LkAEghRwCm0YAA16AANGYCDcVrIw845wAYIUQQF'+ + 'yCvgCCyIwAIX6KESOUeHDxjkCjXQQAnlkAlJWIGBS8zi01IBBYNwAQMGYEAfcOgD2GnxjGvLwPdY'+ + '8YkSoC4JTuiEBYiExjo+bQqDKMgeEKEBLdTAEnq4AhbtSEjvIGAFB5gCGDbAAD7YoQuN2GEhJ8kq'+ + 'JaBgD0UoQSGOwIVAPICSoMxTEBSBCS7EoAaayAAKVhjKVuZEBTUQRSVyYIcJmCGJrsxlWTpQBg/c'+ + 'gAtQEMAGdalLL1DBD1BAIjGXeYEyUGIKXhhm9gICADs='; + + var style = document.createElement('style'); style.type = 'text/css'; line=""; @@ -278,12 +337,14 @@ line=line+"position:absolute; "; line=line+"display:none; "; line=line+"} "; line=line+"#bubble_tooltip .bubble_top{ "; -line=line+"background-image: url('../Add-ins/bubble_top.gif'); "; +//line=line+"background-image: url('../Add-ins/bubble_top.gif'); "; +line=line+"background-image: url("+bubble_top_data+"); "; line=line+"background-repeat:no-repeat; "; line=line+"height:16px; "; line=line+"} "; line=line+"#bubble_tooltip .bubble_middle{ "; -line=line+"background-image: url('../Add-ins/bubble_middle.gif'); "; +//line=line+"background-image: url('../Add-ins/bubble_middle.gif'); "; +line=line+"background-image: url("+bubble_middle_data+"); "; line=line+"background-repeat:repeat-y; "; line=line+"background-position:bottom left; "; line=line+"padding-left:7px; "; @@ -296,7 +357,8 @@ line=line+"font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; "; line=line+"font-size:11px; "; line=line+"} "; line=line+"#bubble_tooltip .bubble_bottom{ "; -line=line+"background-image: url('../Add-ins/bubble_bottom.gif'); "; +//line=line+"background-image: url('../Add-ins/bubble_bottom.gif'); "; +line=line+"background-image: url("+bubble_bottom_data+"); "; line=line+"background-repeat:no-repeat; "; line=line+"background-repeat:no-repeat; "; line=line+"height:44px; ";