I'm looking to make a responsive donought chart with CanvasJS but my client wants a "broken" donought. Like with a piece missing.
Can it be done? If so, how?
Or else, if it cannot be done, could another responsive graph library be recommended that can do this?
Thanks
EDIT:
I managed to "fake" a gap in it my setting one datapoint to transparent. However, it's not "real" as the transparent part is still a part.
See my pen
http://codepen.io/SubZane/pen/sHpey
I don't know about canvasJS, but you can draw a polygon with inner rings in canvas, see the answer here: Polygon with a hole in the middle with HTML5's canvas
You can also do it with SVG which some web mapping libs used for this purpose before the advent of the canvas element.
Related
I'm working on a canvas-based heatmap using a library called simpleheat (https://github.com/mourner/simpleheat). I've got the heatmap effect working, but does anyone here know how I'd be able to achieve a glow affect like the image below? I've tried implementing this effect with Pixi filters, but haven't had any luck so far.
If you do this manually, or point by point based on xy coordinates for a map that you might have, you could just make a canvas overlay for the map and then draw points on the canvas as overlays. I think you can also set the canvas colors as rgba to make them slightly transparent.
(srry i was gonna make this a comment but i dont have enough reputation for that lol)
hope this helps
I'm facing a little problem here.
I need to add text inside the canvas but under X axis of the graph.
In fact if someone would know how to extend the space of the canvas to add stuff under the graph and add text there, it would be perfect.
The image is actually a canvas saved with POST ajax by transmitting base64 representation of the canvas.
Actually the legend is now inside the canvas and is not HTML text anymore.
I need it to be inside the canvas of the graph, but under the graph.
Is it clear enough?
Thank you.
Look at the flot documentation on Hooks:
https://github.com/flot/flot/blob/master/API.md#hooks
It sounds like the drawBackground hook might work for you. It will let you draw on the canvas before Flot draws the rest of the graph.
My solution is the following.
I created one canvas in the memory and added the legend inside by reading the information inside the HTML legend with a loop.
Then I created a third canvas that contains the drawing of the graph canvas, and the drawing of the legend canvas.
After that, I send the information through AJAX to the server and save it as PNG.
Here's the PNG result:
So people saying we cannot export a Flot graph are wrong.
Have a good day.
I'm using the google charts library to make some interactive scatter plots. And I cannot find is whether you can have symbols other than circles as "markers" ? As far as I can see it was possible with the previous obsolete version of google charts. But is it impossible with the current one ?
Scatter chart "playground":
https://code.google.com/apis/ajax/playground/?type=visualization#scatter_chart
Currently (as of July, 2013) there is no way to do this within the chart options. You have a choice between circles and no markers, and that's it.
You could go through the code and change the SVG using javascript, changing the circles to rectangles, and manipulating the coordinates appropriately (or drawing paths, or whatever you'd like). That's really the only way to do it.
Edited to add:
Additionally, you could set a fill for the circles themselves using javascript, and make the fill any shape you'd like.
You can do it with the help of image charts. You can change the color and shape of the markers using this.Refer this link. An example for the different shape markers
Click here to see this. For more google charts related queries take a look at this jqfaq.com
Is there any JavaScript (even better if it's based on jQuery) slider that is circular in shape and that also allogs to draw segments on the circle. Here's a drawing of a sample of what I'd like to achieve:
As you can see, the yellow slices are those that have been selected, while all the rest is just a background image (this is done on an iOS device with a custom control).
It would be nice to find something similar for HTML pages if there's any around.
Thanks!
This might be useful. It's very good.
jquery-knob
I ended up using a custom solution based on oCanvas.
Can someone please let me know how should I implement this kind of chart? I need to use a javascript library for implementing a chart which has a big circle (100%) inside which there are small semi-circles which divide the bigger circle. Its kind of pie chart but not exaclty pie chart. I want semicircles inside a big circle It looks like a bubble chart to me but it is enclosed within a circle. I am not quite sure which library should I use for this?
Any help would be appreciated!
write your own.
you can make divs into circles with css(border-radius), even into triangles(3d transform within div dat gives no overflow) if you try hard.
then you could utilise absolute positioning to place them where you want them.
That way you dont even need javascript or a library.
By request:
http://jsfiddle.net/h6su5/
Just a small example what you can do with google and some inventive thinking ;-)