Using link to change source data of another chart

0 views
Skip to first unread message

andy_c

unread,
Aug 25, 2009, 12:57:45 PM8/25/09
to ZiYa Plugin
Hello,

I am having trouble getting a link to work with some javascript in
ZiYa. Basically what I envision is there will be 5 links on a chart
and if the user clicks these links it will change the source data for
another chart. I was trying to do this using a javascript. Below is
what I have so far:

views folder
_chart.html.erb file:
#######################################################
<center>
<div class="charts">
<div class="chart">
<%= ziya_chart load_chart_url, :id => 'test_chart', :size =>
'1000x550' %>
</div>

<div class="chart">
<%= ziya_chart load_chart_2_url, :id => 'test_chart_2', :size =>
'1000x550' %>
</div>
</div>
</center>
#######################################################

index.html.erb file:
#######################################################
<div id="workspace">
<center>
<%= render :partial => "chart" -%>
</center>
</div>
#######################################################


themes folder -> default folder
floating_bar_chart.yml (ignoring how the spacing appears wrong here,
it is correct)
#######################################################
<%= chart :floating_bar %>

<%=comp :axis_category %>
size: 10

<%=comp :axis_value %>
steps: <%= options[:axis_value_steps] %>
size: 10
max: 1440

<%=comp :chart_rect %>
x: 55
y: 0
height: 500
width: 750

<%=comp :chart_guide %>
# line appearance
alpha: 75
color: ff4400
thickness: 2
horizontal: false
vertical: true
type: dashed
# circle appearance
radius: 8
line_color: ff4400
line_alpha: 75
line_thickness: 4
#text appearance
size: 20
text_color: ffffff
background_color: ff4400
text_h_alpha: 90
text_v_alpha: 90

<%=comp :chart_transition %>
type: dissolve
duration: 2

<%=comp :scroll %>
x: 0
y: 0
width: 20
height: 500
start: 0
span: 100
url_button_1_idle: default
url_button_2_idle: default
url_slider_body: default
url_slider_handle_1: default
url_slider_handle_2: default

<%=comp :chart_type %>

<%=comp :draw %>
components:
- <%= drawing :rect %>
x: 875
y: 25
height: 20
width: 60
transition: dissolve
- <%= drawing :text %>
x: 883
y: 28
height: 20
width: 60
transition: dissolve
color: ffffff
text: 'Zoom In'
size: 10
- <%= drawing :rect %>
x: 875
y: 50
height: 20
width: 60
transition: dissolve
- <%= drawing :text %>
x: 880
y: 53
height: 20
width: 60
transition: dissolve
color: ffffff
text: 'Zoom Out'
size: 10
- <%= drawing :rect %>
x: 825
y: 50
height: 20
width: 40
transition: dissolve
- <%= drawing :text %>
x: 829
y: 53
height: 20
width: 40
transition: dissolve
color: ffffff
text: 'Tasks'
size: 10

<%=comp :link %>
areas:
- <%=area :area %>
x: 875
y: 25
width: 60
height: 20
target: scroll
url: 'start=33&span=33'
tooltip: 'This will zoom in'
- <%=area :area %>
x: 875
y: 50
width: 60
height: 20
target: scroll
url: 'start=0&span=100'
tooltip: 'This will zoom out'
- <%=area :area %>
x: 825
y: 50
width: 40
height: 20
url: 'javascript:alert('Test')' #<--------- Trying to use
javascript
tooltip: 'Testing out link'

<%=comp :update %>
delay: 5
mode: data
url: <%=options[:url]%>

<%=comp :chart_label %>
position: cursor

<%=comp :filter %>

<%=comp :legend %>

<%=comp :series_color %>
#######################################################


Also the data for the graph is being generated in the controller. How
do I have the javascript change which set of data is being used for
the graph when this data is being generated in the controller?
Currently this data is randomly being generated and the first chart
updates every 5 seconds to show the changes. Below is the controller
code if needed (the second chart currently uses the same data as the
first chart):


blee_controller.rb
#######################################################
class BleeController < ApplicationController
# Load ZiYa necessary helpers
helper Ziya::HtmlHelpers::Charts
helper Ziya::YamlHelpers::Charts

def index
end

def load_charts
render :update do |page|
page.replace_html :chart_type, @title
page.replace_html :workspace, :partial => "chart"
end
end

# Callback from the flash movie to get the chart's data
def load_chart
gen_data_2

# Chart will be rendered using the default look and feel
chart = Ziya::Charts::FloatingBar.new()

# Data setup
chart.add :axis_category_text, @@cat
chart.add :axis_value_label, @@axis_value_text
chart.add :series, "stop", @@stop_value_label
chart.add :series, "start", @@start_value_label
chart.add :user_data, :axis_value_steps, @@axis_value_text.length
- 1
chart.add :user_data, :url, update_chart_url

respond_to do |fmt|
fmt.xml { render :xml => chart.to_xml }
end
end

def load_chart_2
# Chart will be rendered using the default look and feel
chart = Ziya::Charts::FloatingBar.new()

# Data setup
chart.add :axis_category_text, @@cat
chart.add :axis_value_label, @@axis_value_text
chart.add :series, "stop", @@stop_value_label
chart.add :series, "start", @@start_value_label
chart.add :user_data, :axis_value_steps, @@axis_value_text.length
- 1
chart.add :theme , "alternate"

respond_to do |fmt|
fmt.xml { render :xml => chart.to_xml }
end
end

def update_chart
gen_data_2
chart = Ziya::Charts::FloatingBar.new()
chart.add :axis_category_text, @@cat
chart.add :axis_value_label, @@axis_value_text
chart.add :series, "stop", @@stop_value_label
chart.add :series, "start", @@start_value_label
chart.add :user_data, :axis_value_steps, @@axis_value_text.length
- 1
chart.add :user_data, :url, update_chart_url

respond_to do |fmt|
fmt.xml { render :xml => chart.to_xml }
end
end



def gen_data_2

@@axis_value_text = [ "12\ram" ]
(1..11).each { |i| @@axis_value_text << i }
@@axis_value_text << "12\rpm"
(1..11).each { |i| @@axis_value_text << i }
@@axis_value_text << "12\ram"

@@cat = Array.new
@@items_array = Array.new
@@stop_value_label = Array.new
@@start_value_label = Array.new

for i in 1..5

task_array = Array.new

for j in 1..20
rand_num1 = rand(1440)
rand_num2 = rand(1440)
if rand_num1 == rand_num2
hi = rand_num1 + 1
lo = rand_num2
elsif rand_num1 < rand_num2
hi = rand_num2
lo = rand_num1
else
hi = rand_num1
lo = rand_num2
end

task = Task.new("Task " + j.to_s, lo, hi)

task_array << task

end

item = Item.new("IT" + i.to_s)

item.set_tasks(task_array)

@@cat << item.name

@@items_array << item

end

for i in 1..@@items_array.length

item_stop_time = @@items_array[i-1].stop_time
item_start_time = @@items_array[i-1].start_time

item_stop_time_min = (item_stop_time%60).to_s
item_start_time_min = (item_start_time%60).to_s

if item_stop_time%60 < 10
item_stop_time_min = "0" + item_stop_time_min
end

if item_start_time%60 < 10
item_start_time_min = "0" + item_start_time_min
end

item_stop_time_convert = (item_stop_time/60).floor.to_s + ":" +
item_stop_time_min
item_start_time_convert = (item_start_time/60).floor.to_s + ":"
+ item_start_time_min

@@stop_value_label << {:value =>item_stop_time, :label =>
item_stop_time_convert}
@@start_value_label << {:value => item_start_time, :label =>
item_start_time_convert}

end

end

end

class Item
attr_accessor :name
attr_reader :num_tasks, :start_time, :stop_time, :task_array

def initialize(name)
@name = name
end

def set_tasks(task_array)
@task_array = task_array
@num_tasks = @task_array.length

for i in 0..@num_tasks-1
if i == 0
@start_time = @task_array[i].start_time
@stop_time = @task_array[i].stop_time
end

if @start_time > @task_array[i].start_time
@start_time = @task_array[i].start_time
end

if @stop_time < @task_array[i].stop_time
@stop_time = @task_array[i].stop_time
end

end
end

end



class Task
attr_accessor :name
attr_accessor :start_time, :stop_time

def initialize(name, start_time, stop_time)
@name = name
@start_time = start_time
@stop_time = stop_time
end
end
#######################################################

Thanks

andy_c

unread,
Aug 25, 2009, 1:23:00 PM8/25/09
to ZiYa Plugin
Oops, I realized I did not put double quotes in the javascript alert
call. Original= url: 'javascript:alert('Test')' Correct= url:
'javascript:alert("Test")'

However I am still a bit puzzled how to have the javascript change
which set of data is being used for the graph when this data is being
generated in the controller?

Thanks.

andy_c

unread,
Aug 25, 2009, 3:21:27 PM8/25/09
to ZiYa Plugin
I think I figured this out. Sorry to waste any one's time. One
question though, I can pass an array from the controller to the style
sheet or does it have to be a hash? Thanks.
> ...
>
> read more »

Fernand Galiana

unread,
Aug 25, 2009, 4:47:53 PM8/25/09
to ziya-...@googlegroups.com
Hi Andy,

  Assumed you saw this link http://www.maani.us/xml_charts/index.php?menu=Reference&submenu=Javascript_to_Flash

  You can pass whatever object you want in the user_data directive.

-Fernand

andy_c

unread,
Aug 25, 2009, 6:52:12 PM8/25/09
to ZiYa Plugin
I having issues with passing an array to the style sheet. I do not
know how to access the individual elements of the array. Here is what
I have:

Controller:

chart.add :user_data, :tooltip, @@test_names # test_names is an array
of strings

Style sheet (ignore how the spacing appears here, it is correct in the
yml file)

<%=comp :link %>
areas:
- <%=area :area %>
x: 825
y: 150
width: 40
height: 20
url: 'javascript:update_data_2( )'
tooltip: <%=options[:tooltip[1]]%>

Using <%=options[:tooltip[1]]%> does not seem to work. How do I
access the individual elements?
Thanks.


On Aug 25, 2:47 pm, Fernand Galiana <fernand.gali...@gmail.com> wrote:
> Hi Andy,
>
>   Assumed you saw this linkhttp://www.maani.us/xml_charts/index.php?menu=Reference&submenu=Javas...
>
>   You can pass whatever object you want in the user_data directive.
>
> -Fernand
>
> ...
>
> read more »

Fernand Galiana

unread,
Aug 25, 2009, 7:11:09 PM8/25/09
to ziya-...@googlegroups.com
You mean options[:tooltip][1] ?

andy_c

unread,
Aug 26, 2009, 12:37:59 PM8/26/09
to ZiYa Plugin
Oops, I feel stupid. I misplaced the brackets. Thanks so much!

On Aug 25, 5:11 pm, Fernand Galiana <fernand.gali...@gmail.com> wrote:
> You mean options[:tooltip][1] ?
>
> ...
>
> read more »
Reply all
Reply to author
Forward
0 new messages