I was hoping to get some help on Highcharts/Highstock. I created a jsFiddle with my chart so far.
https://jsfiddle.net/Wolfs_Brain/qhgxd813/1/
Here is what I am trying to do:
I would like the Tooltip to show up initially without ruining responsiveness.
I have commented out the last two functions to point out the ones that seem to be causing the issue. If you uncomment these two:
function(chart){
// Last point in graph...
showLastPointTooltip(chart);
chart.series[0].data[i].setState('select');
}
function showLastPointTooltip(objHighStockchart){
//show tooltip for last point
var points=[];
if(objHighStockchart)
{
for(var i=0;i<objHighStockchart.series.length;i++)
points.push(objHighStockchart.series[i].points[objHighStockchart.series[i].points.length-1]);
objHighStockchart.tooltip.refresh(points);
}
};
the graph will function how i'd like but it is no longer responsive.
If you need any other information from my part please let me know.
Thanks in advance.
Related
I'm using highchart and I have some annotation on it, but all annotation is load first,
I decreased the series animation duration to 10000, The question is how can I show one by one annotations on the chart?
I mean I want to show first annotation on series then disappear the first and show the second and so on.
show this image that I found on the internet:
I will appreciate sharing your data with me,
Thanks in advance
I prepared a demo which shows how to keep tooltip shown for the last point.
Demo: https://jsfiddle.net/BlackLabel/vL7k1yce/
render() {
let chart = this,
points = chart.series[0].points;
chart.tooltip.refresh(points[points.length - 1]);
}
Is that what you wanted to achieve?
API: https://api.highcharts.com/highcharts/chart.events.render
API: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
have found that the tooltip between column and arearange charts is different. I would also like to see the tooltip to the side of the mousepointer - PIC 1. And not centered in the middle - PIC 2. How can I do that? I did not find anything in the API reference.
Thank you for your help and best regards,
Chris
** UPDATE **
Have a look: The "blue" tooltip (1st pic) is what I want for the 2nd pic below. Can anybody help me?
The difference results from the fact that a tooltip is related with points. In the first example there is used only one series - arearange. On the other hand, in the second example there is a chart with two series - line and arearange.
In that case with enabled tooltip.shared configuration, a tooltip shows every point with the same x value.
API Reference: https://api.highcharts.com/highcharts/tooltip.shared
PROLOGUE
This is my first time posting to stackoverflow and i'm a noob with dc.js. Apologies in advance for etiquette transgressions (feedback welcome on this too)
PROBLEM
I have defined a barchart and it displays perfectly, but brushOn(true) is not letting me filter the data. In the past, this seemed to work perfectly with a crosshair appearing as soon as i hovered over the bargraph. Now it is not. Any idea why?! or what i can do to fix it? I'm on day 3 of trying to figure out what is happening. The help is MUCH appreciated!
PREREQS:
https://d3js.org/d3.v5.min.js
crossfilter.min.js
https://unpkg.com/dc#3.0.4/dc.js
CODE FOR BARCHART
I have defined a barchart as follows:
filterDim = cross.dimension(function(d){return d3.timeWeek(d.date);});
var filterGroup = filterDim.group().reduceSum(function(d){
if(d.isTrue){return 1;}
else {return 0;} });
height=400;
if(width == 0){
width = $(dom_id).parent().innerWidth();
}
var hitsbarChart = dc.barChart(dom_id);
hitsbarChart
.width(width).height(height)
.dimension(sentDimension)
.group(allGroups[0].data,allGroups[0].name)
.xUnits(d3.timeWeeks);
hitsbarChart
.x(d3.scaleTime())
.valueAccessor(function(d){return d.value;})
.keyAccessor(function(d){return d.key;})
.round(d3.timeWeek.round)
.yAxis().ticks(d3.format('.3s'));
function calc_domain(chart) {
var min = d3.min(chart.group().all(), function(kv) { return kv.key; }),
max = d3.max(chart.group().all(), function(kv) { return kv.key; });
max = d3.timeMonth.offset(max, 1);
chart.x().domain([min, max]);
}
hitsbarChart.on('preRender', calc_domain);
hitsbarChart.on('preRedraw', calc_domain);
hitsbarChart.brushOn(true);
dc.renderAll();
RESEARCH
I found this example which demonstrates something different but outputs a graph with time-series as the x-axis and working brush to select a range of dates.
Also, there this bug with work-around but the work around did not work. I can't imagine that time-series data works more like an ordinal scale than a numerical scale.
It's likely that you have some CSS inadvertently affecting your chart when it was supposed to be control some other part of the page.
This could happen either because you used a generic name which is also used by dc.js or d3.js, or because a style sheet from another library does. All of dc.js's style rules are carefully scoped so that they shouldn't affect anyone else, but many common words are used for class names, so interference the other way is common.
The brushing behavior comes from d3, so I'd try looking at d3's g.brush rect.overlay in the inspector of your developer tools. You should be able to bring it up by right-clicking the background of the chart and selecting Inspect.
If it has something like
pointer-events: none;
or
display: none;
applied to it, find out what applied that (hopefully CSS you control) and try to make the rules more specific.
Of course it's also possible for JavaScript from another library to cause such troubles, but interference from CSS is much more common.
Please have a look at this JSFIDDLE. I'm trying to follow a tutorial to create a very basic scatter chart in NVD3.js, but to no avail.
function createBasicChart1(){
var chart;
nv.addGraph(function(){
//Create chart
chart = nv.models.scatterChart()
.showLegend(false) // Remove legend (will put it back later)
.showDistX(true) // Show X axis
.showDistY(true) // Show Y axis
.useVoronoi(false) // For now, disable hovering on points
.color(d3.scale.category10().range()) // Colormap
.duration(500); // Fade in duration
// Generate toy data
data = [{key: "", values:[{x:0,y:0},{x:1,y:1}, {x:3, y:3}, {x:3, y:10}]}];
//Add chart to page
d3.select("#basicChart1").datum(data).call(chart)
// Register chart with window resize event
nv.utils.windowResize(chart.update);
return chart
});
}
Could you please tell what I'm missing here? I've added all the resources like the tutorial says.
There is one mistake from you and one mistake from the tutorial's author.
Your mistake is that the ID of the SVG is basicChart1, not basicChart. Actually, it is on the tutorial:
When you write the javascript code, make sure to change the d3 selector id to a one that will match with the template.
The author's mistake is a little bit more strange: in his tutorial, the author never calls createBasicChart1. But, of course, unless it is an IIFE, you have to call it:
createBasicChart1()
Here is your updated fiddle: https://jsfiddle.net/5eydu463/
http://jsfiddle.net/39UXK/4/
in this example I want to see the tooltips of the piechart when I hover on the respected buttons.
Can anyone please help me here?
You need to find the point in question, select it, and refresh the tooltip:
// find the point
var point = chart.series[0].points[i];
// select the point
point.select();
// refresh the tooltip
chart.tooltip.refresh(point);