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.
Related
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"))
});
I have a an AmChart, JavaScript chart, column chart with scroll.
I'd like to be able to pull the category axis data for the min and the max values that are currently being displayed in the chart.
Example:
If I have 0-10 on the x-axis and I zoom to 4-6, I want to be able to reference the data on point 4 and point 6.
I am new to AmCharts so hopefully I am just missing something simple but I can't seem to figure this out.
Here is a link to a chart I made:
https://live.amcharts.com/U4YmV/
You can use the zoomed event to capture the startIndex and endIndex from its event object.
In the example below, zoomedData is the zoom selection.
chart.addListener("zoomed", zoomed);
function zoomed (e) {
var chart = e.chart,
data = chart.dataProvider,
zoomedData = data.slice(e.startIndex, e.endIndex + 1);
}
Please check the example here: https://codepen.io/team/amcharts/pen/246e8f826610e848b7389fb85657348a
I am using NVD3 chart library to display charts in my application.I used to show many chart types say line,bar,pie,scatter,etc..
Till now ,i used to show only integer/float values at x-axis of line/bar chart chart..Its working well.(Sample data : (x-10, y-50),(x-20, y-100))
But the problem is,when am trying to display the line chart with some string value at x-axis,the nvd3 chart doesn't display anything..Dont know where am going wrong?
(sample data : (x-sun,y-50),(x-mon,y-75),(x-tue,y-100))
Need help.Thanks in advance
Try this, it works for me:
select all the svg element that corresponds to text. container is a variable referring a string for selection of text;
d3.selectAll(container + ' .nv-x .tick text').text(function(d){return d;})
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');
});