How to input plot data into highcharts with rails

Question

i am trying to figure out how to input data values into highcharts. Firstly i have a home object(@home) that has many energies(energy table consists of three columns, namely, consumption, home_id and consumption_date)

This is what i have so far:

<script type="text/javascript">
var chart;
$(function() {
    new Highcharts.Chart({
        chart: {
            renderTo: "consumption_chart",
        },
            title: {
            text: "Consumption - <%= @home.name %>"
        },
        xAxis: {
            type: 'datetime',
        },
        yAxis: {
            title: {
                text: "Power"
            }
        },
        series: [{
            data: <%= @data_set %>
        }]
    });
});
</script>

For the data part i get all the values like this

@data_set = @home.energies.collect{|e| e.consumption_date.utc}.zip(@home.energies.collect{|g| g.consumption})

This returns a nested set of arrays like this:

[[2012-03-02 09:06:00 UTC, 1200], [2012-04-30 00:00:00 UTC, 1145], [2012-04-30 00:00:00 UTC, 1158], [2012-05-31 00:00:00 UTC, 1145]]

Each nested array is just of the form [consumption_date, consumption]. However this does not work(chart does not render any data), please can someone point out my errors and tell me what i am doing incorrectly. thanks

zhongxiao37 · Accepted Answer · 2012-03-02 16:22:03Z

3

Could you try to use lazy-high-chart gem? It's easy and it will save your time when doing this.

https://github.com/michelson/lazy_high_charts

e.g. In controller,

@h = LazyHighCharts::HighChart.new('graph') do |f|
f.options[:chart][:defaultSeriesType] = "area"
f.series(:name=>'John', :data=>[3, 20, 3, 5, 4, 10, 12 ,3, 5,6,7,7,80,9,9])
f.series(:name=>'Jane', :data=> [1, 3, 4, 3, 3, 5, 4,-46,7,8,8,9,9,0,0,9] )
end

In view,

<%= high_chart("my_id", @h) %>

answered Mar 2, 2012 at 16:22

zhongxiao37

9878 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hishalv Over a year ago

thanks, this is perfect, makes plotting charts way easier and much more cleaner, saved me lots of time and frustration.

Hishalv Over a year ago

when my chart renders and hover my cursor over the data points it says "invalid date". So i tried to use this(Date.parse()) in my controller: @data_set = @home.energies.collect{|e| Date.parse(e.consumption_date)}.zip(@home.energies.collect{|g| g.consumption}) the data that gets rendered is like this [[Sat, 31 Dec 2011, 1200]] . How do i get it in the right format. Thanks for your help.

zhongxiao37 Over a year ago

I guess it's caused by the zip info in your datetime. Could you try to remove the zip info in your code? I will check it tomorrow and give you a feedback later after I found the solution.

zhongxiao37 Over a year ago

@Hishalv In my own codes, I insert the date, as string, into one array, and show it as normal categories (instead of 'datetime' type). e.g. @date << t.date.strftime("%m/%d") f.options[:xAxis] = {:categories => @date}

Collectives™ on Stack Overflow

How to input plot data into highcharts with rails

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related