How to create a custom tooltip in lineChart of nvd3.js?, i want to add a "total" value in the tooltip something like this
I've tried to call the chart.tooltip.contentGenerator, to create a custom tooltip, but the data is empty
chart.tooltip.contentGenerator(function(data) {
console.log(data) //empty
});
i'am using nvd3 version 1.8.5 and d3 version 3.5.9 only,
here's my fiddle: sample
Please try using chart.interactiveLayer.tooltip.contentGenerator. Testing your code with this line, I was able to watch values inside data variable, as you can see below:
.
From here you could construct or edit your custom tooltip as you wish. Let me know if it works for you.
[EDIT - SUGGESTION TO INCLUDE EVENT BEHAVIOR]
Looking inside NVD3, I realized that the tooltip's contentGenerator contains all specific code to add events behavior for tooltip. If you take a look at the original tooltip, it uses a class called highlight to mark focused color, but the custom tooltip has not implemented this events and does not highlith focused color.
I know it's a step back, once you have made you own code for thisd custom tooltip, but seems that the only way to achieve this is to rebuild your code to inlcude event behavior. Maybe starting from the orginal code that NVD3 includes to create tooltip usign contetGenerator will help (thats the way I would take, but it's up to you if you prefer to implement this on your current code).
If you want to take a look at this code, please find tooltip.js for your NVD3 version or visit this GitHub link
On this file, if you check at line 83, of just searching for "highlight" on the file, you can see the way event enter() is implemented for all tr elements inside table body, adding the classname highlight.
var trowEnter = tbodyEnter.selectAll("tr")
.data(function(p) { return p.series})
.enter()
.append("tr")
.classed("highlight", function(p) { return p.highlight});
My suggestion is to take all this code (I mean all inside contentGenerator function) for your custom contentGenerator, so you can asure that all HTML code is generated true to the original, even with associated behavior, and then override it to include the customization you have made for the title.
Please, try this and let me know if you can manage to solve the problem.
#Dave Miller
Thanks sir, i also figured it out sorry if i didn't share. i do it like this\
Maybe i did the long method, anyway thanks!
Related
I am trying to modify this HighStock example: https://www.highcharts.com/demo/synchronized-charts
I have made a really small change which you can see in this JSFiddle:
https://jsfiddle.net/fshsweden/zyzdzk3j/
Basically, instead of adding all charts on top of each other into #container, I want each chart in his own #chart_1, #chart_2 etc etc like this:
<div id="container">
<div id="chart_1"></div>
<div id="chart_2"></div>
<div id="chart_3"></div>
</div>
In order to do this, I made a small change in loading and changed this
$('<div class="chart">')
.appendTo('#container')
.highcharts({
into
Highcharts.stockChart('chart_' + count, {
The charts end up in the right place, but the synchronization code
($('#container').bind('mousemove touchmove touchstart', function (e) {
no longer work (the highlight bar isnt synchronized between the charts). Can anyone explain why that is so?
Thanks
Peter
All these errors occur (check out the console output), because the example that you referred to:
I am trying to modify this HighStock example: https://www.highcharts.com/demo/synchronized-charts
is adjusted for Highcharts (Highcharts.chart()) and not for Highstock (Highcharts.stockChart()).
If you change the library to highcharts.js and the constructor to the Highcharts.chart() your code will work just fine: https://jsfiddle.net/kkulig/b41xxutj/
I've done some adjustments to make it work in Highstock too: https://jsfiddle.net/kkulig/rnv2ovru/
All changes in Tooltip.prototype.refresh function are marked with comment: //adjustment for Highstock.
As Deep3015 says, this was the short answer:
this.series.chart.tooltip.refresh(this); // Show the tooltip creates problem comment this and check jsfiddle.net/4um9ghvq and also check this post – Deep 3015
Kamil Kuligs anser is probably right too, but I don't understand it fully...
The Issue:
I have a map made with AmCharts. With some help I was able to make it so upon hover I can display info for each state. I want to make it so that when I click on a state, it displays some of that state info below in a div.
My Jumbled Thoughts:
At first I thought this would require managing the 'state', but I am pretty sure that using 'state' would be overkill. With that said, it seems like it should be a simple issue to have a click event display the same value that I am getting upon hover...but it is apparently too hard for me right now (or too late).
Some Code:
$("#chartdiv").click(function() { // line 641
document.getElementById('tempInfo').innerHTML = event.mapObject.infoTitle;
});
Then I thought maybe this would work:
map.addListener("click", function(event){ // line 637
document.getElementById('tempInfo').innerHTML = event.mapObject.infoTitle;
});
Link to Full Code:
http://codepen.io/anon/pen/PGYQxX?editors=0011
Apologies for my Ignorance and Preemptive Expression of Gratitude:
I am working on getting better at basic JS, but at the same time I'm trying to power through things I have a poorer understanding of.
Any help is greatly appreciated, thanks!
There's a event called clickMapObject which you can listen for. It will give you the map object you clicked on as part of the event object you get as parameter.
As it seems like you don't bother to use jQuery, I changed the DOM manipulation to use it. (better readabilty in my opinion)
map.addListener("clickMapObject", function(event){
$('#tempInfo').html(event.mapObject.infoTitle); // Changes with clicking
});
Here's the new codepen.
I am in the same boat many have been in with D3 trying to get to the next level. I have a graph that is close to what I want but I can't figure out how to animate the change. There are many events and have the different parts placed into different functions. I call them with the following if else if:
if ($("#chart1Pie").is(":checked")) {
updateOne();
} else if ($("#chart2Pie").is(":checked")) {
updateTwo();
};
Do I have it wrong by having the different parts in different functions? The full code is on jsfiddle.
http://jsfiddle.net/rocky1616/ghfqmygh/
You are using D3 absolutely incorrectly. You have ONE graph, but two sets of data - for Smith and for Jones. You don't need to remove stuff inside #chart using jQuery and then rebuild the whole graph from the scratch. In general, if you want to remove and add elements you should use D3 methods .enter() and .exit().
In your case you don't need to remove anything. All you need to do on update is recalculate attribute "d" for of your paths.
Check these examples: one, two.
I was trying to follow this question but it's not quite working for me
Load src content to SVG image dynamically
I created some code on jsfiddle http://jsfiddle.net/sLXCr/
Basically, I am trying (but neither seem to work)...is it a selector issue?
$('.graphlink').attr('xlink:href', "#");
document.querySelector('.graphlink').setAttributeNS('http://www.w3.org/1999/xlink', 'href', "#");
This is the minimized version of my code and I am trying to select all of the class="graphlink" as I want to change all the a href stuff to # and then I also after that want to register an onclick handler to all of those a ref that pops up the same modal for all of them(the modal is static information is all).
hmmmmm, I should mention I am using D3 and maybe there is a way to do it with that in that I want to add a class style but I have optional code that runs on some pages and not others to change all the href...maybe that is possible with D3 code instead?
My latest try with D3 didn't work :(
var refs = d3.selectAll('a');
refs.attr("xlink:href", function(d) { return "#"; });
I do see the above grabbing 24 a links but it's grabbing links I don't want but 'a.graphlink' seem to select nothing :(
thanks,
Dean
grrrr, it had nothing to do with that code and everything to do with not posting the whole set of code(which had too much in it I thought)....turns out my code was not in the callback method so it was run toooo soon.
I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..
What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>
You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.
Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.
As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.
For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage