I've been using gRaphaël charts for a few weeks now, and every now and then I get some weird issues. A recurring theme is that the pie chart legend labels all get squish together in the wrong places. Picture > words:
The chart is created as you would expect, in this case:
var r = Raphael(domNode, 300, 120);
this.chart = r.piechart(55, 55, 50, [75, 25],
{
colors: [
"000-#d00-#900",
"000-#3a3-#070"
],
legend: ["Building", "Tertiary Education"],
legendpos: "east"
});
I then do some more basic styling, but turning that off doesn't help. The problem is clearly visible in the <svg> node (the text and circle nodes share overlapping positions), but I don't know where it comes from or why, and it only happens sometimes; other charts work just fine. There's nothing on the forums or issue tracker either, though I just realised I should probably ask there instead/as well.
Using Raphaël 2.1.0 and g.Raphael 0.51.
I have found the following blog post which deals with this exact problem. If the pie chart is rendered in an initially hidden element, gRaphael has problems to compute the positions properly resulting in this stacked legend:
So the solution is to render the facebox partial first, after the
facebox is shown, then you execute the Raphael Javascript. In other
word, make sure you generate the chart when the chart container is
there and not hidden!
I have solved this by moving the create pie chart function from the jQuery document ready directive to the on click event that will make the hidden elements visible.
Try to define your legend as following
{ legend: ["Building", "Tertiary Education"] , legendpos: "east"}
Its the only difference taht I could find between your and my working jsfiddle
Related
I am facing a strange problem with Highmaps. I have a geojson map that Highmaps shows properly. Mouseover works and tooltips appear in the correct places. However, when I turn on data labels, they appear upside down. That is, a label that should appear near the bottom of the map (centered on its province) now appears near the top, and vice-versa. The data labels' coordinate system seems to be reversed.
In the image, the label "603863" should appear over the bottom-most province, while "1966085" should appear over the topmost province.
A sample of my geojson data:
var provincePolygons = {
"type":"FeatureCollection",
"features":[
{"type":"Feature",
"properties":{
"id":"05","name":"Tete"},
"geometry":{"type":"Polygon",
"coordinates":[[
[32.636,-14.204],
[33.245,-13.998],
[33.299,-14.032],
[33.300,-14.146],
[33.385,-14.237],
[33.478,-14.404],
[33.544,-14.434],
[33.627,-14.528],
[33.640,-14.594],
[33.718,-14.572],
...
Things I have tried:
The data labels are SVG elements. I thought that maybe surrounding CSS rules might be affecting their position, but since the other CSS elements, using similar transformations, are in the correct locations, that doesn't seem to be the problem.
The longitudes are negative values. I experimented with making them positive by adding +100 to each value, just to see if the negative values were to blame, but they were not. It was a long shot.
I've played, naturally, with the API settings for data labels, but there does not seem to be a switch that affects their top-to-bottom placement. I would also think that leaving the default values untouched should result in correct placement.
I have wondered how data labels' location is calculated by Highmaps. Perhaps Highmaps cannot find the center of each polygon and needs a hint? I added latitude and longitude values to the feature in the geojson, but that did not help. I've also used Highmaps before in a similar situation without needing to add such data.
There is a group called "highcharts-data-labels" in the generated SVG. I am considering trying the flip its coordinate system upside-down somehow to move the data labels to their correct position, but that would a complex intervention for something that should work correctly.
Please note that I am using ng-highcharts.
What am I doing wrong?
For anyone else running into this problem, I was able to solve this by adding the property 'chartType' to my config object. The docs for the highcharts-ng library mention this for making a highstock chart, but don't say anything about it for highmaps. The lib defaults to 'chart', but you need to put chartType: 'map', and it should fix the problem :)
Here's the relevant code from the highcharts-ng libary, where config is your chart Object:
var chartTypeMap = {
'stock': 'StockChart',
'map': 'Map',
'chart': 'Chart'
};
function getChartType(config) {
if (config === undefined || config.chartType === undefined) return 'Chart';
return chartTypeMap[('' + config.chartType).toLowerCase()];
}
Hope this helps!
I am trying to build a doughnut chart with Chart.js and added a text in the middle blank area. Unfortunately, when I drag my mouse over the graph, the text disappears. I found that, if I make the showTooltips: false in the options part, the text would become permanent, but I lose the labels this time.
Q1: Does anyone know how to make text permanent without losing the labels?
Q2: Does ChartNew working fine with Chrome? I heard that there are some problems with the latest chrome and opera versions.
Thank you :)
Q1: Does anyone know how to make text permanent without losing the labels?
Just extend the doughnut chart to (always) draw your middle text after the chart draw is complete. Something like
Chart.types.Doughnut.extend({
name: "DoughnutAlt",
draw: function(){
Chart.types.Doughnut.prototype.draw.apply(this, arguments);
this.chart.ctx.font = Chart.helpers.fontString(14, "normal", "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif");
this.chart.ctx.fillStyle = "Black";
this.chart.ctx.textAlign = "center";
this.chart.ctx.textBaseline = "middle";
this.chart.ctx.fillText("Hello World!", this.chart.width / 2, this.chart.height / 2);
}
});
Fiddle - http://jsfiddle.net/upbcbyfb/
Q2: Does ChartNew working fine with Chrome? I heard that there are
some problems with the latest chrome and opera versions.
A cursory (titles only :-)) glance of the GitHub issue list (https://github.com/nnnick/Chart.js/issues?utf8=%E2%9C%93&q=milestone%3Av2.0+) does not show anything specific to Chrome or Opera.
If there is something specific you want to try out, you can always fiddle your code into the latest (awesomely customizable) version (you have to make a few changes though)
Here is a fiddle to get you started - http://jsfiddle.net/beehe4eg/
That said, the current v2.0.0 (alpha 3) is a pre-release version (see
https://github.com/nnnick/Chart.js/releases), so you probably don't want to switch your production code to this right now.
I have a pie chart svg image, which I get it from server. And my job is to apply animation to this pie chart on client side using snap svg.
Now, the problem is I am new to SVG and I don't know where to start, but I have succeed in animating other chart types.
Can anybody help me with some referral links to solve this problem. I got this link which implements this. But they have not explained how they have achieved this.
Any other kind of animation which can be achieved by snap svg for pie chart can also help me.
edit I have added fiddle of pie chart that I want to animate. I have tried this code:
Snap("svg").select("#pie2d").
animate({ transform: 'r360,150,150' }, 1000, mina.linear );
which does not animate each section of pie chart but complete chart as a whole instead.
This line does not get executed in fiddle as it needs Snap.js
Any help is appreciated.
Thanks in advance.
Snap animations are generally straightforward. Here is a relatively simple example that will introduce some of the elements you may need..load in a file, and animate it once loaded with hover (you must wait until load finish with file imports).
I couldn't put it on a jsfiddle as it needs a remote file, but have it on a test page here with the code below. Also the Snap website getting started page shows loading in svg and animating.
var s = Snap(600,600);
var g = s.group();
var tux = Snap.load("Dreaming_tux.svg", function ( loadedFragment ) {
g.append( loadedFragment );
g.hover( hoverover, hoverout );
} );
var hoverover = function() { g.animate({ transform: 's2r45,150,150' }, 1000, mina.bounce ) };
var hoverout = function() { g.animate({ transform: 's1r0,150,150' }, 1000, mina.bounce ) };
For transforms, they use the Raphael format (same author), which is loosely the following...
t=relative transform, T=absolute transform, s=relative scale, S=absolute Scale
r=relative rotate, R=relative rotate
r
elative means it takes into account previous transforms to accumulate
here it doesn't make much difference, until we combine later
For the specific pie chart, it depends if you already have that in the svg you are pulling from the server, so you may not need to know too much about pie chart creation. If you do, there are some other libraries which support pie charts already (by Raphael, d3.js etc)
I assume you will need to attach a hover element to each segment of the pie chart (you can use something like g.select("segment1")), and scale it up/out, like above.
I have a function that adds an imageOverlay and a semitransparent Rectangle on top of that image (so as to tint the image, and draw a keyline around it).
activeUserImage = new L.imageOverlay(imageUrl, imageBounds).addTo(map);
activeUserTile = new L.rectangle(imageBounds, {stroke: true, color: "#ffffff", opacity:1, weight: 1, fillColor: "#003572", fillOpacity: 0.7, clickable:true}).addTo(map);
this works great, but then I want to remove the image and rectangle with:
map.removeLayer(activeUserImage);
map.removeLayer(activeUserTile);
This seems to work well...
However when I try and add a second Image & Rectangle (using the same function) the rectangle SVG is being rendered underneath the image, so I don't see the colored overlay.
This seems to be because the element is being left behind from the first creation, and then when the image is being added a second time it appears in front of the SVG.
Q:
Is this a bug? Should the SVG element not be cleared too?
Can I adjust z-index of the image or SVG on creation?
should i be containing to rectangle in a different layer to the images? How?
Many Thanks
OK, so the Leaflet bringToFront() method didn't work, but instead I have used a bit of JQuery to force the same approach.
svgObj = $('.leaflet-overlay-pane svg');
svgObj.css('z-index', 9999);
This works, but still feels like a hack... however if (?) there is a bug in LEaflet, then maybe this will have to do???
Any better ideas?
The bringToFront() function alows you to bring layer to the top.
Search it in the docs.
See this fiddle:
http://jsfiddle.net/UfP3C/3/
Each list item contains an SVG element.
My goal is when the user hovers the list items, the Raphael animation occurs (for its child svg element).
I'm having the following issue:
JQuery.hover works fine when moving the mouse slowly. But, when you
quickly mouse across (and off) both list items (horizontally), the svg elements often get stuck in the "mouseenter" animate position.
I'm trying to figure out how to get the animation to work as expected: When quickly mousing across both list items, the end result is that the svg elements are in the "mouseleave" position.
The above fiddle demonstrates the issue (in FireFox 5 and Chrome 13).
I would recommend using Raphael's native mouseover and mouseout
They rapidly respond to these events
You will also be able to tightly bind the animation with the keyword "this"
See this fiddle for the solution:
http://jsfiddle.net/UfP3C/4/
To prevent the svg animation from freezing in the mouseenter animate postion, set the animate in and out time to be the same value:
list_item.hover(function() {
my_rectangle.animate({
y: 0
}, 400, 'bounce');
},function(){
my_rectangle.animate({
y: 200
}, 400, 'bounce');
});
In the above code, the animate time is 400. Setting both animate times to the same value solves the issue.
See the above fiddle for the full code.
Note that using the Raphael hover function instead of the JQuery hover function (with different animate times) still shows the same issue and has the same solution.