I am trying to use the jspdf library to draw a fairly dynamic pie graph. I have considered drawing the graph in html5 canvas and then saving it as a jpeg and saving the image into the pdf. This, however doesn't work for android browsers and I need to make something which works on all the tablets. jspdf doesn't seem to have an arc function and drawing a circle with lines in it doesn't let me fill the arcs with different colours. Any help is appreciated! Thanks!
I solved this problem by using the inbuilt cubic bezier function.
This link was very useful : http://itc.ktu.lt/itc354/Riskus354.pdf
Once I could draw an arc, drawing a pie graph was very easy!
I made some time ago a library on npm #obliczeniowo/elementary for typescript angular that let you draw very easy pie diagram using lib-flat-pie-diagram component. This component have export button to PDF and it's draw the pie diagram as a vector inside a PDF.
There is a DrawingPdfInterface class that let you draw pie very easy. Just center point, start angle, ande angle and colors of stroke & fill and stroke width and that's it.
Related
I'm trying to achieve this using chart.js:
Notice how the gradient follows the stroke, starting at the red colour at 0° and ending in the yellow colour, with a smooth gradient between.
I've tried a few methods found while searching around but have had to admit defeat (at least I've hit the limit of my canvas and js skills)...
Using the usual chart.js setup and customising using:
Chart.pluginService
for the centrally placed number, this is what I have so far:
http://jsfiddle.net/voodoo6/c2tzydv3/19/
The closest I can find to a solution to creating the gradient was here:
Angle gradient in canvas
There is an issue related to this on the chart.js repo here
I'm struggling to get it working – has anybody achieved this using chart.js or have any idea how it can be done?
Thanks as usual!
I developed a line chart using chartJS. In my chart, I have to draw the data line, and lines with bubbles to show where is the mode, red, and amber in my data. I have figured how to draw the lines. But I don't understand how to draw the bubbles to show the details.
The chart I need to draw is shown in the picture:
Is there any idea how to draw the chart ?
I have found the simple solution.
There is plugins in chartJS called chartjs-plugin-annotation.
These plugins help you make arbitrary lines in the chart and give labels to it.
You can see the example and documentation of chartJS plugin annotation here
I'm working on a project that's using maps to represent a Geo-locations.
each when I hover on any location it should bring a magnifying glass with a donut chart inside of it
I can do this by converting the donut chart from canvas to image and add it to OpenLayer vector as image.
But, the problem is this donut chart may contain a real-time data which could change each second.
So, there is anyway to directly add canvas to vector or similar way to do this.
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 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.