Lazy HighCharts和加载Json数据

时间:2014-07-29 00:14:28

标签: ruby-on-rails json highcharts lazy-high-charts

我正在使用LazyHighCharts并尝试收集json数据以仅显示最近24小时,但它不显示数据,只显示日期但只显示一次(每小时应该有一个温度)天)。

数据结构

{"status": "ok", "data": [{"2014-06-16 16:00:00": 24.2},{"2014-06-17 12:00:00": 30.2},{"2014-06-18 17:00:00": 42.9}]} etc

控制器

@data = JSON.parse(open(@temperature.url).read)

dates = []
temps = []

@data['data'].each do |data|
 dates << data.keys
 temps << data.values
end 

@graph = LazyHighCharts::HighChart.new('graph') do |f|
 f.chart(:height => '400')
 f.yAxis [:title => {:text => "Temperature", :margin => 20, style: { color: '#333'}}]
 f.series(:pointInterval => 1.hour, :pointStart => 30.day.ago, :type => 'area', :name => '24hrs', :data => [[dates, temps]])
 f.options[:xAxis] = { :minTickInterval => 24 * 3600 * 1000, :type => "datetime", :dateTimeLabelFormats => { day: "%b %e"}, :title => { :text => nil }, :labels => { :enabled => true } }
end

图像

enter image description here

2 个答案:

答案 0 :(得分:1)

您的日期应为时间戳(以毫秒为单位的时间,如12323311000),而不是以下格式:“2014-06-16 16:00:00”所以您需要转换它。

答案 1 :(得分:1)

将datetime对象转换为JS毫秒约定,只需调用

DateTime.now.to_i*1000 

或在你的情况下

def index
  @data = {"status" => "ok", "data" => [{"2014-06-16 16:00:00" => 24.2},{"2014-06-17 12:00:00" => 30.2},{"2014-06-18 17:00:00" => 42.9}]}
  d = []
  @data['data'].each do |data|
    d << [DateTime.parse(data.keys.first).to_i*1000, data.values.first]
  end 

  @chart = LazyHighCharts::HighChart.new('chart') do |f|
    f.chart(:height => '400')
    f.yAxis [:title => {:text => "Temperature", :margin => 20, style: { color: '#333'}}]
    f.xAxis(type: 'datetime')
    f.series(:type => 'area', :name => '24hrs', :data => d)
  end
end