Grafici con HTML5 – SVG – Canvas

by Andrea Dottor 11 February 2013 11:27

chartPer un’applicazione HTML5 che stò realizzando mi sono trovato a dovermi appoggiare ad una libreria esterna che si occupasse di renderizzare dei grafici.
Librerie ne esistono moltissime, con differenti modalità di utilizzo ed effetti grafici
(ecco un post che ne elenca parecchie:
http://my.opera.com/tagawa/blog/list-of-javascript-charting-libraries).

Nel mio caso ho utilizzato Kendo UI della Telerik.
La libreria in questione è veramente di facile utilizzo, poche righe di codice e l’effetto è veramente ottimo.

Problema: alcuni dispositivi non renderizzano questi grafici.

Indago sulla cosa e mi accorgo che la libreria in questione (come molte altre) utilizza SVG per la renderizzazione dei grafici e non tutti i browser supportano tale oggetto.
Per risolvere la cosa ho trovato in rete un convertitore da SVG a Canvas, che mi ha permesso di risolvere la cosa.
Ecco qui la soluzione, che potrà tornar utile anche ad alcuni di voi:
http://www.kendoui.com/blogs/teamblog/posts/12-02-17/using_svg_on_android_2_x_and_kendo_ui_dataviz.aspx
La libreria è canvg: http://code.google.com/p/canvg/

Per rilevare se un browser supporta SVG, questa è la funzione che ho utilizzato.
(ritorna True se il browser supporta SVG)

function testSvg() {
  return !!document.createElementNS && 
              !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;
}

In alternativa potete utilizzare librerie come Modernizr http://modernizr.com/

Tags:

ASP .NET | Android | JavaScript

Comments are closed