I did a search and could not find an exact answer and I'm a bit of a newbie with ChartJS.
Right now I've got a chart that draws a vertical line on top of a line using an added plugin to ChartJS. My thought now is that I'm looking to make it so that the tooltip's value displays elsewhere not on the canvas. Pretty much I'm trying to recreate a Robinhood like experience.
I have the line and tracking already created. My only issue is that I want to have some text that displays the tooltip value and changes for each point. The red circle is what I'm looking to simulate for the tooltip. Instead of having it appear at the point, it should be fixed at a location and of course change values depending on the point.
I think I've read somewhere there is a method that can be used for ChartJS called getPointsAtEvent, but I'm not exactly sure how to properly use this, but if someone could help me, I'd be really grateful.
I got it to work out using customToolTips and using the tooltip.dataPoints.length. One issue I had when going through this though was that an error appears in the console when you go out of the canvas area, but doesn't stop anything from working.
I'm not exactly how to fix this one, but if anyone has encountered it, please let me know:
(http://localhost:3000/Chart.js:10917:4)
dashboard:178 Uncaught TypeError: Cannot read property 'style' of null
at ChartElement.customTooltips (dashboard:178)
at ChartElement.update (Chart.js:8660)
at ChartElement.handleEvent (Chart.js:8952)
at Chart.eventHandler (Chart.js:4679)
at listener (Chart.js:4609)
at HTMLCanvasElement.proxies.(anonymous)
Related
Looking to add a custom tooltip that displays on hover of a reference line. But it looks like there is no built in capability for this :(.
Has anyone found a hacky solution for this?
Tried adding a onMouseHover on reference line, grabbing the coords/position in the custom tooltip element and using the onMouseHover on the actual linechart. None of these seemed to work :(.
See: http://jsfiddle.net/j9tx8hL1/
By using the 'null'-values I want to achieve that there are no lines displayed in the graph, for instance no visible line for series4.
var series4 = [[56,null],[65,null],[80,null]];
In JSFiddle, this works.
However, in my browser my application still shows something different.
See: https://www.screencast.com/t/jRr6nlivwF0M
I can't find out what could be the cause of this, both situations should be exactly the same, but apparently are not.
Has anybody here got any advice where to search for a cause?
I have two plugins, one which displays a horizontal line across a chart (example image show below) and one which displays a label inside a donut chart. In both cases when the tooltip is triggered for the base chart, it displays beneath (i.e. lower z-position) the plugin's drawing.
I know I can create a fully customized tooltip which might solve this problem, but wanted to know if there was a configuration I'm not seeing or a simpler solution.
I can post code if necessary, but didn't think it'd be useful.
I believe that you should have posted the code for clarity. Since you are talking about plugins, you have overridden at least one plugin method. One of the methods you have overridden is probably afterDraw. Overriding afterDraw would present the problem you mention, I believe. Try changing afterDraw to afterDatasetsDraw. Look at the docs for the plugin methods that can be overridden. You want the lines to be drawn before the tooltip is drawn, so drawing the lines right after the datasets are drawn seems like a nice solution. Maybe using beforeDatasetsDraw instead would be a nice solution too, depending on whether you would want the bars to be above the lines or not.
I've been working on making a map related visualisation in D3 for a site that for historical reasons is stuck using some old versions of jQuery, and I've come across a weird bug when implementing drag behaviour on the map.
I've extracted the D3 code, and put it onto a gist listed below, and been able to replicate the strange behaviour, which you can trigger by:
Try loading the page below
Clicking on a country
Trying to select some text
I can't seem to select text after I've zoomed into a country, and I suspect it's down to line 130 in the d3_map.js file
The problem gist
The gist is here:
https://gist.github.com/mrchrisadams/89d053977513e6042adf
The rendered gist on http://bl.ocks.org, is here:
http://bl.ocks.org/mrchrisadams/89d053977513e6042adf
On the strange mismatch of javascript libraries
It's strange to see such an old version of jQuery, I know. I'm unable to change it without breaking other functinality on the site, which is why we're stuck with the old library.
Why is this happening, and how do I reinstate normal text selection again?
I'm utterly stumped as to why triggering a zoom knocks out the ability to select text, and I'd welcome any pointers, because I'm somewhat at a loss now.
Oh well, fingers crossed...
I am currently experiencing a problem using the dChart widget addon (wrapper for jqPlot) in Vaadin v7.5.2. Here is a snippet of the code that is giving me a headache:
ComboBox comboBox = new ComboBox();
DCharts chart = new DCharts();
VerticalLayout content = new VerticalLayout();
content.addComponent(comboBox);
content.addComponent(chart);
content.setExpandRatio(chart, 1.0f);
setContent(content);
chart.setDataSeries(dataSeries).setOptions(options).show();
The problem is that when I use setExpandRatio, the chart is overflowing from the container when the page is loaded. Here is a picture to illustrate:
When I use web developer tools to hide the ComboBox and remove the margins, the plot looks OK. So it seems the plot gets drawn before the expand ratio is set, as if it doens't know the ComboBox is there.
However after selecting another item from the ComboBox (which loads another DataSeries), the chart is drawn within the expected boundaries and does not overflow. Also, when not setting an expand ratio or without adding the ComboBox, everything works as it should.
Has anyone ever experienced similar issues, or has any idea what I could do to fix this? Any help is of course greatly appreciated!
I know this is not an ideal solution, but I somehow managed to solve my problem by using an AbsoluteLayout, and drawing the plot using top: 40px. After that I add the ComboBox to the layout. That way the plot always gets drawn on the correct position.
Just leaving this here as a temporary solution, so if anyone has a better one please do not hesitate!