Hi All
We would like to get a modal to show after clicking on a chart element. Any ideas?
Google hasn’t been able to help me much with this one…
Thanks
David
Once you have function triggered after click on chart you can make a bootstrap modal popup via javascript
JS
$scope.functionAfterChartClick = function(){
$("#myModal").modal();
}
HTML
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Hi @ishapiro
That last post was the one I was looking for. I did come across that before but got confused with the modal id and calling that via the function.
Next problem is the tooltip appears in the wrong position on wider monitors. In some instances it’s being pushed off the screen:
From what I’ve found it’s because the tooltip is being translated based on the parent object, the original chart, which appears in the top left-hand corner of the page. But I haven’t been able to find a fix that I can understand. Any suggestions?
Thanks
David
Hi David,
In regards to the tooltip
Please see below for work around.
HTML
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" id="chart" >
<tm1-ui-chart ng-mousemove="$root.doMouseOver($event)" ng-mouseleave="$root.doMouseOut($event)" tm1-chart-type="lineWithFocus" tm1-height="300" tm1-margin="chart.margin" tm1-data-decimal="0" ng-model="values.data">
<tm1-ui-chart-dbr ng-repeat="month in ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']" tm1-label="{{month}}" tm1-series="Mountain Bikes" tm1-instance="dev" tm1-cube="Retail" tm1-elements="Actual,{{$root.defaults.year}},{{month}},Local,{{$root.defaults.region}},Mountain Bikes,Sales Amount"></tm1-ui-chart-dbr>
<tm1-ui-chart-dbr ng-repeat="month in ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']" tm1-label="{{month}}" tm1-series="Touring Bikes" tm1-instance="dev" tm1-cube="Retail" tm1-elements="Actual,{{$root.defaults.year}},{{month}},Local,{{$root.defaults.region}},Touring Bikes,Sales Amount"></tm1-ui-chart-dbr>
<tm1-ui-chart-dbr ng-repeat="month in ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']" tm1-label="{{month}}" tm1-series="Road Bikes" tm1-instance="dev" tm1-cube="Retail" tm1-elements="Actual,{{$root.defaults.year}},{{month}},Local,{{$root.defaults.region}},Road Bikes,Sales Amount"></tm1-ui-chart-dbr>
</tm1-ui-chart>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
JS file code
$rootScope.doMouseOver = function(e){
if(document.getElementsByClassName("nvtooltip xy-tooltip").length){
var objToCopy = document.getElementsByClassName('nvtooltip xy-tooltip')[0].innerHTML;
tmp = document.getElementById('tooltip');
tmp.setAttribute("style" , "top: 0px; left: 0px; opacity: 1; padding:0px;z-index:9999; padding:10px; background-color:#fff; position: fixed; transform: translate("+(e.clientX + 20)+"px, "+((e.clientY)+20)+"px ) !important") ;
tmp.innerHTML = objToCopy;
document.getElementsByClassName('nvtooltip xy-tooltip')[0].style.display = "none";
}
}
$rootScope.doMouseOut = function(e){
if(document.getElementsByClassName("nvtooltip xy-tooltip").length){
var objToCopy = document.getElementsByClassName('nvtooltip xy-tooltip')[0].innerHTML;
tmp = document.getElementById('tooltip');
tmp.setAttribute("style" , "top: 0px; left: 0px; opacity: 0; padding:0px;z-index:9999; padding:10px; background-color:#fff; position: fixed; transform: translate("+(e.clientX + 20)+"px, "+((e.clientY)+20)+"px ) !important") ;
tmp.innerHTML = objToCopy;
document.getElementsByClassName('nvtooltip xy-tooltip')[0].style.display = "none";
}
}
$rootScope.pageLoaded = function(){
var divTolltipContainer = document.createElement("div");
divTolltipContainer.setAttribute('id', 'tooltip');
divTolltipContainer.setAttribute('class', 'nvtooltip xy-tooltip');
document.getElementById("myModal").appendChild(divTolltipContainer);
}
Code Explanation
- Add a empty “div” once bootstrap modal loaded, ng-init="$root.pageLoaded()" function to the modal container via appendChild()
- TM1 chart has two mouse listeners ng-mousemove="$root.doMouseOver($event)" and ng-mouseleave="$root.doMouseOut($event)".
- Inside the doMouseOver function the code is grabbing the innerHTML of a existing tooltip from the tm1-chart and adding the html to the new tooltip container that can be controlled by the mouse x and y co-ordinates, created on pageLoaded().
4.$root.doMouseOut() function hides the tooltip after user has left the chart.
Thanks
Ilia
Hi @ishapiro
I’ve copied your code and added those two lines to the th1-ui-chart directive, and changed the id in the document.getElementById(“myModal”) to the modal id I’ve assigned, however, the interactive guideline tooltip is still appearing in the wrong position. It’s also throwing up a heap of “TypeError: Cannot read property ‘setAttribute’ of null” errors in the console when the mouse moves over the chart.
To save time for now I’ve just turned off the interactive guideline. Thanks so much for your help though!
Cheers
David
chart-tooltip-fix.zip (2.1 KB)
Please try using the following html and js file with working version of tooltip on a samples DB
Cheers,
Ilia