Develop Reference

D3.js not showing labels on first SVG after second SVG created

Example: https://codepen.io/anon/pen/YedQog
If I comment out the line donut2.create(petData()); to only create one chart, it works fine. However, when that line is left in and I use the logic to create two distinct pie charts, the labels disappear for the first chart. I'm at a bit of a loss as to why.
Any help appreciated.
$(function() {
var donut1 = new DonutCharts('#money');
donut1.create(moneyData());
var donut2 = new DonutCharts('#pets');
// donut2.create(petData());
});

Instead of
var donuts = d3.selectAll('.donut');
do
var donuts = charts.selectAll('.donut');
Reason:
d3.selectAll('.donut');
will select the previous created chart and so the problem, that is the reason why the last graph text comes.
working code here

Chart.js ungroup data in tooltip with multiple lines

I'm looking for an answer similar to a previous question:
Link: chart js tooltip how to control the data that show
But I need a solution for a Line Chart via Chart.js. I'm wanting a line chart with multiple lines and I would like each point to return only the data for that point in the tooltip. By default the tooltip returns data in a group for each point at the index you hover over. So I would want each point to only return it's data and have it's own tooltip box.
See default example of line chart : http://www.chartjs.org/docs/#line-chart
It would also be nice if I could have all the tooltips displayed by default and not triggered by a mouse hover.

Update second chart on mouseover

I'm trying to replicate the trulia's graph with D3.js, but only the main chart (the heatmap) and the daily graph (the graph bar that changes when you hover the mouse over a specific point on the main chart).
Using this example, I've managed to build the main chart with my own data. I also have the second chart. But now I have no clue on how to update this second chart when I hover on a point on main chart.

Essentially, what you're going to have is two different charts with different data. The first chart (the heatmap) controls the other one. Each data point on the heatmap has a day and an hour attribute, which we want to use to control the second graph. To do this, we can use two functions to control the second graph, and then call both of them every time someone clicks on a point.
The first function just needs to build a blank graph for the target day.
function updateGraphDay(newDay){
//Remove current graph and build graph for newDay
}
The second is one that will highlight a certain hour on the bar chart. I'm assuming here that your bar chart is in its own SVG, barGraphSVG, and all of the bars have the class hourBar, and that the data you used to create it has an hour attribute, like the heat map data.
function updateGraphHour(newHour){
barGraphSVG.selectAll('.hourBar')
.classed('selectedBar', function(d){ return d.hour === newHour });
}
Now you just call both of these when you hover on one of the rect elements in the bar chart.
heatMap.on('hover', function(d){
updateGraphDay(d.day);
updateGraphHour(d.hour);
});

hightcharts mouse tracking color

I am using Highcharts to render a line chart (http://www.highcharts.com/demo/line-basic).
Every line in my chart has the same color and different markers on the end. Now what I want is when I hover over a line to change it's color.

you can find mouse events in plotOptions there you can manipulate the colors
this.chart.series[index].update({color:'color'});
this piece of code will be helpful.
here is a working example http://jsfiddle.net/vytEE/
hope this will help you

Trigger legend click event in nvd3 using jquery?

I'm using nvd3 for a multi-bar chart, and I'd like to make the chart redraw when the user clicks the other html on my page. I tried using jQuery to select the "Stream0" legend circle on the nvd3 homepage (http://nvd3.org/) and click it using this snippet in the console:
$($('g.nv-series')[0]).click()
For reasons that I hope will be immediately obvious to people more knowledgeable about javascript, nothing happens. Is it something to do with event delegation?
http://nvd3.org/

you can try this:
chart.legend.dispatch.legendClick = function(d, i){
//redraw
};
It will append your own method to the legend; it works for pie chart not sure if works for the line chart;

Maybe there is some help in this. Two charts, one pie, one stack but only showing legends on pie.
The data is not identical but the legends are..
Want to update both on clicking pie legends.
chart.legend.dispatch.on('stateChange.pie', function(d,i){
setTimeout(function() {
stackedAreaChart.dispatch.changeState(d,i);
stackedAreaChart.update();
}, 100);
});
Note: using the ".pie" will extend the (library) stateChange event (not overwrite it)
The other chart stackedAreaChart has to be in the scope.
Note there is a changeState event and a stateChange, best is to look at the un-minified nvd3 js file..