Chart.js doughnut chart with gradient along path/stroke - javascript

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!

Related

Is It possible to change line direction d3 GeoJson?

I am using d3 v7 with Vue js and drawing world map. I wanted to connect two points using lat/long but it is taking closest direction. How can I change it as link below? Yellow line is being drown by d3, what i want is white line, Is it possible to change? Thank you so much.
https://i.stack.imgur.com/eJM1k.png

Change Wall Thickness Cesium

I am working with Cesium and I am using the Cesium.WallGeometry and I would like to thicken my walls to make them more visible when viewed from a distance because at certain angles the wall disappears. The only thing I can seem to do is change the maximum and minimum heights to lengthen the wall but no way to widen it. Anyone know either an attribute function that I missed or a way to modify the cesium source to change this? I am working with the full b-29 version of Cesium right now.
Walls in Cesium have no thickness; if you would like to draw a thick wall you should be using either Corridor or Polygon geometry. There are several other types of geometry that may provide what you are looking for as well; those links have more.

Broken/Incomplete Doughnut with CanvasJS

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.

Draw a pie graph using jspdf library

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.

jqplot highlighter a line when mouse is over it

I am using jqplot to generate several line plots, and would like to add the highlight feature to it. In detail, once your mouse is over this line, it will highlight itself (change color). I have see this feature in bar plot (example). Is there a way to introduce this to line plot?
Here is the demo of my code.
This feature, at least to my knowledge, is not provided out of the box by the jqPlot. For this reason the 'easiest' is to add it yourself. I did something of this sort a while back. My approach was to use the jqplotMouseMove event and add the appropriate functionality there.
The idea of my approach is simple:
Get the distance of the mouse point from a line segment.
Then if it is smaller than the line's width - you found your line.
Draw the line in different colour on the highlighter's canvas (.jqplot-highlight-canvas), thus creating the highlight effect - for this canvas we need the highlighter plugin.
The working sample of the aforementioned idea is here.
PS: Thanks to Jonas Raoni Soares Silva, for the point to line distance function which saved lots of my time, and works great.

Categories

Resources