How to escape commas in JSON for read by highchart

Question

I have the following JSON, I want add commas in between the numbers, but when ever I do that the JSON fails. My workign version of the code can be seen in the fiddle link below

FIDDLE I want to change this 11488897 to 11,488,897

Is this possible to do? How can this be done?

thanks for your help

[{
    "name": "",
    "data": ["Totals","Total1 ","Total 2","total 3" ]
}, {
    "name": "Amount1",
    "data": [48353330,38079817,37130929,1957317]
}, {
    "name": "Amount2",
    "data": [11488897,8902674,8814629,497369]
}]

Don't you mean `11,488,897`, or do you have a specific number formatting scheme you're trying to implement? — Rory McCrossan, Mar 22 '16 at 15:54
Why change the underlying data? Hold an int (without commas) and then format the output of this int to include commas, when you output it. — Liam, Mar 22 '16 at 15:54
@RoryMcCrossan You are right i want the json to have it in this format 11,488,897 instead of 11488897 , currently when i add comma by escape it .. doesnt seem to work — user244394, Mar 22 '16 at 16:00

score 4 · Answer 1 · answered Mar 22 '16 at 15:59

4

If you want to preserve commas, you just need to use strings:

"data": ["48,353,330","38,079,817","37,130,929","1,957,317"]

Whether that's a good idea or not is another story. Typically you'd want your JSON returned by the server to include raw (i.e., integer) data, and then just format it however you want when you're actually using it. That way the same RPC endpoint can be used to fetch data for use in a chart or for any other purpose that might arise later on.

answered Mar 22 '16 at 15:59

VoteyDisciple

37,319
5
97
97

I tried that earlier it didnt work you can check in my fddle example.. it seem to fail when i do that. – user244394 Mar 22 '16 at 16:03
2

Looking over your code there you're passing the raw data directly to your chart — the raw data ***must*** be integers. Use the built-in formatting functions in Highcharts to determine how the numbers are presented, and keep just the integers in the JSON. – VoteyDisciple Mar 22 '16 at 16:04
Is it possible to show and example? I am new to highchart -thanks – user244394 Mar 22 '16 at 16:07
1

Googling "highcharts commas separator" readily turned up this answer: http://stackoverflow.com/questions/29209491/highcharts-format-all-numbers-with-comma (which suggests just using the `thousandsSep: ','` property that's built in) – VoteyDisciple Mar 22 '16 at 16:11
here is my updated fiddle is this the right way I add the little bit here https://jsfiddle.net/dev2020/hg1r1mkb/4/ – user244394 Mar 22 '16 at 16:21

score 1 · Answer 2 · answered Mar 22 '16 at 16:03

try this:

var data = [{
    "name": "",
    "data": ["Totals","Total1 ","Total 2","total 3" ]
}, {
    "name": "Amount1",
    "data": [48353330,38079817,37130929,1957317]
}, {
    "name": "Amount2",
    "data": [11488897,8902674,8814629,497369]
}];

data.forEach(function(obj) {
  obj.data = obj.data.map(function(item) {
    if (typeof item == 'number') {
      return item.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    } else {
      return item;
    }
  });
});
alert(JSON.stringify(data, true, 4));

score 1 · Answer 3 · answered Mar 22 '16 at 16:16

1

I don't know if it's cross-browser but if you do this

var number = 11488897;
number = number.toLocaleString('en');

You'll get the number (string) with commas on decimals

answered Mar 22 '16 at 16:16

CalCon

246
2
10

How to escape commas in JSON for read by highchart

3 Answers3