We Keep Coding

Exporting chart.js charts to svg using canvas2svg.js

I am trying to export chart.js chart to svg using canvas2svg.js.
It does not seems to be working, since chart.js refuses to use 'fake' canvas created by canvas2svg.js
My HTML code:
<div style="position: relative; height:20vh; width:100vh">
<canvas id="radarCanvas" ></canvas>
</div>
My script:
var ctx = document.getElementById("radarCanvas").getContext("2d");
var radarChart = new Chart(ctx, graphData); // Works fine
// Create canvas2svg 'fake' context
var c2s = C2S(500,500);
// new chart on 'fake' context fails:
var mySvg = new Chart(c2s, graphData);
// Result (console):
// "Failed to create chart: can't acquire context from the given item"
I've posted full example on Codepen (Sorry for long js there, I could not find a link from which to import canvas2svg so I pasted it at the beginnning of the script.)

If you use a recent Chart.JS version (2.7.1 at time of writing) you can get this running by tweaking canvas2svg a bit.
I added the following code to canvas2svg: Have a look at the Codepen
ctx.prototype.getContext = function (contextId) {
if (contextId=="2d" || contextId=="2D") {
return this;
}
return null;
}
ctx.prototype.style = function () {
return this.__canvas.style
}
ctx.prototype.getAttribute = function (name) {
return this[name];
}
ctx.prototype.addEventListener = function(type, listener, eventListenerOptions) {
console.log("canvas2svg.addEventListener() not implemented.")
}
BUT: It only works if you disable animation and responsiveness of the chart (set to false).

In case somebody stumbles across this question, replacing the ctx in sspechts answer to C2S and disabling animation and responsiveness of the graphdata one can get the svg from the canvas.
I forked the codepen project and added one function which tweaks the library with the codesnippets from sspecht and the two flags:
// deactivate responsiveness and animation
graphData.options.responsive = false;
graphData.options.animation = false;
https://codepen.io/anon/pen/RYVVPY

For devices that have a devicePixelRatio different than 1 or are zoomed in/out I did:
const getDevicePixelRatio = window.devicePixelRatio
window.devicePixelRatio = 1;
// C2S Code
window.devicePixelRatio = getDevicePixelRatio
Otherwise the svg may get cropped.

The most recent version of Chart.js (3.9.1) seems to use setTransform() and resetTransform() methods which are not implemented by Canvas2SVG ( no updates on github for ~5 years ).
This maintained version does implement theses methods : https://github.com/zenozeng/svgcanvas/ ( https://www.npmjs.com/package/svgcanvas ).
However, it seems to have issues for drawing line. I wrote a little workaround for that ( see https://github.com/zenozeng/svgcanvas/issues/25 ).
I hope it'll help.

get access to chart-object in highchart

I´m not able to get access to the chart-object in highchart with the angularjs directive HIGHCHARTS-NG.
var chart = $scope.chartConfig.getHighcharts();
console.log("chart", chart);
Gives me an error: $scope.chartConfig.getHighcharts is not a function.
When I
console.log("chart", chartConfig);
the object offers me the getHighcharts()-function.
When I say
var chart = $scope.chartConfig
console.log("chart", chart);
it´s not offering the getHighCharts-function anymore!
I really need to get access to that chart-object.
Thanks

I will suggest to use the highcharts libraries how they are.
Because in this case this is not an official pluggin, and the problem is that in a near future it might not be compatible anymore.
Anyway, to get the chart object you can try:
Using the pluggin method .getHighChart. If you have this:
<highchart id="chart1" config="chartConfig"></highchart>
you can use func option;
$scope.chartConfig = {
...,
func: function(chart){
//play with chart
}
}
which is a reference to the callback function when it creates the highchart object:
var x = new Highcharts(options, func);
using jQuery
var chart = $("#chart1").highcharts();
I hope it helps.
Regards,
Luis

Sketch Plugin: How to programmatically make a layer exportable?

So, in Sketch, you can mark a layer/group as exportable.
And then the layer/group can be exported as .png/.svg/.pdf etc. I was trying to make a Sketch Plugin recently, where I need to mark a layer/group as exportable from code. A layer in code is represented using MSLayer and group is MSLayerGroup. The sketch documentation is not mature enough yet, so I used ClassDump to extract all the headers that has been used in the app. I have been looking for a method that might seem to do my job, but it has been days and am still out of luck. Can anybody please help me out in this regard?

Sketch supports slice and export to image. You can use - (void)saveArtboardOrSlice:(id)arg1 toFile:(id)arg2;
method of MSDocument.
This is almost how to do it.
var loopLayerChildren = [[layerToExport children] objectEnumerator],
rect = [MSSliceTrimming trimmedRectForSlice:layer],
useSliceLayer = false,
exportFilePath,
slice;
// Check for MSSliceLayer and overwrite the rect if present
while (layerChild = [loopLayerChildren nextObject]) {
if ([layerChild class] == 'MSSliceLayer') {
rect = [MSSliceTrimming trimmedRectForSlice:layerChild];
useSliceLayer = true;
}
}
slice = [MSExportRequest requestWithRect:rect scale:1];
if (!useSliceLayer) {
slice.shouldTrim = true;
}
// export to image file
[(this.document) saveArtboardOrSlice: slice toFile:exportFilePath];
Reference from #GeertWill's sketch-to-xcode-assets-catalog plugin.

Selecting a point programmatically on stockchart from HighCharts library in GWT (Also in native JS)

I'm using Stockchart from HighCharts API for GWT. I want to select a point when clicking on a button.
I have something like this:
public void onClick(ClickEvent event) {
System.out.println("Clicked + i ." + i + "- >" + points[i].getX() ) ;
chart.getSeries()[0].getPoints()[i].select(true, false);
select(true, false);
i++;
if (i == 4) {
i = 0;
}
}
Now, this works well for Highchart graphic, but for StockChart (same API, just different chart object), it doesn't work. Doesn't Stock chart support
this functionality? Maybe due to the navigation? Please help.
EDIT:
I also tested both chart types, and this is the result. It seems to me that, either the StockChart doesn't support this functionality (maybe beacuse of naviagation options), or it may need some extra configuration. Here are the tests:
Stock test
HighChart test
Thank you

You'll have to enable Markers.
Try adding this:
Marker marker = new Marker();
marker.setEnabled(true);
SeriesPlotOptions spo = new SeriesPlotOptions();
spo.setMarker(marker);
Series series1 = chart.createSeries()
.setPlotOptions(spo)

How to get charts and reports in html5 dynamically?

I'm working on an android tablet application using phonegap in which i need to get a report chart which diagrammatically explains the status of different things, something like as shown in the picture below.
I want to generate these kind of charts or reports dynamically which varies as the data changes.Can anyone help me providing some examples using html5, js and css which has some similar functionality?

Did you check out RGraph: HTML5 & Javascript charts?
RGraph is a charts library written in Javascript that uses HTML5 to draw and supports over twenty different types of charts. Using the new HTML5 canvas tag, RGraph creates these charts inside the web browser using Javascript, meaning quicker pages and less web server load. This leads to smaller page sizes, lower costs and faster websites - everybody wins!
If you see a basic code, it goes this way:
<script>
window.onload = function ()
{
// The data to be shown on the Pie chart
var data = [564,155,499,611,322];
// Create the Pie chart. The arguments are the canvas ID and the data to be shown.
var pie = new RGraph.Pie('myPie', data);
// Configure the chart to look as you want.
pie.Set('chart.labels', ['Abc', 'Def', 'Ghi', 'Jkl', 'Mno']);
pie.Set('chart.linewidth', 5);
pie.Set('chart.stroke', 'white');
// Call the .Draw() chart to draw the Pie chart.
pie.Draw();
}
</script>
See a live example of Pie charts!
Yours is a Radar Chart. See one here: Radar Charts. Source code:
<script>
window.onload = function ()
{
// The data to be represented on the Radar chart.
var data = [3, 3, 41, 37, 16];
// Create the Radar chart. The arguments are the canvas ID and the data to be shown on the chart.
var radar = new RGraph.Radar('myRadar', data);
// If you want to show multiple data sets, then you give them like this:
// var radar = new RGraph.Radar('myRadar', [3,5,6,8], [4,5,2,6]);
// Configure the Radar chart to look as you wish.
radar.Set('chart.background.circles', true);
radar.Set('chart.color', 'rgba(255,0,0,0.5)');
radar.Set('chart.circle', 20);
radar.Set('chart.circle.fill', 'rgba(200,255,200,0.5)');
radar.Set('chart.labels', ['Safari (3%)', 'Other (3%)', 'MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)']);
radar.Set('chart.key', ['Market share', 'A made up figure']);
// Now call the .Draw() method to draw the chart.
radar.Draw();
}
</script>

Check the below link.It really has some good examples.
http://www.highcharts.com/
Let me know if you still have any issues

A possible solution is to map CSS3 transitions to the graph. Here is a basic example demonstrating what you can do without using any javascript.
Here are some static examples produced with css (no javascript), I'm having a hard time finding interactive examples but as demonstrated in one of the previous links it is possible.