I need to create a couple of graphs (barchart, line chart and pie chart) to insert as an image in a word file. My application is running in the browser (react).
What would be the easiest way to accomplish this?
(I haven't found an answer to similar questions, to my surprise)
Ok, I found an answer myself: I can use plotly to create the graph and export it to image directly (https://community.plotly.com/t/export-image-without-plotting/8507)
Related
I am looking for an open source visualization package to create a 3d bar chart similar to the one I have created in excel (see image below). I have tried vis.js, but there was no way I could tell to format the 'walls' to show gridlines and a background color. If this is possible in vis.js I could do that as well, but I didnt see anything in the documentation.
The features I need are:
Gridlines for 'walls'
background color options for 'walls'
Free movement/rotation
Ability to change individual bar color based on some logic
Ability to export image to pdf, etc..
Ideal Chart (excel):
Best I could do with vis.js:
Any help or suggestions would be greatly appreciated! Thanks!
Have a look, HighChart has great features, you can use the non-commercial version.
https://jsfiddle.net/oscjara/4mjp7egw/
here is the library
jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/3d/skewed-labels/
I am using the library http://www.getorgchart.com/ to produce a large organisational chart diagram. This renders the chart in <svg></svg> tags.
My problem is, the built in "print" function doesn't print the entire chart, just the visible section. As my chart has around 180 people on it, it expands horizontally quite far!
What I need to be able to do, is capture all the SVG data and export it to PDF/PNG/JPG whichever of these (PDF would be ideal with the scalability intact). I've tried several libraries to try and complete this task, and failed thus far! I've tried using canvg and also other libraries that i've found such as https://github.com/exupero/saveSvgAsPng (which worked to an extent but all the line paths were messed up and it only printed the visible section of the svg not the entire chart).
UPDATE Solution must be either client-side or easily implemented on internal servers!
Using the last library I had:
$(document).ready(function(){
$('#printme').click(function(){
saveSvgAsPng(document.getElementById("svgChart"), "diagram.png");
});
});
Does anyone have a solution for this?
I've come across Plotly and I am wondering whether it is possible to animate things like bar charts with it. I noticed the Streaming API but I do not think that is what I need...
Can I use JavaScript to manually do this?
you can probably check out the postMessage API here.
Animations were just released in in Plotly.js. Docs are here: https://plot.ly/javascript/animations/
To answer your question, yes you can animate bar charts made with Plotly. Plotly has an open-source JS library built on top of D3 which should make it very easy for you to create your own animated bar charts. You could also just use D3 instead of Plotly.
I'm working on product where I generated C3 chart successfully. But problem is that I'm not able to download these graph as pdf or png. Even I don't know C3 libraries are providing this features.
Please suggest me if there is any way to download c3 chart as pdf or png. I want to download particular graph by clicking on button as d3 graph. Thanks in advance.
The problem is that those libraries are rendering your graphs as SVG, inline in the page. What you need is a way to get the rendered SVG (plus styles), and then if necessary to convert it to a PNG / PDF.
If you only want to do it every once in a while, this is something you can do by hand. There is [a bit of semi-official documentation from D3's creator on the subject. You can also have a look at the answers to these other questions.
If you want to do it programmaticaly, as a "Download this chart" feature on your site, there are multiple ways to go:
You can use jsdom to render your graph server-side, save the SVG and then use a tool like ImageMagick to convert it to PNG.
PhantomJS can render your page and take a screenshot of the chart. Here is very similar StackOverflow question with a good answer using PhantomJS.
Note: If the chart looks correct on canvas, I assume the following would work with C3 or any other chart:
I found that since I have to support IE 11 I instead went with canvas to blob to PNG using "canvas-toBlob.js" and "FileSaver.js"
$("#save-btn").click(function()
{
$("#myChart").get(0).toBlob(function(blob)
{
saveAs(blob, "chart_1.png");
});
});
https://jsfiddle.net/mfvmoy64/155
This is my problem: For a school project we are trying to create a directed graph and make it fit in a typical html website. We figured out it had to be written in javascript, because a java applet isn´t an option. So this is how it should look like: image.
The data visualised in the graph will be gathered from some xml files.
We took a look at flare and some other packages, but real thing is making a two-way link between the nodes (where the thickness of the arrow represents importance) in our graph. Making the whole thing moveable is also required.
Any ideas? Thank you.
Have a look at jsPlumb - a not featurerich but easy customizable jQuery Plugin for directed graphs
http://morrisonpitt.com/jsPlumb/html/jquery/demo.html