I'm using the flot library
How do I get the correct tooltips if I scale the chart with this css rule: transform: scale(0.7);
flot source uses the function findNearbyItem to find hovered items.
[FIDDLE] that demonstrates both cases - scale(1), and scale(.7)
taking your fiddle as source of the question, there is actually several problems to take care of:
the tooltip doesn't work correctly, if you hover over the tooltip, it disappears (starts flickering). Check the updated fiddle, which now hides the tooltip if you move away from the bar and stays if you hover over the tooltip itself.
scaling issue: just scale the canvas wrapper.
<div id="placeholder2" style="width:420px;height:210px;margin-top:40px;"></div>
scales the canvas to the same size like the css transform
<div id="placeholder2" style="transform:scale(.7)"></div>
but maintains the correct bar values and shows the tooltip in the correct position.
Related
I need to build an UI (HTML 5) with two main components: customized chart drawn in HTML 5 canvas; a table.
The gotcha is that the chart must be aligned with the table. If you horizontally scroll the table, the chart content will scroll too.
One important restriction is that the chart is very customized. I will not be able to use any existing chart component. I will have to code it myself plotting it on canvas.
I am struggling to figure out how to do it. How to trigger a repaint on the canvas during the scroll? How to know the corresponding coordinates on the canvas of the beginning of each table cell? How do I write the HTML/CSS of both components to ensure that the layout will not break on different screen sizes?
I am still planning the project and I am pretty open to use any framework/language.
I need some light here.
Can you help?
Thanks!
You can get the scroll position with jQuery scrollLeft() and set your canvas repaint function to jquery scroll() so that it's updated whenever the scroll position changes.
table = $('#container')
updatePosition = () => {
// Synchronize canvas here:
repaintCanvas(table.scrollLeft());
}
table.scroll(updatePosition);
Here is a demo JSFiddle: http://jsfiddle.net/4eg39bfm/5/
I'm using highcharts to create a simple heatmap, but now I want to use custom border colors on the cells to represent another dimension in my data set. I am able to accomplish this with the borderColor config option on the data points, but the border of each cell gets drawn partly on top of the border of the preceding cells, so it looks sort of goofy.
Is there a way to specify a margin for the border so that my border gets drawn completely inside the boundary of the cell, so that there is no overlapping of borders? Or is there a way to custom-draw my own border through some event?
You can see this effect in the fiddle at http://jsfiddle.net/8ft7e923/1/ and in the image below. Note how the orange border is drawn over the green and the red is drawn over the orange. This overlapping is what I am trying to eliminate.
It is possible to add pixel padding for a heatmap series and set borderWidth to double of set padding.
Example: http://jsfiddle.net/jk9hp3y9/2/
Example based on your demo: http://jsfiddle.net/8ft7e923/2/
As Halvor mentioned - it is not yet possible to set border for SVG elements to be placed inside of element.
Another way could be to extend Highcharts (similar as in provided demos) to change size of cells with border set to make them fit in same place as the ones without border. More about extending Highcharts in Docs.
I am trying to build an extended doughnut in chartjs. I want to display the highest value as percent and its label in the middle. It works fine on load but breaks after an hover event. One a tooltip is being displayed something breaks the first draw event and move the text on the left and i can't figure how to solve this. I made a fiddle to describe this issue :
http://fiddle.jshell.net/3be5zb0v/
Any ideas on how to fix this ?
Working fiddle - http://fiddle.jshell.net/3be5zb0v/1/
Just add this before your fillText
thechart.textAlign = 'start';
Aim:
I have a website with some content and svg scheme in the middle of it. When one points to the elements of the scheme, tooltips should appear next to the mouse cursor.
Problems: Based on examples like this (which was shown by Julian Berger in How to get the position of SVG element), I made working SVG. Unfortunately it is working only as long as the SVG scheme is not included into the website. Content other then SVG make evt.clientX and Y coordinates system to fail --> the tooltip starts to appear in some distance from the cursor (it seems that the more of other then SVG content I have, the further tooltip is moved away from cursor). The simple example is shown here, simply by adding couple of <br/> before the actual SVG begins.
And my question:
Do you have some ideas how to fix the position of the tooltip, so that it would appear always next to the moving cursor?
All the best,
Wojtek
All you have to do is alter mousemove handler a little. It should position the tooltip relative to the top left of the SVG, rather than the page. You do that by subtracting the position of the SVG, which we get by surrounding the SVG with a <div> element and accessing its offsetLeft and offsetTop properties.
<div id="mysvg">
<svg>...</svg>
</div>
function ShowTooltip(evt, mouseovertext) {
svg = document.getElementById("mysvg");
tooltip.setAttributeNS(null,"x",evt.clientX+11 - svg.offsetLeft);
tooltip.setAttributeNS(null,"y",evt.clientY+27 - svg.offsetTop);
...
}
Full demo here
The ultimate goal of my project is to make my image of circle chart interactive on mouseovers. I want the pieces of the circle to change opacity to .5 (from 1) when the user hovers them. I have an image of the chart but I'm not sure how to make areas of one single image change opacity on hover. I have tried several things:
I image mapped the chart with each piece in its own map, but I wasn't sure how to change opacity of an area of one single image (css)(if its even possible)
My second approach was that i sliced the chart up into individual pieces and made their opacity .5 and saved them all separately. Then, I image mapped the single image of the chart and tried to load the individual piece on hover (css)
My final approach was saving each piece of the chart as individual images and when the image is hovered, change the opacity to .5 with css. This works perfectly except i am not sure how to position the pieces to form a perfect circle in dreamweaver.
Any direction or advise is greatly appreciated. I am willing to learn javascript or jquery to help get this done.
Thank you
EDIT Image of the chart is now attached
http://i.stack.imgur.com/KwIfY.jpg
I'm not sure if I understood the question right regarding the current answers but if you want to make the parts of the chart interactive I have 2 approaches:
To achieve the effect with pure CSS I guess you need to divide the chart in individual images as you already mentioned. The positioning is quite simple. I've used in my demo below one image an let it rotate. In your case you can cut each part of the chart individually and get the right place for them with absolute positionig.
Again as you already mentioned you can use map area to define the parts of the chart. With a plugin like this: ImageMapster you can achieve what you want. I've used this once for the following map. It's again very simple, when hovering any part of the map it's background will be replaced by another background. In your case you could save the chart with full opacity and display on hover an image of the chart with 50% opacity.
Demo
The Demo is not very clean as I didn't spent much time in position the parts perfectly but you can see how it works.
transform: rotate(45deg);
I don't know if CSS3 transition will fit to you:
http://www.w3schools.com/css/css3_transitions.asp
.chart-item { opacity: 0.5; transition:opacity 2s; }
.chart-item:hover { opacity: 1; }
Check documentation for browser support.
Maybe create a div and put each image as the background or content of one div (in order), then create a listener for the div class to change opacity upon mouseenter or mouseleave using jQuery.
Here's a simple example (pardon any mistakes):
jQuery:
$( ".somedivclass" )
.mouseenter(function() {
$(this).fadeTo(200, 0.5);
})
.mouseleave(function() {
$(this).fadeTo(200, 1);
});
Here's more info on $.mouseenter(). Here's some for $.fadeTo().
Check this demo. Hover your cursor exactly on the eyes of the owl, and you will see the opacity changing. It will not change if you hover on the rest of the image.
http://jsfiddle.net/q6d57/14/
$('.eye1').on('mouseenter mouseleave', function(e) {
$('.box2').stop(true, false).fadeToggle(1500)
});
I suggest using svg. Here is an implementation of exactly what you are trying to do, because I felt like learning d3.js today:
http://jsfiddle.net/6m26k/1/
You don't need to make the chart through code though, because you can just load the svg onto the page with html5 and use css similar to mine:
.arc.filled:hover {
opacity: .8;
cursor: pointer;
}