I'd like to draw a line chart with gRaphael, like the one in the lower right corner: http://g.raphaeljs.com/linechart.html
Now I'd like to change the color of the axis, but I could not find any example how to do that. Here are some examples of how to manipulate the chart, but not how to change the axis color.
Does anyone of you know how to do that?
Thanks in advance,
enne
In part from here, the following Javascript will change the fill color for your axes:
$.each(chart.axis[0].text.items, function(i, label) {
label.attr({'fill': '#D6D6D6'});
});
$.each(chart.axis[1].text.items, function(i, label) {
label.attr({'fill': '#D6D6D6'});
});
Enjoy!
After a long time of research I couldn't find a possibility to change the axis-colour. I decided to generate my own diagram with rapahel, which is easier than I thought.
Fortunately, the documentation of raphael is good enough to create a diagram in an adequate period of time.
Related
I would like to know if it's possible to change the power bi automatic feature when you click on a portion of a donut or pie diagram, and it automatically shows proportionally those portion on the others diagram by showing two shade, one darker and one clearer, of the same color. What I would like to change is the shape of the darker highlighted color, in the donut diagram like shown in the first pictures i would like to have a portion of the donut, but not radial like now, but a slice. Same in the pie chart, i would like to have a portion of the pie, not a shorter pie like it is now. Thanks in advance for the help
Great idea! You can present it here
https://ideas.powerbi.com/ideas/
and it will surely be implemented sooner or later.
I'm looking for a solution in which custom text is rendered instead of a point for a scatter or bubble diagram using chart.js. For example, if plotting baseball players' batting average vs slugging percentage, I want the player's name to appear centered horizontally and vertically over the underlying x,y coordinate, such as 'MANTLE' or 'RUTH', instead of the typical dot/square/triangle/bubble pointstyles. I noticed a callback function lets me program custom axis labels, but I need to do something similar for the actual point of the graph.
If this is not possible, can you recommend another library that can do this.
Thank you in advance...
chartjs-plugin-datalabels does what you're looking for. The positioning of the labels is largely customizable. A custom label formatter function for example lets you display text other than the data values.
Please take a look at the chartjs-plugin-datalabels samples, especially at Custom Labels.
Keep in mind that this plugin registers itself globally, meaning that once imported, all charts will display labels. In case you want it enabled only for a few charts, you first need to unregister it globally. Then, you can enabled the plugin for specific charts.
I would like to add a small animation to my markers when I put them on the map.
Just in the moment when I call:
Marker marker = mMap.addMarker(...);
Something like a small bounce or similar during half second or so.
I don't find the way to get the Marker's view.
If I find the way to get the view, I guess it is easy to apply an animation using View.setAnimation() and res/animator/marker_animation.xml
Any help or suggestions?
There is this good video that shows markers animations: https://www.youtube.com/watch?v=WKfZsCKSXVQ
You can't animate the "Marker View" itself because it not accessible
I currently have the following working fiddle
var moveAnim = Raphael.animation({ progress: 1 }, 5000, 'bounce').repeat(Infinity);
I animate a circle along a line.
I also want to make the circle flash at the same time but I can't seem to work out a way to do this?
I thought about adding the circle to a set and applying the additional animation to this but I can't see to get this either!
Any ideas?
This is a hack and I make no attempt to hide it, but it could be made a bit nicer.
There's a couple of problems depending on 'how' you want to animate the flash. The main problem is having 2 simultaneous animation on the same object, as Raphael doesn't do this (to my knowledge). Its easier if you want to animate an alternate attribute than the same one. If you want to animate a scale to indicate a flash, you will need to append the scale transform to the end of the path transform string ('t,s').
Example here, just uses opacity attribute.
Probably the nicest method would be to include something that figures out time running and amends an attribute manually within the animation function (paper.customAttributes.progress). However, that will probably take a bit longer.
Another alternative could be to animate another object off screen, that does all the calculations for you. It feels a bit ugly, but should work.
So earlier we create a dummy object off screen...
var dummy = paper.circle(-100,-100,10).attr({ opacity: 0 });
Within the progress func, you can then set the real circles opacity to be the same as the offscreen one.
this.attr('opacity', dummy.attr('opacity'));
And we get the dummy animation triggering later
dummy.animate(flashingAnim);
jsfiddle
As mentioned, I think there are cleaner ways, but may involve you writing a small linear animation func separately, but this may help if performance isn't an issue and you don't mind extra elements in the dom.
An alternative solution that I came up with is a looping callback. The very sound of a looping callback sounds ugly but I guess thats what an animation is?
It does appear that you can attach multiple animations to an element! Here's a an example
function animateIn() {
flashingCircle.animate({ fill: '#f00' }, 1000, animateOut);
}
function animateOut() {
flashingCircle.animate({ fill: '#fff' }, 1000, animateIn);
}
animateIn();
Does anyone have an idea of how to get a glow to show up on text? I thought it would be pretty easy to do so but nothing is rendering on the fiddle.
Fiddle
Thanks
It looks to me as though Raphael simply does not support text glow. Check out the first lines of the glow function:
if (this.type == "text") {
return null;
}
It might be worth your while to investigate the use of print with a Cufonized font -- it'll return a path representing the text you give it instead of a tspan, and glow can be applied to paths.
Or you could settle for creating a simple drop shadow.
I've staged both of these alternatives by way of demonstration here.
You could create a rectangle behind the text and make that glow. I think that should look just fine. Use getBBox() to find out the size of the rectangle you need.
Something like this: http://jsfiddle.net/7ZPtq/51/
Or maybe use some other primitive, e.g. line.