How to populate a Highcharts axis with string formatted data from a PHP array

Question

I'm trying to convert a php array of items to labels for a Highcharts X-axis. The default example is:

categories: ['Jan','Feb','Mar','Apr', 'May', 'Jun', 
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

So I have a PHP array ($items) and end up with a Javascript array (var items). Firebug outputs the following:

console.log(items);
["item1_10_20", "item2_2011_10_14", "item3_2011_10_07", "item3_2011_09_12"]

I can see that I should have single quotes, instead. How can I do that? Or maybe I should feed Highcharts with a comma and single-quoted separated string instead? How do I do either?

EDIT

I've tried this, but no luck at all!

in my view file I have a javascript script:

var items = "'<? echo join("','", $items) ?>'"; // Note the enclosing single quotes

And in the Highcharts JS file:

xAxis: {
 categories: [items]
},

The whole array is placed in the first value of the x-axis and the rest of the values are blank. The item variable is shown in firebug:

'item1_2011_10_20','item2_2011_10_14','item3_2011_10_07','item4_2x1_2011_09_12'

How weird is this not working?

EDIT

When using json_encode to format the php array, I still can't get highcharts to recognize the array. If I manually copy and hardcode the array with single quotes, it works. But I really need to pass the array from php to highcharts' js via variables.

Here's the resulting x-axis with an array via json_encode: Chart with bad x-axis

Is there a reason why you can't print the PHP array out into the middle of the JS array? Ex. categories: ['<? echo join("','", $items); ?>'] — user962158
– user962158, Commented Oct 22, 2011 at 1:07
I've tried that first, but declaring a variable and passing it to javascript. In my case, the PHP in a view file and the JS runs in another file. this way, thought, Highcharts placed the whole array as the first item in the x-axis. The rest of the axis values remain blank. — Landitus
– Landitus, Commented Oct 22, 2011 at 1:13

Bhesh Gurung · Accepted Answer · 2011-10-25 21:43:18Z

5

The following is already an array -

["item1_10_20", "item2_2011_10_14", "item3_2011_10_07", "item3_2011_09_12"]

so, change the following

xAxis: {
    categories: [items]
},

as follows -

xAxis: {
    categories: items
},

Update:

xAxis: {
    categories: eval('(' + items + ')')
},

Update2:

One thing you need to know here is that JSON is not Javascript. You get get JSON reponse from server which is nothing more than a string in Javascript. So, to use that JSON response in Javascript you have to parse the JSON to form a Javascript data structure like object, array, etc (Just like we do with XMl), which is called parsing.

There are a lot of JSON parsing libraries, but we can also use eval JS function to do the job, as long as security is not a concern.

And in your case, the JSON response represents an array so you use eval to turn that into a real Javascript array.

So, items is JSON and you use eval (eval('(' + items + ')')) to parse which returns a Javascript array and then you assign the result to categories.

edited Oct 25, 2011 at 21:43

answered Oct 23, 2011 at 15:07

Bhesh Gurung

51.1k23 gold badges96 silver badges147 bronze badges

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

3 Comments

Landitus Over a year ago

That array is generated via php and json_enconde. The result is still not liked by highcharts, I will post a screenshot above.

Landitus Over a year ago

Thanks Bhesh!! Do you care to explain what exactly changed with this 'eval'?

Bhesh Gurung Over a year ago

@Landitus: You are welcome. See the update for the explanation.

Marco · Accepted Answer · 2014-06-09 14:53:01Z

1

I had the same problem with a c# array, I solve in this way with razor :

@{
    string[] myIntArray = new string[5] {"Apples", "Oranges", "Pears", "Grapes", "Bananas" };
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    var jsVariable = serializer.Serialize(myIntArray);  
}


xAxis: {
    categories: @Html.Raw(jsVariable)
 },

answered Jun 9, 2014 at 14:53

Marco

863 bronze badges

Collectives™ on Stack Overflow

How to populate a Highcharts axis with string formatted data from a PHP array

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related