CODEWITHSUNDEEP
javascriptruby-on-railsrubyhighcharts
Toshi
Toshi

Reputation: 1303

How to achieve Time series, zoomable highcharts on ruby

I'd like to achieve time series, zoomable highcharts,like following picture, on ruby. http://www.highcharts.com/demo/line-time-series enter image description here

I've achieved the following line chart using lazy_high_charts However I have no idea how to get the time series chart. Could you tell me how to solve the problem?

def show
  @graph = LazyHighCharts::HighChart.new('graph') do |f|
    f.title(text: 'A/B Price')
    f.xAxis(categories: @date_array)
    f.plotOptions(line: {marker: {enabled: false}})
    f.series(name: 'A/B', data: @rate_array)
  end
end

enter image description here

Upvotes: 0

Views: 796

Answers (3)

Paweł Fus
Paweł Fus

Reputation: 45079

Two things:

1) f.xAxis(categories: @date_array) - creates an array of categories, while you need f.xAxis(:type=> "datetime") instead. Also, @rate_array should be an array of arrays, like this: 

[ [date_1, value_1], [date_2, value_2], ... ]

2) Change type from line to area, for example: 

f.series(:type=> "area", :name=> 'A/B', :data=> @rate_array)

Upvotes: 1

Toshi
Toshi

Reputation: 1303

By writing as following, I've got the chart like attached picture.

@graph = LazyHighCharts::HighChart.new('graph') do |f|
  f.title(text: 'A/B')
  f.xAxis(categories: @date_array)
  f.yAxis(title: {text: 'Exchange rate'})
  f.chart(
    type: "area",
    zoomType: 'x'
  )
  f.plotOptions(
    area: {
        fillColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
              [0, "rgb(255, 255, 255)"],
              [1, "rgb(240, 240, 255)"]
            ]
        },
        marker: {
            radius: 1
        },
        lineWidth: 1,
        states: {
            hover: {
                lineWidth: 1
            }
        },
        threshold: nil
    }
  )
  f.series(name: 'A/B', data: @rate_array)

enter image description here

Upvotes: 1

spickermann
spickermann

Reputation: 106802

You need to add some area attributes to your plotOptions. A very simple example would be:

f.plotOptions(line:{marker: {enabled: false}}, area: {fillColor: '#000000'})

A more complex example is link on http://www.highcharts.com/demo/line-time-series:

area: {
    fillColor: {
        linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
        },
        stops: [
            [0, Highcharts.getOptions().colors[0]],
            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
        ]
    },
    marker: {
        radius: 2
    },
    lineWidth: 1,
    states: {
        hover: {
            lineWidth: 1
        }
    },
    threshold: null
}

Upvotes: 1

Related Questions