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