OpenLayers: How to show canvas as a vector - javascript

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.

Related

How to fill point background of line chart in chartjs with an image instead of color?

I am trying to fill the point background of cricket line graph with a 'w' image. For example, consider a graph of 50overs (x-axis) vs Runs(y-axis). I want to plot a wicket on the graph in point background whenever wicket falls!
Any help welcomed and much appreciated!
Attaching a reference image]1

Point chart plot on existing line chart

I want to show a moving point (image) with X,Y coordinates and theeta angle (only to rotate the object) on an existing line charts using Google chart.
Please suggest me as I am new in integrating Google chart.
Thanks

How to put pie charts on a SVG map?

I use such a map on my website, it's created by amCharts:
All regions are SVG path elements. I'm thinking how to put a chart.js (or any other) pie chart on each of them. The chart of chart.js is a canvas element. Is there any easy solution to achieve it? I could also change the map provider if neccessary.
This should be the effect:
There's a demo on the AmCharts website that shows how to do that. You essentially need to create image markers that you can place on your map using latitude and longitude coordinates and use the positionChanged event to create/update custom external divs which contain your pie charts.

drawing square icons with Google Image Charts

I'm using Google Image Charts (yes, I know it's deprecated :-)) to draw circular icons on a Google Map, i.e.:
http://chart.apis.google.com/chart?cht=it&chs=48x48&chco=33FF33,000000ff,ffffff01&chl=a&chx=000000,0&chf=bg,s,00000000&ext=.png
Is there a way to draw square icons instead? Unfortunately all references to "cht=it" chart type seems to be disappeared from the Net.
Is there an alternative to Google Image Charts for drawing dynamic icons on a Google Map? I need to control dimensions, color, shape and label.
Is there an alternative to Google Image Charts for drawing dynamic
icons on a Google Map? I need to control dimensions, color, shape and
label.
Yes there is. What you're looking for is Drawing on the Map. Here you can use your custom icons, whatever shape they maybe.
Some actual examples for the things you've mentioned:
-Labels example
-Square shapes
-Custom shapes
-Draw on the Map

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.

Categories

Resources