I have a rails app that displays both a bar chart and a line chart for the
same data on one page. when starting my rails server using c-ruby (cmd
prompt "rails s") everything works fine in Chrome and Firefox. when I
start my rails app using jruby (cmd prompt jruby -S rails server) all the
views work great in Chrome but the line charts are not displaying in
Firefox. When first coming to the page you can see all my filters are
disabled because no data has been retrieved yet. After retrieving the
data, my bar chart is drawn and the filters for it are enabled. If you
switch tabs to the line chart, filters are populated and if you select a
new value the chart "updates" but no line or data points are seen on the
screen. The scales also adjust depending on what I filter by. Any idea
what is going on?
graph.js
function getData(view) {
var url = document.location.href;
var formData = $('#graphParameterData').getFormValues();
if (view == "Summary"){
$.getJSON(url, {'suite_name':suite}, drawSummaryGraphs);
}
else if (view == "Suites"){
$.getJSON(url, formData, drawSuiteGraphs);
}
else if (view == "Features") {
// old way of getting data $.getJSON(url, {'suite_name':suite},
drawFeatureGraphs);
$.getJSON(url, formData, drawFeatureGraphs);
}
else if (view == "Scenarios") {
$.getJSON(url, formData, drawScenarioGraphs);
}
else {
$.getJSON(url, formData, drawStepGraphs);
}
}
function drawFeatureGraphs(json) {
drawFeatureBarVisualization(json);
drawFeatureLineVisualization(json);
}
features.js
function drawFeatureBarVisualization(d) {
var data = d
// Create and populate the data table.
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Build Date');
dataTable.addColumn('number', 'Duration (milliseconds)');
dataTable.addColumn('string', 'Status');
dataTable.addColumn('string', 'Feature');
dataTable.addColumn({type:'string', role:'tooltip'});
dataTable.addColumn('string', 'Browser');
dataTable.addColumn('string', 'Mobilizer Version');
for(var i=0; i < data.length; i++) {
dataTable.addRow([data[i].build_date+"_"+data[i].build_time,
data[i].duration/1000000, data[i].status, data[i].name,
data[i].duration_converted + "\n hr:min:sec:ms", data[i].browser,
data[i].mobilizer]);
}
var statusBarPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Status',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var browserBarPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'browser1',
'options': {
'filterColumnLabel': 'Browser',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var versionBarPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'version1',
'options': {
'filterColumnLabel': 'Mobilizer Version',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var featureBarPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'featureBarFilter',
'options': {
'filterColumnLabel': 'Feature',
'ui': {
'labelStacking': 'vertical',
'allowNone': false,
'allowTyping': false,
'allowMultiple': false
},
},
});
// Define a slider control for the 'Build Date' column
var slider = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Build Date',
'ui': {'labelStacking': 'vertical'}
}
});
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart1',
'options': {
'width': 900,
'height': 700,
'tooltip': {'column':4},
'hAxis': {
'slantedText': true,
'title': "Duration (milliseconds)"
},
'vAxis': {
'title': "Run Date"
},
'chartArea': {top: 10, right: 0, bottom: 0}
},
// Configure the barchart to use columns 0 (Build Date/Time Stamp)
and 1 (Duration)
'view': {'columns': [0, 1, 4]}
});
// Create the dashboard.
new
google.visualization.Dashboard(document.getElementById('dashboard')).
bind(statusBarPicker, barChart).
bind(featureBarPicker, [barChart, statusBarPicker]).
bind(slider, barChart).
bind(browserBarPicker, barChart).
bind(versionBarPicker, barChart).
// Draw the dashboard
draw(dataTable);
}
function drawFeatureLineVisualization(d2) {
data3 = d2
// Create and populate the data table.
var dataTable3 = new google.visualization.DataTable();
dataTable3.addColumn('date', 'Build Date');
dataTable3.addColumn('number', 'Duration (milliseconds)');
dataTable3.addColumn('string', 'Status');
dataTable3.addColumn('string', 'Feature');
dataTable3.addColumn({type:'string', role:'tooltip'});
dataTable3.addColumn('string', 'Browser');
dataTable3.addColumn('string', 'Mobilizer Version');
for(var i=0; i < data3.length; i++) {
dataTable3.addRow([new Date(data3[i].runstamp),
data3[i].duration/1000000, data3[i].status, data3[i].name,
data3[i].duration_converted + "\n hr:min:sec:ms", data3[i].browser,
data3[i].mobilizer]);
}
var datePicker = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'suiteRangeFilter',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'slantedText': true}
},
// Display a single series that shows the closing value of the
stock.
// Thus, this view has two columns: the date (axis) and the
stock value (line series).
'chartView': {
'columns': [0, 1]
}
}},
});
var featureLinePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'featureLineFilter',
'options': {
'filterColumnLabel': 'Feature',
'ui': {
'labelStacking': 'vertical',
'allowNone': false,
'allowTyping': false,
'allowMultiple': false
}
},
});
var statusLinePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'statusLineFilter',
'options': {
'filterColumnLabel': 'Status',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var browserLinePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'browser2',
'options': {
'filterColumnLabel': 'Browser',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var versionLinePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'version2',
'options': {
'filterColumnLabel': 'Mobilizer Version',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var lineChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'linechart',
'options': {
'width': 1000,
'height': 700,
'pointSize': 6,
'tooltip': {'column':4},
'hAxis': {
'slantedText': true,
'title': "Run Date"
},
'vAxis':{
'title': "Duration (milliseconds)"
},
'chartArea': {top: 10, right: 0, bottom: 0}
},
// Configure the barchart to use columns 0 (Build Date/Time Stamp)
and 1 (Duration)
'view': {'columns': [0, 1, 4]}
});
// Create the dashboard.
new
google.visualization.Dashboard(document.getElementById('dashboard3')).
bind(statusLinePicker, [lineChart, datePicker]).
bind(featureLinePicker, [lineChart, datePicker, statusLinePicker]).
bind(datePicker, lineChart).
bind(browserLinePicker, lineChart).
bind(versionLinePicker, lineChart).
// Draw the dashboard
draw(dataTable3);
}
features.html.erb
<h1> Feature Performance Charts</h1>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript"
src="http://www.google.com/jsapi";></script>
<script type="text/javascript"
src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<p>
<a href="#featureModal" role="button" class="btn btn-primary"
data-toggle="modal">Get Data</a>
</p>
<!-- Modal information -->
<div id="featureModal" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<%= render 'graph/feature_form' %>
</div>
<!-- tab and graph display code -->
<ul class="nav nav-tabs">
<li class="active"><a href="#barChart" data-toggle="tab">Bar
Chart</a></li>
<li><a href="#lineChart" data-toggle="tab">Line Chart</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="barChart">
<script type="text/javascript">
google.setOnLoadCallback(drawFeatureBarVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="featureBarFilter"></div>
<div id="control1"></div>
<div id="browser1"></div>
<div id="version1"></div>
<div id="control2"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart1"></div>
</td>
</tr>
</table>
</div>
</body>
</div>
<div class="tab-pane" id="lineChart">
<script type="text/javascript">
google.setOnLoadCallback(drawFeatureLineVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard3">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="featureLineFilter"></div>
<div id="statusLineFilter"></div>
<div id="browser2"></div>
<div id="version2"></div>
<div id="suiteRangeFilter"></div>
</td>
<td style='width: 600px'>
<div id="linechart"></div>
</td>
</tr>
</table>
</div>
</body>
</div>
</div>
<br />
_feature_form.html.erb
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">x</button>
<h3 id="myModalLabel">Data Retrieval Form</h3>
</div>
<div class="modal-body">
<%= form_tag 'none', :id => 'graphParameterData' do %>
<fieldset>
<div class="field">
<%= label_tag :begin_date, "Begin Date: " %>
<%= select_date(@begin_date, :prefix => "begin_date")%>
</div>
<div class="field">
<%= label_tag :end_date, "End Date: " %>
<%= select_date(Time.now, :prefix => "end_date")%>
</div>
<div class="field">
<%= label_tag "Select a Suite" %>
<%= select_tag
:suite_name,options_from_collection_for_select(@suite_list,"name","display_name")
%>
</div>
</fieldset>
<% end %>
</div>
<div class="modal-footer">
<button class="btn btn-large btn-block btn-success" data-dismiss="modal"
onclick="getData('Features')" type="button">Make It So!</button>
</div>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/eYa_-v-fVSQJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
