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');
});
Related
I am trying to recreate this example in Vega-Lite API in an Observable notebook. I am able to recreate the ruler with the multiple line series from another example in Observable. But I am having trouble adding tooltips, I would like to add the symbol ticker and the price of the stock. Here is my Observable notebook. Where would I put the tooltip specifications? Thanks!
plot = {
// select a point for which to provide details-on-demand
const hover = vl.selectSingle()
.encodings('x') // limit selection to x-axis value
.on('mouseover') // select on mouseover events
.nearest(true) // select data point nearest the cursor
.empty('none'); // empty selection includes no data points
// define our base line chart
const line = vl.markLine()
.data(stocks)
.encode(
vl.x().fieldT('date'),
vl.y().fieldQ('price'),
vl.color().fieldN('symbol'),
);
// shared base for new layers, filtered to hover selection
const base = line.transform(vl.filter(hover));
return vl.data(stocks)
.layer(
line,
// add a rule mark to serve as a guide line
vl.markRule({color:'#c0c0c0'})
.transform(
vl.filter(hover),
vl.pivot({pivot: 'symbol', value: 'price', groupby: ['date']}))
.encode(vl.x().fieldT('date'),
vl.tooltip().fieldQ('price')),
// add circle marks for selected time points, hide unselected points
line.markCircle()
.select(hover) // use as anchor points for selection
.encode(vl.opacity().if(hover, vl.value(1)).value(0),
vl.tooltip(['symbol','price']))
)
.render(); }
Here's how you use pivot on that example
vl.pivot('symbol').value('price').groupby( ['date']))
The pivot there helps you getting the data into table format, so you can have all the symbol prices available in one row. Here is a full working example of a Vega-Lite API multi-line series chart with tooltips:
https://observablehq.com/#vega/multi-series-line-chart-with-tooltip
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
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 D3 or NVD3.js line graph, how can I select a particular line once the graph is rendered? For example, suppose I want to animate the stroke width on a line, like this:
d3.selectAll('path').transition().duration(2000).style("stroke-width", "20");
The above will select all paths, obviously, but I would like to select a particular series—for example, the Oranges series in a data set defined like this:
var data = [{key: "Apples", values: array1},{key: "Oranges", values: array2}]
I thought something this might work, but it did not:
d3.select('#chart svg').datum(data[1]).transition... // or alternatively,
d3.select('#chart svg').datum(data[1].values).transition...
I've been trying to figure it out using the Cumulative Line Chart example in the code editor here, with no success: http://nvd3.org/livecode/#codemirrorNav
This is a very basic question, but I'm new to D3 and have been unable to figure it out.
There are couple of simple ways that I can think of:
You can store each path in its own variable (or inside an array):
var path1 = graph.append("g").append("path").data([data1]).attr("class", "line1");
Now you can apply your transitions to just this path variable and it should work.
Another option is to give each path a unique class and then use d3.selectAll(".uniqueclassname") and apply your transitions.
In this fiddle, look at the tick function (specially for the following piece of code).
// redraw the lines
graph.select(".line1").attr("d", line).attr("transform", null);
path2.attr("d", line).attr("transform", null);
path3.attr("d", line).attr("transform", null);
graph.select(".line4").attr("d", line).attr("transform", null);