I'm currently working on generating a PDF from a simple html page that contains a few charts that are generated in Javascript using Highcharts.
We currently have ABCPdf installed which generates the PDF, however it doesn't capture any of the charts. After some Googling, I found that adding:
theDoc.htmlOptions.UseScript = True
Should work, but it doesnt. I'd appreciate any ideas.
Thanks,
Dave
We're currently doing this in production for web pages with javascript that are rendered in pdf to create reports (with HighCharts Graphs)
We're using wkhtmltopdf with great success.
Some ideas:
Since ABCPDF uses the IE engine: Does your server IE version supports Highcharts? Upgrade if not.
You may want to check if Highcharts have to option the generate an image.
The example charts found on Highchart's website appear to use SVG.
When I attempted to render their home page with WebSupergoo's online demo for ABCpdf, which uses IE, these also failed to render.
ABCpdf supports only a subset of SVG based around the SVG Tiny specification, according to the documentation...
However, the latest version of ABCpdf introduced support for converting web pages with Gecko's rendering engine. As this engine supports the majority of the SVG Full profile, I would suggest giving it a try. You can find out which bits are not currently implemented here on Mozilla's site...
To switch to the Gecko engine you'll need to add something like the following line of code:
myDoc.HtmlOptions.Engine = EngineType.Gecko;
Each rendering engine also has a different set of HtmlOptions. You can find out more about the GeckoSubset here...
If this doesn't work, you may need to look at what other formats HighChart can export. Do they support the HTML5 canvas element?
Another thought: Is it possible your charts are fading in and ABCpdf is only capturing the first frame?
Related
One of the project requirements for my new java web project is to have dynamic charts that will load really fast.
While in discussion , it was asked if we could implement charts without using images ie without loading jpg, png files etc. Also files like pdf cannot be used.
Basically my question is
Can charts be implemented in jsp/javascript without using images,pdf etc ?
ie even api's used should not provide end result as image,or pdf etc.
I did not say no right away , as I have implemented charts in console applications in C on screen. Can we do something like that on a webpage ? ie show a graph by drawing on screen dots,lines,circles etc.But it should be possible inside a div ?
PS : Comments and answer from Lucien Stals helped to understand that the technology i was looking for was svg.
I am looking for some nudging in the right direction from some of the experienced java , javascript programmers in SO.
Many JavaScript chart libraries exist that render in HTML5 on your page. You can probably find one that meets other requirements or wishes of your team, since each have feature areas in which they excel. http://www.zingchart.com has also been adding many ways to include them in your charts if you decide to go with something other than vanilla JavaScript (jQuery, Angular, etc). Full disclosure: I'm on the ZingChart team. I can help you weigh the pro's and con's if you find a few that catch your interest.
A simple bar chart would be easy enough to create with DIVs and CSS.
Anything more complicated and I think you are talking SVG, which could be drawn using http://raphaeljs.com/, or maybe http://d3js.org/ .
Also look at the HTML5 canvas element.
I would suggest to use Google Chart Framework. I did use it in past for my project and it is good.
You can check highcharts http://www.highcharts.com/ . This can be integrated easily with your javascript .
Most of this js chart plugins expects data in array or json format and can dynamically render the charts.Easy to integrate in the web pages
jgccharts.js Jquery charts
jquery charts plugin
I have a WordPress site with lots of custom fields that contain images in .svg format.
Now I want to add support to IE8, which won't display SVG, so I need to find a solution.
The first thing I think of is to add custom fields to add a .png along with every .svg on the site, but this means to go through each and every custom fields to modify them...
I've also seen that there's a library called Raphael.js that supports IE, but it's intended to draw the SVGs, and I already have many complex SVGs created with Illustrator, so this is not a solution for me...
Is there any way (i.e. JS library) that, each time you want to load a SVG with:
<img src="http://mydomain/Homepage-1.svg" alt="Image Alt">
it automatically converts it to plain image?
You can include a call for Adobe's SVG Viewer for IE8
see:
http://www.iegallery.com/en-us/Addons/Details/444
It still works nicely for svg including filters.
Adobe SVG Viewer was discontinued in 2009. I still have clients from time to time that have need of support for IE8. This page has a few polyfills worth trying:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#svg
You'll need to decide what you want your fallback to be, Flash, Canvas, Silverlight, and then choose the right solution for you.
I´m new to Raphael and would like to do some basic questions on how to architect my app:
I need to draw models on a visual graphical editor and save them to files (I call them screens). At runtime, I need to load these screens and animate them from server data using Ajax.
Using SVG I can load data using this simple command:
<object id="svgobject" type="image/svg+xml" data=".\svg\svgfilename.svg"></object>
Also, on SVG, we can use some graphical visual editors and that´s all we need to built the screens. The rest if javascript code to get element ids and change their attributes at runtime based on ajax call to get server data.
As SVG is not supported on old browser, one natural choice is to go for Raphael, but I don´t know if there is visual graphic editor that support Raphael scripting language and how to save/load these scripts at runtime.
So, What would be the best approach to visual edit my models, save them to a file and load at realtime using Raphael ?
Ian's answer is one solution. The other way of doing this is to convert SVG documents to a data structure that Raphael can understand.
For relatively simple SVG images you can use svg2path. It converts SVG files (or svg from a URL) to paths that can be loaded into Raphael. From the documentation, running the following on the command line:
svg2path some.svg
generates a path file called some.path that can be loaded in Raphael (presumably using the paper.path() method).
It's available on github and npm.
You could use a plugin like https://github.com/wout/raphael-svg-import or https://github.com/jspies/raphael.serialize https://github.com/crccheck/raphael-svg-import-classic to get you started maybe. I think you may need to do some extra work to cope with groups and Raphael.
Edit to clarify, I'm not sure from your other comments what you mean by Raphael Mode from a graphic editor. You can just the graphic as a straight SVG and import. I'm not sure why there needs to support Raphael scripting.
The VectorEditorJS is a nice starting point for you.Look into editor.js to build or rebuild your own functionality over it.Here's a demo.
EDIT
The SVGEdit demo has got code to save the vector as an svg.You can look into the code.
I am looking for an html5/css/javascript chart library that supports the "follows" on line charts with mobile.
To be precise on what am I refering to by "follows" on line charts, here are good examples:
http://code.shutterstock.com/rickshaw/examples/extensions.html
https://google-developers.appspot.com/chart/interactive/docs/gallery/trendlines
even slightly different, this one would be nice also
http://www.flotcharts.org/flot/examples/tracking/index.html
I have made some tests using the extensive comparison provided here. Unfortunately, I was not able to find a line chart demo with "follows" that worked "out-of-the-box" with both Chrome and Chrome Android. Chrome is my targeted browser for now, I am writing a non commercial app just for fun.
It seems that most of these implementations are based on :hover css selector which is not available for mobile. I tried to bind the :hover logic with the "touchmove" but it was not straightforward (with rickshaw at the very least).
My question is: am I missing a library or an option in the existing libraries or should I keep on trying to implement my custom logic ?
You missed amCharts in your list, it does support "follows", for example:
http://www.amcharts.com/javascript-charts/line-with-duration-on-value-axis/
Note, you should set chart.panEventsEnabled = true in order touch events to work on mobile.
Disclaimer - I am the author of amCharts and amMap.
you can try echarts, it's really good at rendering large data and does supoort "follow", here's the example and the code
http://echarts.baidu.com/gallery/editor.html?c=doc-example/scatter-dataZoom-all
What cross-browser JavaScript SVG library will allow me to display and interact with pre-made SVG images.
I know of these libraries:
Raphaël: I'm currently using this along with a SVG loading plugin. But that plugin does not support Inkscape or Adobe Illustrator SVGs (i.e. most SVGs).
cang: This library looks promising, but it requires <canvas> support, which IE doesn't have natively.
svgweb: Another more-promising library. It requires Flash, but most IE users have Flash.
jQuery SVG: It seems to be able to load SVG images, but development seems to have died. And it requires me to use a modified version of jQuery 1.3.
I'm basically trying to make chunks of arbitrary images "selectable".
Any help would be greatly appreciated.
Raphaël does support importing of Illustrator SVGs, through the use of this great plugin. All you have to do is save your ai file as an SVG, open it up using a text editor, copy out the code and import it with the plugin. Works great, except : only supports "path" objects, no text, no gradients, no shadows...
I'm using http://excanvas.sourceforge.net/ for Canvas support in IE and Cang for SVG suport using Canvas.
What you could do is use a combo of cang and svgweb, you could check to see if the browser allows canvases, and if so, load cang and use it. Otherwise check if they have flash, and if so, use svgweb. If they have neither, then tell them to upgrade their browser.
You could read http://ejohn.org/blog/future-proofing-javascript-libraries/ if you are unsure about javascript feature detection.
I'd be tempted to make use of Google Chrome Frame (an IE plug-in). This will save you maintaining two sets of code (one for IE users, another for regular browser users). Adding the following meta-tag to your page will enable SVG to render in IE (via GCF):
<meta http-equiv="X-UA-Compatible" content="chrome=1">
See here for instructions how to detect, and potentially prompt the user to install GCF.
The best solution I've found is to use Raphael along with this tool, which allows you to convert SVG files (generated by Illustrator, in my case) to Raphael code almost as-is. And since Raphael is IE6+ - you could easily be crossbrowsy with some effort on your part.
Here is my example of what can be achieved with a combination of these two things.