Choosing between YUI Charts or Google Visualization API - javascript

I'm a bit stuck with which charting library I will use in my project. Im stuck with this two (but also open for other suggestions)
For YUI Charts :
Pro :
- Very robust and configurable
Cons :
- Uses flash 9 >, which might potentially be inaccessible for users without up to date flash version
- Does not support export to image (for flash versions < 10 only)
For Google Visualization API
pros:
- small file size for the libraries,
- can be exported to static image charts (via separate API call)
Cons
- limited configuration options
So there, please help me decide. YUI charts has the edge over configuration options but Google Visualization API has the edge in terms of accessibility as it uses SVG to render the grapsh instead of Flash. For users that are hand-cuffed by corporate IT prohibitions , they cant just upgrade their Flash version and the page will not work.
Thanks!

I would choose Google's API as it requires only a javascript interpreter or internet access (to Google).
The fewer dependencies, the better. Not to mention there is quite an array of tools for manipulating SVG images.
If you really cannot make do without certain features in YUI or cannot find simpler ways to express your charts, then choose YUI.

You might also want to take a peek at http://www.simile-widgets.org/ It might be overkill / bad fit for your needs, but it is positively sexy.

If you don't want flash for drawing charts in your application it is better to choose
Google Visualization API...
The Google Visualization JavaScript API lets you access structured data and visualize that data using JavaScript in your web pages. The Google Visualization API also enables creation of gadgets.

Related

Fastest JS Library / web library for graphs

I'm basically asking the same question as this guy, but newer: Fastest javascript charting library for really huge data
All the libraries seem to say their the "fastest".
I'm doing this so I can make a mobile application that can show several hundred line charts at the same time, however the way I'm doing it now (With plot.ly express) is so slow sometimes it crashes the phone. They also should support some limited interactivity, like zooming and panning.
Cross posted to: https://softwarerecs.stackexchange.com/questions/84514/fastest-js-library-web-library-for-graphs
I believe that LightningChart is the fastest available. You can see their testing results or try a live test. They also have a huge variety of available charting methods.
You could use the CanvasRenderingContext2D API (no library) if you want the fastest possible drawing (maybe in conjunction with requestAnimationFrame).

showing interactive visualizations on personal website

I have several interactive/animated visualization projects (social network analysis, animated GIS, etc) that I would like to showcase in my website. I would love to build a website like this one https://kateto.net/network-visualization (see 6.2 Interactive JS visualization with visNetwork). Does anyone know where should I start?
Very limited experience with HTML coding and website building so would love to use some website builder tools such as Squarespace or wix, etc. Of course they need to be friendly with a lot of javascript/widgets. Will appreciate your recommendation!
In the same website example you provided, they explained that they are using visNetwork (the r package) & vis.js (used for the visualization).
I highly doubt that website builders such as wix/squarespare/etc would be able to import said libs.
I would recommend just learning web development and make a personal site for your showcase. It'd be a lengthy process however in the long run it'll be worth it.

Questions regarding Google API

Can somebody please answer the question below regarding the Google API for Charts?
1- Is Google Charts API completely independent of any other JS libraries or software like Flash etc?
2- Does it work completely offline (using the new version)?
3- Is it completely free for commercial usage?
Thank you.
The API is dependent on Google's internal libraries (nothing you have to specifically load), but generally not any external libraries. The exceptions are for the AnnotatedTimeLine and Motion charts, which are Flash-based. 3rd-party visualizations may be dependent on other libraries.
You cannot use the API offline. Downloading the API and hosting it locally is strictly forbidden in the Terms of Service.
The API is free for almost all commercial usage, see Terms of Service for details.
The google charts api uses js libraries.
You can't use it offline
your computer must have live access to http://www.google.com/jsapi in order to use charts. This is because the visualization libraries that your page requires are loaded dynamically before you use them. The code for loading the appropriate library is part of the included jsapi script, and is called when you invoke the google.load() method. Our terms of service do not allow you to download the google.load or google.visualization code to use offline.
(https://developers.google.com/chart/interactive/faq#offline)
3 . The api is completly free (https://developers.google.com/chart/terms?hl=nl#license)

Dynamically update graph on webpage

I have a page where i keep getting data from a database periodically. That data is depicted as a graph. At each period, i want to update the graph with new data. Meaning that i dont want to replace the old graph, but extend it. For example,im using a line chart which is currently displaying. When new data comes in, i want the lines in the chart to extend to represent the new data, but the previous lines should remain as-is. Which JavaScript graphing API can provide this functionality ? Is it possible with Google Charts ?
Well, whether you like it or not, you're in the middle of writing a real-time web application process :D
Here are your solutions:
Pure javascript
If you're in the mood of using a library:
I highly recommend using APE library. as I said multiple times before, it's a robust framework for developing real-time web apps.
Another great solution is HTML5's websockets. it's awesome but not cross-browser.
If you're not in the mood of using a library:
You may send an AJAX request to your server periodically to check whether any updates are available for your data or not.
Using third party plugins
The easiest and the most common solution is Adobe Flash's XMLSocket APIs.
You may use Silverlight too, but you know, it doesn't worth it (development time I meant).
EDIT:
Oh, almost forgot to say, this style of programming (updating data without user's interaction/awareness) is called Comet programming, so if you need a keyword to search further on this subject use this one.
I agree with 3p3r, and can elaborate on library implementation.
A topic you may want to keep in mind is Data-Binding.
It is a process commonly employed by MVC systems such as backbone.js.
The notion is that the model(data) is automatically updated into the View when data changes are detected .
Data-Binding is not only available in MVC it is also available in graphing widgets for libraries like ExtJS. Using a library can greatly reduce your maintenance overhead in development and avoid commonly encountered complications.
Other libraries that may easily incorporate a data-binding process are: D3, HighCharts, and Raphael.
All the best!
Nash

Upgrading to v3 from v2 of google maps API, suggestions

I have full fledged integration of google maps version 2 in my web application, with features like get directions, cluster markers, tabbed info window, context menu(right click). The implementation has very poor design which is causing some problem, So now I need to revamp the core implementation to better design. I was thinking of upgrading to version 3 of google maps API. Please suggest, if that's a good thing to do and my all features will be running fine(or I will get replacement for all the features mentioned) in less time. Or should I stick to the version 2 of the google maps API?
I recommend you upgrade to v3. I upgraded my site a few months ago (and blogged about the experience). A few things to keep in mind:
No more API key.
The marker and info window API has changed, for the better.
No more AJAX helper stuff. If you are using GXMLHttp, you will need to swap over to a new AJAX wrapper (Jquery, mootools etc).
Check your lat/lngs are in the right order. GPoint takes x and y (longitude and latitude). v3 has a latlng object, so your params might be backwards.
Styled maps - You will be able to customize your color scheme in v3.
Don't think you can turn on the Google earth plugin in a single line of code like you could in v2 (not 100% on this, so please correct me if I am wrong).
Once you are done, you will be happy to make the change. Pages load faster, zooming is smoother (polyines scale as you zoom instead of disappearing) and the mobile experience is much better.

Categories