How to make Javascript output brackets for an Array of Arrays. (For Highcharts)

Question

Hi I'm using highcharts and I'm trying to create an array of arrays on the fly to feed to the chart.

I figured out how to make the array of arrays but the output format is not what highcharts wants to be fed.

I'm trying to generate an array on the fly where the output will be:

[[10, 3500], [11, 3400], [12, 3300], [13, 3200], [14, 3100], [15, 3000], [16, 2900], [17, 2800], [18, 2700], [19, 2600], [20, 2500]]

BUT what I get is this:

10,3500,11,3400,12,3300,13,3200,14,3100,15,3000,16,2900,17,2800,18,2700,19,2600,20,2500

How do you get Javascript to output the brackets so the format will be correct?

<html>
<head>

  Max Price: <input id="max_price_input" type="number" value=3500><br>
  Min Price: <input id="min_price_input" type="number" value=2500><br>
  Max People: <input id="max_people_input" type="number" value=20><br>
  Min People: <input id="min_people_input" type="number" value=10><br>


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>

chart = void 0;

$(document).ready(function() {
    var max_price, min_price, max_people, min_people, chart;
    max_price=document.getElementById("max_price_input").value;
    min_price=document.getElementById("min_price_input").value;
    max_people=document.getElementById("max_people_input").value;
    min_people=document.getElementById("min_people_input").value;

    var price_change = max_price - min_price;
    var steps = max_people - min_people;
    var price_step = price_change*1.0/steps;
    var price = max_price;
    var people = 10;
    var priceArray = [];

        for (var i=0;i<=steps;i++)
    { 
        priceArray[i] = [];
                priceArray[i][0] = [people, price];
        price-=price_step;
        people+=1
    }

document.getElementById("price_steps").innerHTML=priceArray

  return chart = new Highcharts.Chart({

    chart: {
      renderTo: "chart",
      type: "spline"
    },
    title: {
      text: "Dynamic Price Chart"
    },
    xAxis: {
      title: {
        text: "People"
      }
    },
    yAxis: {
      plotLines: [
        {
          color: "#FF0000",
          width: 2,
          value: 0
        }
      ],
      title: {
        text: "Price"
      }
    },
    tooltip: {
      formatter: function() {
        return "People: " + this.x + "<br/> Price: " + this.y;
      }
    },
    series: [
      {
        name: "Price",
        data: priceArray
      }
    ]
  });
});

</script>

Evan Trimboli · Accepted Answer · 2012-11-05 00:05:22Z

2

You're creating the array incorrectly:

// [[[1, 2]]]
var arr = [];
arr[0] = [];
arr[0][0] = [1, 2];

Instead you want:

for (var i = 0; i <= steps; i++) {
    priceArray[i] = [people, price];
    price -= price_step;
    people += 1
}

There's are a couple of other problems in your code, for example:

Your html elements should go into the body.

This will not show the actual value:

document.getElementById("price_steps").innerHTML=priceArray

Instead, try:

JSON.stringify(priceArray);

edited Nov 5, 2012 at 0:05

answered Nov 4, 2012 at 23:59

Evan Trimboli

30.1k5 gold badges49 silver badges68 bronze badges

also good time to learn how to use browser console to look at things like arrays. console.log(priceArray) and look at what you are creating in a browser console F12 in most browsers ( Firefox best to install Firebug first)

charlietfl
– charlietfl

11/05/2012 01:23:59
Commented Nov 5, 2012 at 1:23
Thanks! the problem was that the first time max_price got called it showed as a string which made the whole array not work for highcharts. Once I got to view the output with JSON that became clear and I add parseInt(max_price); and then it worked.

Elan P
– Elan P

11/05/2012 11:49:00
Commented Nov 5, 2012 at 11:49

Add a comment |

Collectives™ on Stack Overflow

How to make Javascript output brackets for an Array of Arrays. (For Highcharts)

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related