Highcharts how to use JavaScript variable as series data source?

Question

I am running an asp.net code-behind that creates a string variable which holds a collection of floats separated by commas. Something like this in C#

string myCString = "4.5, 3.1, 6.5, 7.0, -1.3";

This variable then makes it into the an asp.net web page where it is assigned to a JavaScript variable:

var myJString = '<%=myCString %>';

Now we enter Highcharts where the syntax for a normal series looks like this:

series: [{
     name: 'Series1',
     data: [1.1, 3.8, 5.3, 9.8, 5.0]
       }]

What I would like to do is assign myJString to the data field of the series. I have tried two approaches and both did not work. The solution is probably trivial but I am far from even being an enthusiast programmer. It looks like the core of the problem is that Highcharts expects an array of numbers rather than a string. However, my understanding of the square brackets in JavaScript was that they convert whatever is within to a string?

Here is what did NOT work:

series: [{
     name: 'Series1',
     data: myJString    // does not work
       }]

series: [{
     name: 'Series1',
     data: myJString - 0    // does not work either
       }]

The second try was from highcharts - variable data causes browser lockup in retrospect it makes sense that it didn't work since subtracting 0 from a string that is not just a number falls short of the goal.

It also makes sense that the first try didn't work since it seems to want an array of numbers rather than a string. Now to my actual question(s):

Can I inexpensively convert my string of comma separated floats in JavaScript so I can use it in the data field, and if so, how do I do that? Would it be better (performance wise) to do this in the code-behind and pass an array to JavaScript and then try the whole thing with an array? This is assuming that the myJString not being an array of floats is the actual problem.

Thanks in advance for any insight you may be able to provide.

You have an extraneous comma at the end of each list. Will fail in some browsers. — awm
– awm, Commented Apr 22, 2011 at 1:53
Good eye! ;) That comma is actually a user error artifact by me doing a poor copy&paste job, will edit the original to remove it so others don't get confused. — Reality Extractor
– Reality Extractor, Commented Apr 22, 2011 at 2:15

Justin Ethier · Accepted Answer · 2020-06-08 13:36:58Z

15

Try this:

data: JSON.parse("[" + myJString + "]")

Basically this formats the string's contents as a JSON array. The parse function then de-serializes the string into a JavaScript array.

edited Jun 8, 2020 at 13:36

answered Apr 22, 2011 at 1:53

Justin Ethier

135k53 gold badges235 silver badges290 bronze badges

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

1 Comment

Reality Extractor Over a year ago

this did indeed work, thank you much, you sir are a scholar and a gentleman! Since it is working now there's probably little sense in me trying this out by creating an array server side and then passing it from C# to a JavaScript array avoiding JSON. However, should I attempt this using a server side array I will post back here and update the original question with what I found.

Taryn · Accepted Answer · 2012-06-29 13:47:43Z

6

Since data is a array type, you can use arrays for the values like

myData = [4.5, 3.1, 6.5, 7.0, -1.3];

edited Jun 29, 2012 at 13:47

Taryn

249k57 gold badges374 silver badges409 bronze badges

answered Jun 29, 2012 at 8:13

Rupam Datta

1,8891 gold badge21 silver badges37 bronze badges

Comments

user1373550 · Accepted Answer · 2012-05-03 20:35:41Z

1

another easy approach is using the JavaScript String.split() function, thus.

series: [{ name: 'Series1', data: myJString.split(', ') }]

If you're not sure whether you'll have a space after the comma or not, use RegEx.

series: [{ name: 'Series1', data: myJString.split(/,[\d]*/) }]

answered May 3, 2012 at 20:35

user1373550

Collectives™ on Stack Overflow

Highcharts how to use JavaScript variable as series data source?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related