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
Related
I am trying to find the chart library used in the kickstarter dashboard:
(source: alexgpr.com)
Why?
Because I need some functionality not available in many of the libraries I have found.
Money in one side, percentage in the opossite side.
An horizontal line parallel to the axis (like the green one in the image)
Look nice and professional
I can't say which library they use but it looks like it could be raphael.js or similar.
You can also do some great animations with http://raphaeljs.com/ It creates SVG graphics and is great on all browsers including IE6
Also for graphs specifically check out http://g.raphaeljs.com/
the library that it is used looks like http://www.chartjs.org/
Hi Im new to GWT and Google App Engine. Im trying to layout which looks like the image. However, Im not sure whats the best way to achieve this.
There are several ways according to GWT documentation such as: UIBinder, Layout Panels (Im using this approach in the image).... etc.
However, my UI is not that complicated. I have a div with the navigation bar on top, a div with a map(Javascript, a div with Facebook comments(javascript), and a div with some functionality which I wrote for ratings etc.
Thus mostly this webpage invokes a lot of javascript and third party stuff.
Here is some code that accomplishes this
String header = "<div><h3>Navigation bar here</h3></div>";
String east = "<div><h3>Rating System here</h3></div>";
String south = "<div><h3>Facebook comments here</h3></div>";
dock.addNorth(new HTML(header), 75);
dock.addSouth(new HTML(south),50);
dock.addEast(new HTML(east), 300);
dock.add(map);
RootLayoutPanel.get().add(dock);
I tried entering some Javascript in that html string to be added to the map. However, it didnt show up on the view. Seems like the html only works if its text, is that caorrect?
Whats the best way to construct this in GWT?
Could someone please point me to some examples of code/ tutorials?
Thanks
I built a website like you project to do (link in my profile).
There is a jar file available for mapping maps v3 in gwt.
Here it is : http://code.google.com/p/gwt-google-apis/downloads/detail?name=gwt-maps-3.8.0-pre1.zip
Take care of GAE ... if your application must stay in "free", and you plan to make it available for others users, you will ran out of quota pretty fast :-(
(I gets 60% of instance time with only googlebots ...)
Anyway, just make an almost empty html, and build your panels from scratch.
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?
Is it possible for someone to give me a few pointers on how to display a multidimensional array in the form of a bar graph?
The array is multidimensional, with three elements in each part - and the elements are determined by a HTML form.
So if it is possible to display this kind of array in the form of a bar graph in Javascript on a standard HTML site, i'd appreciate some help!
Thanks
Check out Flot and MilkChart. The former extends jQuery, the latter MooTools. Both use the canvas element, which is now supported by all the major browsers (even IE with the inclusion of an extra script). Take a look at the reputation tab in your stackoverflow profile to see it in use. I've used Flot (haven't tried MilkChart) in a project before and while the manner you pass data into it can seem a bit unintuitive at first, you'll find that it is actually pretty powerful for a non-flash charting solution. Flot also defines custom events that you can use to define chart interactions. Flot supports stacked bar charts with a plugin, and I believe you can do clustered bar charts with it as well.
You could always go with some sort of declarative graphics solution using div elements as bars in a graph, but that's not as easy or consistent across browsers as drawing charts with the canvas.
If you are leery of either of those solutions you could send the data to a service to return a static image. The Google Charting API supports grouped bar charts, or you could use some service you host yourself.
My recommendation is the first solution using the HTML canvas, specifically leveraging Flot since that is the library I have the most experience with and can vouch for. Maybe someone else has some comments about MilkChart.
EDIT:
Another library I forgot to mention is PlotKit which extends MochiKit. I haven't used it but apparently it supports not only the charting using the canvas element but also supports charting using SVG. Scalable Vector Graphics offer you another declarative graphics option beyond hacking a solution using HTML, however I'm not sure how crossbrowser an SVG based solution would be (particularly in IE).
EDIT:
Here is a jQuery plugin which charts using div elements. I personally don't like this option because I think it is more complex and less easily configurable than some of the other options. I feel like using HTML elements to create complex declarative graphics (while impressive) is sort of a hacked solution and will, in my experience, cause problems at some point.
According to the documentation, both Flot and MilkChart only work in IE if the excanvas extension is installed.
For greater portability, I suggest checking out the Google Visualization API which is incredibly simple to use and has many different display possibilities. Visualizations are rendered as either flash elements (interactive) or as plain images (static).
As a keen windsurfer, I'm interested in how windy the next few weeks are going to be. To that end, I've been writing a little app to scrape a popular weather site (personal use only - not relaying the information or anything) and collate the data into a single graph so that I can easily see when's going to be worth heading out.
I have the back end working but need a way to display the data. My scraper currently gives me two series of data which tell me how strong the general wind is and how strong it's likely to gust to. What I'd like to do next is display those two data sets as a pair of lines in a graph and shade the region between them.
I was considering using something like the flot library to display the data. The only problem is that I can't see a way to shade an area between two lines?
If anyone has suggestions of how to do this in flot or other libraries or graphing techniques (I have DJango on my server so anything pythonic or javascripty should be fine), I'd be interested to hear them. Ideally this will be a javascript solution to avoid having to serve up images.
Take a look at the Google chart API's. They make this sort of thing pretty easy. Without some example code, I would have a hard time giving you an example, but Google has nice one on the docs.
You should check out Dojo. It looks like it'd be pretty easy for you to do, just plot the bottom line with the same fill color as the background. That should get you the effect you're going for.
http://dojocampus.org/explorer/#Dojox_Charting_2D
I'd use open flash chart, you just have to create a JSON with the data and then you've to all the flashy coolness in your page....
http://teethgrinder.co.uk/open-flash-chart-2/