I'm learning D3 in Laravel and trying to use this color picking button:
<input type="color">
...to update the fill of the d3 bar chart at this link:
(https://bl.ocks.org/mbostock/3885304)
I have tried numerous solutions, including working with css objects and the answer here:
(Input type color styling)
I get the whole chart loaded on a page but the color picking button, which can change colors like in the answer on the other linked question, doesn't update the graph's fill. To clarify, I was sure to update "fill" and not "color". I'm new to D3 and js but not html and css. Color can be set by adding a line of the following, for example:
.attr("fill", "green");
... to the end of the code, but I want to see how to change the graph's bar fill by picking a color from the "input type" button.
Add a listener to the input for a change event. On a change, select all the bars, then set the fill to the new color.
d3.select("input")
.on("change", function() {
g.selectAll(".bar")
.style("fill", d3.select(this).property("value"))
});
Related
I'm using d3.scale.threshold() to achieve color change that is correlated with a value, and I'm not sure how to flip colors, so that bar chart that is completely red will be positioned on the bottom of the chart, and bar chart that is mostly green is positioned on the top.
This is my Plunker.
Right now very top bar chart is completely red and positioned at the top. However, I would like it to see it on the bottom.
Any suggestions are appreciated.
This is the sort function you want:
data.sort(function(a, b) {
return d3.descending(b.total, a.total);
});
Here is your updated plunker: https://plnkr.co/edit/uyrf66RA6Qhc3bhOmdwH?p=preview
Currently, i'm developing realtime stackedAreaChart using nvd3.js.
nvd3.js is great, but i have two problem.
Example is following
http://jsfiddle.net/logo1318/1hkxfqhw/
1. First Problem
when i use following code
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%X')(new Date(d)); })
Tooltip shows "Nan:Nan:NaN" like following pic, but i want to show "12:33:33".
2. Second Problem
When i mouse over some position in chart, tooltip shows that position's content.
When chart is moving(updating) , tooltip doesn't show current position's content
But, until i move a mouse, tooltip content is not updating.
How can i update tooltip content like following examples in rickshaw.js?
http://code.shutterstock.com/rickshaw/examples/extensions.html
Thanks.
In a multi line chart I successfully highlight a line when I mouseover, as well as make the corresponding entry in a legend appear bold and larger. I also want to fade the other names in the legend to further increase contrast. How do I make a selection of the names NOT in my selection for the mouseover?
Here is an excerpt of my mouseover event:
.on("mouseover", function (d) {
d3.select(this)
.style("stroke-width",'6px'); // Make the line thicker on mouseover.
var getname = document.getElementById(d.name); // Line name to highlight in legend
// How to get the list of names NOT selected??
//var notsel = ??? (not(getname) ??
d3.selectAll(notsel) // Fade the non-selected names in the legend
.style("opacity",.2);
//This class highlights the selected name by CSS (not shown)
d3.select(getname)
.attr("class", "legend-select"); //Change class to highlight name
D3 uses css3 selectors, so what you're looking for is a negative css selector. Turns out those exist. Negative CSS selectors
Try something like this
d3.selectAll(':not('+getname+')') // Fade the non-selected names in the legend
.style("opacity",.2);
The problem with using labels is that if a slice is too small the labels doesn't shows up and therefore, getting the value of label during onClick event fails
The problem is reproduced here http://plnkr.co/edit/3rCHWnxW7EFPXxWHLo96?p=preview. You will see that for Taxes the label is missing and therefore I can't get its value on click event
what would be awesome?
If I can get the value from tooltip or legend instead of labels because labels are not a good idea to get values
Because I pass the value of label onclick to display other graph
In line 144-145 of your script.js, you can change this:
.on('click', function(){
var parentCategory = this.getElementsByClassName("nv-label")[0].textContent;
to this:
.on('click', function(d){
var parentCategory = d.data.label;
This way, you are passing in the __data__ of the clicked element to the click function, which you can access with d. This should solve your issue. You can also throw a console.log(d) within that function to see all the options available on the __data__ object.
I've a Highstock chart (Line with markers and shadow) and would like to show a highstock tooltip programmatically, i.e. when i select, for example, a row on some table (that contains chart data) i would like to show the corresponding highstock tooltip.
Is that possible?
For StockChart this solution doesn't work:
In this example you have to replace this:
chart.tooltip.refresh(chart.series[0].data[i]);
to this:
chart.tooltip.refresh([chart.series[0].points[i]]);
The solution is available here.
If what you want is to trigger tooltip on the plot near ith data point, then probaly you can use this answer, which suggest to do something like
chart.series[0].data[i].setState('hover');
where chart is the result of your new Highcharts.Chart. (jsfiddle from the comments to that answer).
I guess that if you want to do it on <tr> click, than your js could finally look like this
var chart = new Highcharts.Chart({ <your options> });
$('#yourTableId tr').click(function(){
var i = $(this).index(); // `this` points to <tr>, get its index
chart.series[0].data[i].setState('hover');
});