Every tried to use a graphic library with ActiveScaffold and fieldsearch?

Just a quick introduction how you may integrate jqplot Activescaffold and field_search.

Add a new layout which integrates jqplot

...
javascript_include_tag 'jquery.jqplot.min'
javascript_include_tag 'jqplot.highlighter.min'
javascript_include_tag 'jqplot.cursor.min'
javascript_include_tag 'my_chart_statistic'
stylesheet_link_tag 'jquery.jqplot.min'
...

Configure you Controller to disable all actions except field_search and configure field_search as you like:

layout "charts"
...
conf.list.pagination = false

conf.actions.exclude :show
conf.actions.exclude :update
conf.actions.exclude :create
conf.actions.exclude :search
conf.actions < {‘number’ => 1,
‘from’ => ”,
‘to’ => ”,
‘unit’ => “YEARS”,
‘range’ => ‘TODAY’,
‘opt’ => ‘PAST’},
:col2 => {‘opt’ => ‘%?’}
}

Override _list.html.erb view for your controller

<p class="filtered-message-graph" >
'human_conditions', :locals => {:columns => @filtered}) : as_(active_scaffold_config.list.filtered_message) %>

<div id=”my-chart” data-records=””>

 

Configure jqplot to displa your graph (my_chart_statistic.js in javascript dir)

$(document).ready(function(){
var update_chart = function() {
var records = $("#my-chart").data("records");
var bcsPlot = $.jqplot('my-chart', [records],
{
title:'',
axes:{
xaxis:{
label:'col1',
min: 0,
tickOptions: {
showGridline: false
}
},
yaxis:{
label:'col2',
min: 0,
max: 5,
ticks:[1.00, 1.50, 2.00, 2.50, 3.0, 3.50, 4.0, 4.5, 5.0],
tickOptions: {
formatString: '%.2f' // format string to use with the axis tick formatter
}
}
},
highlighter: {
show: true,
tooltipContentEditor: function (str, seriesIndex, pointIndex, plot) {

var col2 = plot.data[seriesIndex][pointIndex][2];
var col3 = plot.data[seriesIndex][pointIndex][3];
var col4 = plot.data[seriesIndex][pointIndex][4];

var html = ”

col2: “;
html += col2;
html += “col3: “;
html += col3;
html += “col4: “;
html += col4;
html += “

“;

return html;
}
},
cursor:{
show: true,
zoom:true
},
// Series options are specified as an array of objects, one object
// for each series.
series:[
{
// Don’t show a line, just show markers.
// Make the markers 7 pixels with an ‘x’ style
showLine:false,
markerOptions: { size: 7, style:”x” }
}
]
}
);
};

update_chart();

$(document).on(‘ajax:complete’, ‘form.as_form’, function(event) {
update_chart();
});

});

Advertisements