Určitě mnozí z vás přemýšlí, jak nejlépe reprezentovat data ve své aplikaci. Samozřejmě můžete vypisovat jednoduchou tabulku, která bude jednotlivé záznamy z databáze reprezentovat. Tohle ale bylo „cool“ asi tak 5 let zpátky, když jsme ani jinou možnost neměli. Nyní máme.
Díky Googlu Visualization API (dále již GVA) nyní máme možnost reprezentovat data z databáze v grafu, který se vykresluje v reálném čase. Tedy pomocí jednoduchého javascriptu můžeme vykreslovat grafy, jako je tento.
O tom jak používat GCA se můžeme dočíst zde. Je to velice jednoduché a používání těchto krásných grafů zvládne opravdu každý.
Nebyla by to ovšem Rails komunita, kdyby používání GVA ještě nezjednodušila. Jeremy Oliver napsal krásný plugin gvis, který nám používání GVA zjednoduší a navíc nám umožní používat ruby objekty jako zdroje dat pro naše grafy.
Nejprve musíme samozřejmě do naší aplikace stáhnout z githubu samotný plugin.
script/plugin install git://github.com/jeremyolliver/gvis.git
Do application_helper.rb doplníme řádek, který nám umožní volat v každém view metody, které grafy kreslí
include GoogleVisualization
Poté si musíme do našeho layoutu, který používáme ve všech našich stránkách přidat následující
<html>
<head>
<title>Test app</title>
<%= include_visualization_api %>
<%= render_visualizations %>
<%= yield :head %>
</head>
<body>
<%= yield %>
</body>
</html>
Takle by tedy mělo vypadat naše application.html.erb a již můžeme začít vykreslovat grafy
kdekoliv ve view teď můžeme zavolat něco takového
<h1>Area Chart</h1>
<% chart_data = [
['2004',599,1000],["2005",700,1200],["2006",400,200]
] %>
<% visualization "chart_id", "AreaChart", :width => 400, :height => 300,
:html => {:class => "graph_class"} do |chart| %>
<% chart.string "Year" %>
<% chart.number "Sales" %>
<% chart.number "Expenses" %>
<% chart.add_rows(chart_data) %>
<% end %>
A výsledkem nám bude tento krásný graf. Samozřejmě by se data měli připravovat v contolleru ale pro demonstrační účely jsem je zařadil do view.
Doufám, že začnete toto super API používat a třeba i tento plugin, který vám zjednoduší práci s grafy
Test
Přečteno 20 642×
Přečteno 17 079×
Přečteno 9 823×
Přečteno 8 152×
Přečteno 8 138×