Vaadin - SVG Generator, any alternative? - svg

I have been working with Vaadin charts during this week and I found a problem that I cannot solve. I need to send several charts to a PDF generation (using iTextpdf) and I could do it using SVGGenerator. The main problem is I cannot use this solution because the final laptop doesn't allow any installation, and Phantomjs is required for SVG Generator (no add-on can be installed neither). I tried to find a different solution to convert the chart content into file or buffer that I can manage, but I think I have been reading so much posts and I am not able to distinguish the solution.
So, I will try to clarify basic questions first:
a) Is it possible to manage SVG Generator without any installation in the laptop?
b) If not, is there a different way to convert a chart into an object which class could be managed to insert it into a PDF?
I can assure you I tried to read all documentation in this forum and official Vaadin forum related to this topic but I couldn't find any solution. I don't want to seem lazy, I only want to avoid spending more time and clarify the maining pre-conditions to solve this issue.
thanks in advance for your time and help.
Kind regards,
David.

You can take a screenshot of your chart and append it to pdf:
Screenshot screenshot = new Screenshot();
screenshot.setTargetComponent(myTargetComponent);
myChartLayout.addComponent(screenshot);
//when complete
screenshot.addScreenshotListener(new ScreenshotListener() {
public void screenshotComplete(ScreenshotImage image) {
//do something
}
});
//take screenshot
screenshot.takeScreenshot();

You will not be able to render a Vaadin Chart without a web browser engine of some kind. That's what PhantomJS provides. If you have a full-blown web browser at your disposal, though, you can grab the SVG markup manually from there; it's just a bit more difficult to automate. This works in Chrome:
Open your Charts app in the browser
Open the JavaScript console (Ctrl/Cmd + Shift + J)
Type something like this: copy(document.getElementsByTagName('svg')[0].outerHTML)
Paste the contents of your clipboard to a new text file and save it as an SVG.

You don't need to install phantomjs, just bundle its binary along with your web application (Reference). I did the same thing with my Amazon AWS deployment and it works just fine.

Related

Adding a slideshow to a webpage

I need help. Apologies if the information I provide is not sufficient. I'm sort of an all-arounder at this job and this task has been thrown at me.
I need to add a slideshow to a a webpage. I am not even sure what code I need: jQuery, CSS, or HTML.
The homepage of the website has a Nivio slider (can't access the code to this because its owned by a management company we can't afford to pay).
This is what the editing page looks like: screenshot
The website is http://evelyns-kitchen.com
I am looking to add something like the Nivio slider (if I can't actually add a Nivio slider). Smooth transition, clean, dots below photo to represent the image, left/right arrow. Let me know what other information I can provide! Thank you so much.
Use zoho reports www.reports.zoho.com where you can create reports dashboards slideshows and many more

Weird results when converting SVG to js for Raphael

Im trying to use this image with Raphael:
http://upload.wikimedia.org/wikipedia/commons/9/9f/Argentina_Buenos_Aires_City_location_map.svg
I convert it to js with: http://toki-woki.net/p/SVG2RaphaelJS/
And I get this:
Any Idea of what can I do to solve this? This is worst apparently when I add text in inkscape above each reagion to change later via javascript.
Im using SVGWEB now without problems buy Im trying another alternatives because I cannot make the addeventlistener work in IE7/8 like I said here:
can't add listener to a SVG in Internet Explorer using SVGweb
Any ideas?
Thanks!
Try mapSVG plugin instead.
Demo with your map: http://map.karaliki.ru/bu.html (zoom in-out with mouse wheel)
It works in IE7-8 as well.
Plugin's description: http://map.karaliki.ru

Is there any way to save the contents (say a graph) of a particular div tag in a browser webpage as an image using javascript?

I am creating an ASP.NET web application. In one of my webpages (an ASCX control) I am placing a fusion chart inside a <div> tag. I want to provide an option for the client to download this fusion chart.
Is there any way that I can download
the fusion chart present in the Div
tag, as an image (Using javascript
because the div tag is a client side
control).
The request is that my client could save this fusion chart present in the <div> tag as an image when he visits the webpage.
The target browser is IE.
Please help me.
I can confirm that it is not possible to 'Export the chart as image' when using FusionCharts Free. However, as mentioned by Larsenal, you will be able to use FusionCharts v3.2.1 and it's updated JavaScript API to export pure JavaScript charts to JPEG, PNG, PDF, SVG formats.
Ref.- http://www.fusioncharts.com/docs/?ECPureJS.html
Furthermore, you may even export your Flash charts, if required, in a similar manner. DO check out the link below for a more detailed account of the same.
Ref.- http://www.fusioncharts.com/docs/?ECOverview.html
Hope this helps.
It is currently not possible to generate an image from a section of a webpage with JavaScript. Quoting myself from another question:
Firefox added something similar to
this to their canvas implementation.
You can find
CanvasRenderingContext2D.drawWindow()
documented in their wiki. It is
restricted to being used by plugins,
for security purposes, and isn't
supported by any other browsers.
There is
talk
of adding support to other browsers,
and perhaps removing some of the
security restrictions, but that is
probably a long way off. For now,
there isn't a good JavaScript solution
to your problem.
Sorry, there's no way to do it with Javascript.
I don't know about the Fusion controls, but some graphing libraries include a way to render to an image or PDF. Start looking there, not Javascript.
Update: FusionCharts claims to have the ability to export to JPG, PNG, PDF and CSV. Start with this page about exporting pure JS charts in their documentation.

How to set Legend with Open Flash Chart 2 graphic using Open source Java API - JOFC?

I have a Seam 2.2 app running under JBoss5.1. In this application I have successfully developed some Graphics using Java Open Flash Chart, which is a Java API for Open Flash Chart.
Now I would like to add a X and Y legend like this one.
Well I have a graphic which is rendering properly and than I try to set X Label using:
...
chart.setXLegend(new Text("Legenda X"));
But than instead of showing the legend it corrupts something which causes the graphic to renders completely blank.
This is the generated JSon when the graphics renders correctly.
{"y_axis":{"min":388,"max":866,"steps":20},"title":{"text":"Gráfico de gasto mensal com Combustível"},"bg_colour":"#FFFFFF","is_decimal_separator_comma":0,"elements":[{"values":[{"tip":"R$:610.0\n05/2010","top":610},{"tip":"R$:488.0\n06/2010","top":488},{"tip":"R$:634.57\n07/2010","top":634.57},{"tip":"R$:766.0\n08/2010","top":766},{"tip":"R$:396.0\n09/2010","top":396},{"tip":"R$:610.0\n10/2010","top":610}],"type":"bar"}],"num_decimals":2,"is_fixed_num_decimals_forced":0,"x_axis":{"labels":{"labels":["05/2010","06/2010","07/2010","08/2010","09/2010","10/2010"]}},"is_thousand_separator_disabled":0}
I took a deeply look at it and turns out that whenever I try to add the x legend with the code fragment showed above the JSon is actually NOT generated by JOFC.
I could not find much useful documentation on JOFC on the web and the API itself is not very well documented, so I am completely lost on trying to add this simple x label, which should be the easiest part :( . Any Ideas on that.
An update:
Now I just have downloaded JOFC source code and will take a look at this.
It looks like there's an open issue on the JOFC page: http://code.google.com/p/jofc2/issues/detail?id=29
It suggests a workaround of calling the function like:
chart.setXLegend(new Text("Legenda X", Text.TEXT_ALIGN_CENTER))
I would try with Open Flash Grapix, it is easier to use, and just sets parameters on FlashVars.
Open Flash Grapix

Displaying Maya Mesh XML in browser

I have a Mesh file (XML format) created in Maya.
I would like to display it in the browser with some additional options for the user, like rotating an zooming in and out.
What should be the best and easy method to do so?
(SilverLight, HTML5/JS/Canvas, Flesh)
I would really like to try HTML5/Canvas - is there any libraries that know how to do it?
Thanks.
I would really like to try
HTML5/Canvas - is there any libraries
that know how to do it?
You can visit this site learningwebgl
There are a lot of lessons and demos. On the right side there is a list of frameworks.
But you need browser support for webgl...
If you are willing to export your file in Collada/DAE format (which is basically XML), there are some online WebGL framework demos that show that a DAE file can be displayed the way you wish.
The frameworks that I've seen this for are GLGE and SpiderGL.
(WebGL is the 3D version of HTML5/Canvas.)
you can export your maya scene with http://www.inka3d.com and then manipulate it with javascript

Resources