home
about
archivesTutorial Rails/OFC/Ajax : Alter the chart using Javascript
In a first example I showed how to load a chart using javascript. Here I will show you how to dynamically alter an OFC chart without recreating it. This example is a raw adaptation of this Teethgrinder’s example. The chart is hard coded in ajax code so it is not loaded by OFC rails plugin, this will be done in a next example. Indeed, the aim of all this is at some point to be able to create a chart and then modify it to hide one signal or to zoom in or to change the legend, or etc.
The controller code is simple. Well OK it is even void (as I said the graph is hard coded in the javascript, it gives you opportunity to see how an OFC graph is serialized in json):
class TestItController < ApplicationController
def index_js_4
end
endEverything happens in the view (index_js_4.html.erb) through ajax code and OFC code. I assume you have installed OFC rails plugin. You need 2 more things: the json2 library available here and the ajax code from Teethgrinder available here. Put these 2 js files in your public/javascripts folder.
The view:
<html>
<head>
<%#= javascript_include_tag :defaults, 'swfobject' %>
<script type="text/javascript" src="/javascripts/swfobject.js">
</script>
<script type="text/javascript" src="/javascripts/json2.js">
</script>
<script type="text/javascript" src="/javascripts/tutorial-js.js">
</script>
<script type="text/javascript">
function ofc_ready(){
alert('ofc_ready');
}
function open_flash_chart_data(){
// alert( 'reading data' );
return JSON.stringify(data);
}
function findSWF(movieName){
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
}
else {
return document[movieName];
}
}
var data = {
"elements": [{
"type": "hbar",
"values": [{
"left": 0,
"right": 5
}, {
"left": 0,
"right": 3
}, {
"left": 4,
"right": 8
}, {
"left": 4,
"right": 8
}, {
"left": 4,
"right": 8
}],
"colour": "#AF99DF"
}],
"title": {
"text": "Sat Sep 27 2008"
},
"y_axis": {
"labels": ["Job 1", "Job 2", "Job 3", "Job 4", "Job 5"]
},
"x_axis": {
"offset": false,
"min": 0,
"max": 10
}
};
</script>
<script type="text/javascript">
swfobject.embedSWF("/open-flash-chart.swf", "my_chart", "550", "350", "9.0.0");
</script>
</head>
<body>
Here is the chart:
</p>
<div id="my_chart"></div>
<p>
<a href="javascript:update(data)">Update</a>, <a href="javascript:save(data)">Save</a>
</p>
<br/><br/>
</body>
</html>To understand this example have a look at the js file tutorial-js.js. It contains the update and save functions. It is understandable even by someone like me who does not speak javascript fluently. You can see the live example here.
Posted in Ruby on Rails | no comments | atom
Trackbacks
Use the following link to trackback from your own site:
http://harryseldon.thinkosphere.com/trackbacks?article_id=18
-
I have updated the [ofc test app](http://harryseldon.thinkosphere.com/2008/11/07/a-test-and-example-app-for-open-flash-chart-rails-plugin) with the examples given by [Giovanni](http://ingiroingiro.blogspot.com/). You have: * [A radar chart with it...
