Using amCharts in Ruby on Rails
- by Dexter
I have followed this tutorial in order to use amChart and it worked with no problems , now I am trying to generate a chart with amCharts to show each user and the sign in count but i cant make it work because it not getting the data correctly, what i am missing here ?
how can i show user email and sign_in_count ?
Users_controller.rb
class UsersController < ApplicationController
load_and_authorize_resource
def index
@users = User.all
respond_to do |format|
format.html # index.html.erb
format.json { render :json => @users }
end
end
def show
@user = User.find(params[:id])
end
def new
@user = User.new
end
def create
@user = User.new(params[:user])
if @user.save
flash[:notice] = 'A new user created successfully.'
redirect_to users_path
else
flash[:error] = 'An error occurred please try again!'
redirect_to users_path
end
end
def edit
@user = User.find(params[:id])
end
def update
@user = User.find(params[:id])
if @user.update_attributes(params[:user])
flash[:notice] = 'Profile updated'
redirect_to users_path
else
render 'edit'
end
end
def destroy
@user = User.find(params[:id])
if current_user == (@user)
flash[:error] = "Admin suicide warning: Can't delete yourself."
else
@user.destroy
flash[:notice] = 'User deleted'
redirect_to users_path
end
end
def checkname
if User.where('user_name = ?', params[:user]).count == 0
render :nothing => true, :status => 200
else
render :nothing => true, :status => 409
end
return
end
end
Users_helper.rb
module UsersHelper
def convert_to_amcharts_json(data_array)
data_array.to_json.gsub(/\"text\"/, "text").html_safe
end
end
index.html.erb
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
var chart;
var chartData = <%= convert_to_amcharts_json(@users) %>;
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "email";
// the following two lines makes chart 3D
chart.depth3D = 20;
chart.angle = 30;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 90;
categoryAxis.dashLength = 5;
categoryAxis.gridPosition = "start";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.title = "Most Active users";
valueAxis.dashLength = 5;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.valueField = "sign_in_count";
graph.colorField = "color";
graph.balloonText = "<span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.zoomable = false;
chartCursor.categoryBalloonEnabled = false;
chart.addChartCursor(chartCursor);
// WRITE
chart.write("chartdiv");
});
</script>
