Develop your first analytic dashboard in less than 5 min

Let's create a Web Mobile dashboard including:

• A chart for Web Mobile visits per day
• A chart for repartition of visits by Mobile Technology

Understand the application layout

Everything you need to create your charts is located under the app/charts directory.

• charts/dashboards contains the presentation part of your chart - the HTML
• charts/jobs contains your queries to grab the data in backgrounds jobs
• charts/model will help you to mutualize your code, and to define a DSL for your queries. Will see that later.

Create a Web Mobile Dashboard

• Create a new dashboard dashboards/web_mobile.html.erb

# app/charts/dashboards/web_mobile.html.erb

<%= title "Web Mobile", "Sample dashboard dedicated to web mobile usage" %>

• Update the navigation menu by editing dashboards/_dashboard_menu.html.erb

# app/charts/dashboards/_dashboard_menu.html.erb

<ul class="nav bs-sidenav">
	...
	<li><a href="/dashboard/web_mobile">Web Mobile</a></li>
	...
</ul>

• Refresh your browser

Create a job file for our queries

• Create job file jobs/web_mobile_job.rb

# app/charts/jobs/web_mobile_job.rb

class WebMobileJob < DashboardJob

  def visits_per_day
    # We use here standard ActiveRecord queries
    Event.group("collector_tstamp::date").where(dvce_ismobile: true).order("collector_tstamp::date").count
  end

  def visits_per_device_type
    Event.group(:os_manufacturer).where(dvce_ismobile: true).count
  end

end

• Update the dashboard web_mobile.html.erb with our charts

# app/charts/dashboards/web_mobile.html.erb

<%= title "Web Mobile", "Sample dashboard dedicated to web mobile usage" %>

<%= area_chart :web_mobile, :visits_per_day %>

<%= table_chart :web_mobile, :visits_per_device_type %>

• Refresh your browser

Customize the presentation

• Use Google Charts Options

# app/charts/dashboards/web_mobile.html.erb

<%= area_chart :web_mobile, :visits_per_day, { colors: "green" } %>

• Define the dashboard layout with Twitter Bootstrap grid system

# app/charts/dashboards/web_mobile.html.erb

<%= title "Web Mobile", "Sample dashboard dedicated to web mobile usage" %>

<%= area_chart :web_mobile, :visits_per_day, { colors: ["green"] } %>

<div class="row">
	<div class="col-md-6">
		<%= pie_chart :web_mobile, :visits_per_device_type %>
	</div>
	<div class="col-md-6">
		<%= table_chart :web_mobile, :visits_per_device_type %>
	</div>
</div>

• Refresh your browser

Easy !

To be documented asap:

• Supported charts
• Jobs refresh scheduling