I don't want a whole chart library for this. All I want is to animate 1 rectangular box from 0 to a set value, like a linear guage, but without the need for labels or array of values. Whats the cleanest way to do this, using raphael. The guage container should have background color set.
square.animate({height: scale}, 1000, 'bounce');
Related
I'm trying to create a nested pie / donut chart, where the inner ring displays a 'group' (e.g. a car manufacturer) and the outer ring displays a breakdown for that 'group' (e.g. the models made by each manufacturer).
I need the individual segments to be exploded / sliced so that it looks like this:
http://imgur.com/TBtySVa
I have managed to get this working using the sliced and slicedOffset properties (the image above is actually a screenshot of my chart), however this creates strange effects (see the fiddle) when there are fewer 'groups'.
I have put together a fiddle to demonstrate how the chart looks odd when there are fewer groups in the inner ring. It looks really bad when there are only one or two items in the inner ring:
http://jsfiddle.net/danielcrisp/784jzLe2/
I would like to know if there is a better way of achieving the result I require? Probably sliced is not the right way to go as it isn't its intended use. How else can I get a gap between items?
Note: the chart will be displayed over a photo so I can't use borders to create the effect.
Update: It's ok if the spacing between segments is regular, e.g. 10px, unlike the irregular spacing shown in the first screenshot.
Transparent borders should be the perfect solution but they don't mask the segment fill colour unfortunately.
Thank you!
You can add some dummy data points that will be transparent. This solution will need some calculations for good visual results.
jsFiddle: http://jsfiddle.net/25acys4j/4/
Example of transparent slice:
{x: 0,
y: 3,
color: 'rgba(0,0,0,0)'
},
Try to adapt donut chart, and border like this: http://jsfiddle.net/25acys4j/. The border can get a transparent color, when you define it as rgba();
I'm currently working on this using x3dom: http://folk.ntnu.no/emilh/modell.htm , and I have two problems.
First one is that when I load my model, it appears in a awkward position, I'd like to automaticly flip it and zoom so that you see it from a better side. Currently I have no idea how to do this.
Secondly I'm trying to make a button that toggles the visibility on the outer shell of the model, I've identified the shapes that builds up the shell, but I don't know how to toggle their visibility. So if I have the ...., what can I do to it to make it hidden?
Sorry for mixing Norwegian and English on the site :P
And thanks in advance!
There are two ways of dealing with the zoom level.
Change the scale attribute of your transform, making the shape bigger.
Add a viewpoint node, like so
<viewpoint id="view_id" position='0 10 15' orientation='-1 0 0 0.5'></viewpoint>
The position and orientation values will depend on your scene.
It is asked long time ago but for people who have same problem the solution is like following:
You can use
<vievpoint position="0 0 250">
to change default zoom of your object. first and second parameters for x y coordinates and third one for zoom. If you want to zoom out you can use positive values, to zoom in you can use negative values.
Whole code is like this:
<x3d width='500px' height='400px'>
<scene>
<viewpoint position="0 0 250"></viewpoint>
<tramsform>
<inline url="path">
</transform>
</scene>
</x3d>
For the visibility you can use the transparency attribute on the material tag. http://doc.x3dom.org/author/Shape/Material.html
The shape is still there but you can modify the transparency of it.
So I have a ColumnChart and one of the built-in functionality is that you can hover over an item (so called category) in the legend of the chart and you get some highlight-border around the corresponding columns in the chart.
Now I have many columns and categories in my chart and a highlighted series/category is very hard to see, because the default behavior just shows a 1px gray border around the columns. My columns are only a few pixels width and I still need to differentiate 10 different categories (=colors). So picking only very light colors (where the border would be easy to spot) is no option. I've found no way of changing:
The style of the highlight-border (primarily the color) or
The color of the columns (fill color) when their respective category is selected in the legend.
Is there some property I can pass to the draw() call of my chart to change the highlighting? Do I have to manually override some events/methods?
Help is highly appreciated!
In the past I used some CSS hacks to change some properties of the generated SVG (path, rect, etc...)
you can play around with advanced selectors and maybe you'll be able to achieve you what you want.
I created a very quick and buggy example, but maybe it will point you on the right direction.
For example:
div.google_chart svg g g g g rect {
stroke-width:0px; fill:red;
}
Hope it helps.
I have a dynamically generated graph that illustrates the range of items that will fit within a container, relative to the item's width and thickness. I'm trying to show that the items near the edge of the "fit range" might not be as good of a fit as those closer to the middle of the graph. To do this I'd like to fill my shape with green, which has a gradient that turns to yellow around the edges. This yellow area should be of uniform thickness around the entire inside edge, as illustrated in the image below. How might I accomplish this with Raphael? I know how to do a solid fill; the gradient is where I'm having difficulty. Thanks in advance for your help!
In theory it should be possible to do this by slicing the graph into four triangles.
Each triangle can then be filled with a gradient that is mostly your solid color but at one end it turns into your edge color. By setting the right angle on the gradient you can make it look like only the edges on the graph have a different color.
I've created the rectangle above using the following code.
var slice1 = paper.path("M200 200L100 100L300 100").attr({
"fill": "90-#0f0:70-#ff0:95",
});
var slice2 = paper.path("M200 200L300 100L300 300").attr({
"fill": "0-#0f0:70-#ff0:95",
});
var slice3 = paper.path("M200 200L300 300L100 300").attr({
"fill": "270-#0f0:70-#ff0:95",
});
var slice4 = paper.path("M200 200L100 300L100 100").attr({
"fill": "180-#0f0:70-#ff0:95",
});
Your case will be a bit more complex though. You will have to first find the middle of the graph to be able to slice it into triangles. Then you need to find the angle for each of the gradients.
Evening,
It's not as easy as it looks like it should be. Probably due to an issue with how to implement it in VML.
The best I was able to do is to use a slightly larger clone of your target object behind the original, and then use a gradient fill on it.
I've made an example in this fiddle
Hope that helps.
You could use a radial gradient on an overllying ellipse but that will leave a rather large corner of yellow
To find the centre of your object use good old getBBox()
when working with the jquery library flot (like this), you might want increase precision when hovering over he dots, so my question is if there is any way of making this area of whitin a dot is hovarable bigger?
Use the radius property of the series hash you pass to the $.plot function to set the radius of the clickable data point on the chart. So instead of this as it is now:
points: { show: true }
change it to, say, this:
points: { show: true, radius: 6 }
The measurement is in pixels and the default radius is 3 pixels. Personally speaking I wouldn't go much above that if the data points are close together like in the example chart: you run into the opposite problem where all the points overlap and run into each other.