Jeffrey Phillips
Posts: 56
Joined: Tue Aug 30, 2016 9:32 pm

Labels in Scatter/Bubble Charts (Error #14)

It seems somewhere along the way we've lost the ability to have labeled points in a scatter or bubble chart. My existing charts now fail with error #14 (String value sent to series.data, expected Number!). See https://cloud.highcharts.com/show/ohutoze

Looking at the sample Highcharts, the bubble chart is nicely labeled: https://www.highcharts.com/demo/bubble
Screen Shot 2018-06-08 at 10.42.04 AM.png
Screen Shot 2018-06-08 at 10.42.04 AM.png (71.59 KiB) Viewed 4391 times
But if you open the "edit in Highcharts Cloud" version, there are no labels either in the chart or the tooltips, making the chart mostly useless.
Screen Shot 2018-06-08 at 10.42.48 AM.png
Screen Shot 2018-06-08 at 10.42.48 AM.png (65.96 KiB) Viewed 4391 times
Any suggestions?
sophie
Posts: 22
Joined: Fri Jun 08, 2018 7:22 am

Re: Labels in Scatter/Bubble Charts (Error #14)

Hello!

There is a problem with you dataset, because it has not an optimal structure for the bubble chart. If you put the text column to the first position, it is working. Secondly you have to define the tooltip header yourself in the options:

Code: Select all

  tooltip: {
  	headerFormat: '<b style="font-size: 14px">{point.key}</b><br/>'
  }
Here is your example: https://jsfiddle.net/cst2a0yp/18/

Best regards,
Sophie
Jeffrey Phillips
Posts: 56
Joined: Tue Aug 30, 2016 9:32 pm

Re: Labels in Scatter/Bubble Charts (Error #14)

Can you show me an example of a labeled scatter or bubble chart in Highcharts Cloud (not Fiddle)?

My chart does work when it uses highstock-cloud-5.0.7.js.
http://webberenergygroup.com/hctest/

Something changed between that and (I'm guessing) Highcharts JS v6.1.0 that broke it.
http://webberenergygroup.com/hctest/broken.html
sophie
Posts: 22
Joined: Fri Jun 08, 2018 7:22 am

Re: Labels in Scatter/Bubble Charts (Error #14)

Hi Jeffrey!

I am sorry for the late response.

You can just use the latest version (in your last example) via: https://cloud.highcharts.com/show/upejawu
This one gets automatically updated and use the regular code.highcharts.com files.
A bundle like in the old cloud service does not exist.

The problem in the cloud editor is probably a bug. We will look into this.

Best regards,
Sophie
daniel_s
Posts: 753
Joined: Fri Sep 01, 2017 11:01 am

Re: Labels in Scatter/Bubble Charts (Error #14)

hi Jeffrey,

The last message in this topic could be helpful for you:
https://forum.highcharts.com/highcharts ... 3/#p141394
Please take a look on it.

Best regards!
Daniel Studencki,
Highcharts Developer
Jeffrey Phillips
Posts: 56
Joined: Tue Aug 30, 2016 9:32 pm

Re: Labels in Scatter/Bubble Charts (Error #14)

Which might be fine, until you actually open that chart back in the Cloud editor and it fails again with Error 14.

Really, if I wanted to write code, I'd just do these in D3. But I'm not a coder. Don't make me be a coder.

It used to work. You broke it. You fix it.
cmc
Posts: 10
Joined: Tue May 22, 2018 2:28 am

Re: Labels in Scatter/Bubble Charts (Error #14)

I am also having this problem - all the chart examples linked to don't work in cloud.

TBH cloud has been terrible since it got the new interface.
sophie
Posts: 22
Joined: Fri Jun 08, 2018 7:22 am

Re: Labels in Scatter/Bubble Charts (Error #14)

Hello!

We need more information about your problem. Which chart examples do not work for you? Do you mean our chart demos as https://www.highcharts.com/demo? Do you use browser extensions like ad blocker?

Note: It is not possible to combine older Cloud-based charts (v5) with newer Cloud-based charts (v6) on the same page.

Best regards,
Sophie
Jeffrey Phillips
Posts: 56
Joined: Tue Aug 30, 2016 9:32 pm

Re: Labels in Scatter/Bubble Charts (Error #14)

Hi Sophie
Re-read my first post. Can you generate a bubble or scatter plot with labeled points using HC Cloud? Looking at the demo, the answer appears to be "no."
sophie
Posts: 22
Joined: Fri Jun 08, 2018 7:22 am

Re: Labels in Scatter/Bubble Charts (Error #14)

Hi Jeffrey,

Yes, you can. You have to change you columns order with the label column the first not the last.
The label column has to be the first, not the last.
The label column has to be the first, not the last.
Screen Shot 2018-07-18 at 09.46.34.png (67.77 KiB) Viewed 4194 times
Best regards,
Sophie
Jeffrey Phillips
Posts: 56
Joined: Tue Aug 30, 2016 9:32 pm

Re: Labels in Scatter/Bubble Charts (Error #14)

That's not a scatterplot.
A scatterplot looks like this:
Attachments
Screen Shot 2018-07-18 at 2.43.50 PM.png
Screen Shot 2018-07-18 at 2.43.50 PM.png (49.3 KiB) Viewed 4186 times
sophie
Posts: 22
Joined: Fri Jun 08, 2018 7:22 am

Re: Labels in Scatter/Bubble Charts (Error #14)

Hi Jeffrey,

In this case, you have to use custom code to get the desired visualization. You can use the following custom code or insert your series data directly in the custom options.

Code: Select all

var newSeries = [{data:[]}];
var newData = newSeries[0].data;
var lines = options.data.csv.split('\n');
Highcharts.each(lines, function(line, lineNo) {
    var items = line.split(';');
    newData.push({
      x: parseInt(items[0]),
      y: parseInt(items[1]),
      label: items[2].slice(1, items[2].length-1)
    });
});
delete options.data.csv;
options.series = newSeries;

Highcharts.extend(options, Highcharts.merge(options, {
    // custom options
}));
Preview: https://cloud.highcharts.com/show/uk3pgzme1

Alternative way, that is working in the editor preview as well:

Code: Select all

var labels = [
    "Coal",
    "Coal (IGCC)",
    "Natural Gas Combustion Turbine",
    "Natural Gas Steam Generator",
    "Natural Gas Combined Cycle",
    "Coal (with carbon capture)",
    "Coal (IGCC with carbon capture)",
    "Natural Gas Combined Cycle (with carbon capture)",
    "Solar (CSP)",
    "Nuclear (typ. Gen II)",
    "Nuclear (small modular reactor)",
    "Solar (PV)"
];
Highcharts.extend(options, Highcharts.merge(options, {
    tooltip:{
	formatter: function(){
            return '<b>'+ labels[this.point.index]+'</b>' +
                '<br/>' + this.series.xAxis.userOptions.title.text + ': <b>' + this.x + '</b>'+
                '<br/>' + this.series.yAxis.userOptions.title.text + ': <b>'+ this.y + '</b> ';
        }
    },
    // other custom options
}));
Preview: https://cloud.highcharts.com/show/gnZeB5Kma

Best regards,
Sophie
Jeffrey Phillips
Posts: 56
Joined: Tue Aug 30, 2016 9:32 pm

Re: Labels in Scatter/Bubble Charts (Error #14)

I'm sorry, neither of those preview links seem to be working.
sophie
Posts: 22
Joined: Fri Jun 08, 2018 7:22 am

Re: Labels in Scatter/Bubble Charts (Error #14)

Hi Jeffrey,

I am sorry. I forgot to share it. I replaced the links with the correct ones.

Let me know, if the solution helps you.

Best regards,
Sophie
Jeffrey Phillips
Posts: 56
Joined: Tue Aug 30, 2016 9:32 pm

Re: Labels in Scatter/Bubble Charts (Error #14)

Well, that sort of helps …

But if you open https://cloud.highcharts.com/show/uk3pgzme1 in the HC Cloud editor, you can't preview the chart: it fails with Error #14.
Screen-Shot-2018-07-20-at-12.18.06-PM.gif
Screen-Shot-2018-07-20-at-12.18.06-PM.gif (62.36 KiB) Viewed 4157 times

Return to “Highcharts Cloud”