Custom code in Highcharts Cloud

[raymundoserrato]

I am having trouble understanding how to use custom code in Highcharts Cloud.

Is it correct to copy the code from the "Generated options" and paste it into the "Custom code" section and add my edits there. I thought this was the case and modified some code in JSFiddle that seemed to work. However, when I paste that code in the "Custom code" section, nothing happens - the chart remains the same.

Am I using the custom code section correctly?

For reference, this is the JSFiddle where the chart works: https://jsfiddle.net/raymserrato/1gLntq8g/

When I use this in the Custom code section of Highcharts the chart simply shows up as normal.

[pawel_d]

Hi raymundoserrato,

You do not have to do that. The 'Custom code' section is a place where you can put custom JavaScript code. Mostly it is used for extending options and behaviour of a chart. For example, below custom code:

Code: Select all

alert('Hello World!');
Highcharts.extend(options, Highcharts.merge(options, {
    chart: {
        backgroundColor: "#bada55"
    }
}));

will alert 'Hello World!' and change background color (you can think about it as an additional option).

Cloud Example:
http://cloud.highcharts.com/show/urimevu

Regards.

[raymundoserrato]

Hi raymundoserrato,

You do not have to do that. The 'Custom code' section is a place where you can put custom JavaScript code. Mostly it is used for extending options and behaviour of a chart. For example, below custom code:

Code: Select all

alert('Hello World!');
Highcharts.extend(options, Highcharts.merge(options, {
    chart: {
        backgroundColor: "#bada55"
    }
}));

will alert 'Hello World!' and change background color (you can think about it as an additional option).

Cloud Example:
http://cloud.highcharts.com/show/urimevu

Regards.

Thanks. Can you tell me how I would integrate the drill down into my chart? I would simply insert the drill down code before the creation of the chart (before the Highcharts.extend...) and then add the data series code specifying what to drill down? I would be really grateful for a bit more information on how this is done as every method I've tried doesn't seem to work.

[pawel_d]

Hi raymundoserrato,

Unfortunately, drilldown functionality is not integrated into Cloud but there is a way to manage this situation. You need to copy the whole content of drilldown module before the Highcharts.extend() function. As for the normal and drilldown series, I posted below a content of an additional options which are being merged with original options. Please, take a look at the code and the example.

Code: Select all

Highcharts.extend(options, Highcharts.merge(options, {
  series: [{
    index: 0,
    name: 'Market share',
    colorByPoint: true,
    data: [{
      name: 'Firefox',
      drilldown: 'Firefox',
      y: 45
    }, {
      name: 'IE',
      drilldown: 'IE',
      y: 26.8
    }]
  }],
  drilldown: {
    series: [{
      name: 'Firefox',
      id: 'Firefox',
      data: [
        ['v35', 2.76],
        ['v36', 2.32]
      ]
    }, {
      name: 'IE',
      id: 'IE',
      data: [
        ['v11.0', 24.13],
        ['v8.0', 17.2]
      ]
    }]
  }
}));

Cloud Example:
http://cloud.highcharts.com/show/urimevu

Regards.

[vtgrad03]

What kind of Cloud account do you need to use these advanced features? I just created an account and paid for the advanced, but I am still unable to save a chart that uses any advanced features. It says that I need a license. A license to what? I thought that is what I was paying for when i got the advanced account.

for example, i'm trying to use the code below, and I cannot.

Code: Select all

Highcharts.extend(options, Highcharts.merge(options, {
    chart: {
        events: {
            load: function() {
                var chart = this,
                  series = chart.series;
          
                series.forEach(function(ser, inx) {
                    if(ser.name !== 'FD') {                
                       ser.update({
                        visible: false
                       });
                    }
                });
            }
        }
    }
}));

[pawel_d]

Hi vtgrad03,

As you can read here: https://cloud.highcharts.com/, you need to have Advanced plan for using Advanced features option. Try to logout and login once again and check if you can save a chart with changed advanced options. If no, please let me know.

Regards.