Array for Highcharts:

Question

I just play around with Highcharts (http://www.highcharts.com) inside of a test app based on rails 3.1.1 and HAML. I'm still new to js and I try to accomplish a nice integration of highcharts.

In my controller I set up some json arrays for usage in highcharts.

@category_ids_json = Category.all(:conditions => { :income => false},:select => "id").to_json
@categories_json = Category.all(:conditions => { :income => false}, :select => "id,title,income").to_json
@transactions_json = Transaction.all(:select => "date,title,amount,category_id").to_json

Out of these instance variables, I filter some values and create a new array, which i use for the highcharts data array:

var category_transactions_sum = new Array();
category_transactions_sum.push({title:categories[c].title, amount: transactions_sum})

The content of the array looks somehting like this:

[{title: "Salary", amount: 50},{title: "Food", amount: 25},{title: "Recreation", amount: 10}]

Now I'm stuck when it is time to initialize Highcharts. This is how I initialize it right now:

$(document).ready(function() {
 chart = new Highcharts.Chart({
    chart: {
       renderTo: 'container'
    },
     series: [{
       type: 'pie',
       name: 'Expenses',
       data: [
          [category_transactions_sum[0].title, category_transactions_sum[0].amount],
          [category_transactions_sum[1].title, category_transactions_sum[1].amount],
          [category_transactions_sum[2].title, category_transactions_sum[2].amount],
          [category_transactions_sum[3].title, category_transactions_sum[3].amount],
          [category_transactions_sum[4].title, category_transactions_sum[4].amount],
          [category_transactions_sum[5].title, category_transactions_sum[5].amount],
          [category_transactions_sum[6].title, category_transactions_sum[6].amount],
          [category_transactions_sum[7].title, category_transactions_sum[7].amount],
          [category_transactions_sum[8].title, category_transactions_sum[8].amount],
          [category_transactions_sum[9].title, category_transactions_sum[9].amount],
          [category_transactions_sum[10].title, category_transactions_sum[10].amount],
          [category_transactions_sum[11].title, category_transactions_sum[11].amount],
          [category_transactions_sum[12].title, category_transactions_sum[12].amount],
          [category_transactions_sum[13].title, category_transactions_sum[13].amount],
          [category_transactions_sum[14].title, category_transactions_sum[14].amount],
          [category_transactions_sum[15].title, category_transactions_sum[15].amount],
          [category_transactions_sum[16].title, category_transactions_sum[16].amount],
          [category_transactions_sum[17].title, category_transactions_sum[17].amount],
          [category_transactions_sum[18].title, category_transactions_sum[18].amount],
          [category_transactions_sum[19].title, category_transactions_sum[19].amount],
          [category_transactions_sum[20].title, category_transactions_sum[20].amount],
          [category_transactions_sum[21].title, category_transactions_sum[21].amount],
          [category_transactions_sum[22].title, category_transactions_sum[22].amount],
          [category_transactions_sum[23].title, category_transactions_sum[23].amount],
          [category_transactions_sum[24].title, category_transactions_sum[24].amount],
          [category_transactions_sum[25].title, category_transactions_sum[25].amount],
          [category_transactions_sum[26].title, category_transactions_sum[26].amount],
       ]
    }]
 });

My Questions:

1. How would i iterate through the category_transactions_sum array to get rid of that bunch of lines inside of the "data" declaration of highcharts. I tried a for loop but it didn't work.

2. Is there a better way to insert the data into highcharts? Highcharts needs data in this format:

   data: [ ['Firefox', 45.0], ['IE', 26.8], ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ]

Is it possible to do something like this?

data: [
  myArrayWithPreparedData
]

If yes, how would i build this array?

Many thanks for helping a newbie out.

Answer 1

you can try this (works for me):

temp = $.map(json, function(i) { return [[i.in_time, i.status]]; })         
showData = JSON.parse(JSON.stringify(temp, null, ""));

and then use in the series as :

chart.addSeries({
    data: showData
}); 

Answer 2

Alex almost has it.

Should be:

someVar = [{title: "Salary", amount: 50},{title: "Food", amount: 25},{title: "Recreation", amount: 10}]
data = $.map(someVar, function(i) { return [[i.title, i.amount]]; })
$(document).ready(function() {
 chart = new Highcharts.Chart({
    chart: {
       renderTo: 'container'
    },
     series: [{
       type: 'pie',
       name: 'Expenses',
       data: data
    }]
 });

Answer 3

I believe you want something like this:

data: $.map(category_transactions_sum, function(i, c) { return [c.title, c.amount]; })