Locked
Prosper
Posts: 1
Joined: Thu Mar 27, 2014 9:23 am

Re-use cloud highcharts code in a « normal » way

I made a chart in Cloud Highcharts and I would like to copy the code and use it in a “normal” way. But I don’t find the correct syntax to do it. This is an extract of the code :

Code: Select all

var options = {
"chart": {
		"type": "line"
	},
	"title": {
		"text": "Import 2"
	},
	"xAxis": {
		"type": "datetime"
	},
	"series": [
		{
			"index": 0,
			"name": "DE de 50 ans et plus",
			"data": [
				[
					1230764400000,
					16666.23
				],
Gert Vaartjes
Posts: 217
Joined: Thu Apr 14, 2011 6:03 am

Re: Re-use cloud highcharts code in a « normal » way

Hi,

The code you copied isn't complete. The Highcharts Cloud editor is lacking good functionality for copying/exporting the options from the Code view.

Please be patient, we're working on a beta release which should contain a fix for this.

Best regards,

Gert Vaartjes
Highsoft
CTO
Highsoft
lgrant
Posts: 1
Joined: Mon Apr 07, 2014 10:35 pm

Re: Re-use cloud highcharts code in a « normal » way

Is there a workaround/series of steps for this right now? I'm looking to grab some code and host it so I can link to a dashboard, and I'm so far unable to copy the entire code.

This is a great tool - if I could copy the code it would save me hours of work.
Thanks in advance for your help.
Gert Vaartjes
Posts: 217
Joined: Thu Apr 14, 2011 6:03 am

Re: Re-use cloud highcharts code in a « normal » way

Hi,

I came across your post and saw that it has unfortunately never been answered. Sorry.

To answer your question, if it's still relevant, now you can copy the code from the code Menu, under the 3. Customize step.
We have silently going over in Beta and we improved quite a lot. Please take a look.

Best regards,

Gert Vaartjes
CTO
Highsoft
angilena
Posts: 1
Joined: Sat Sep 13, 2014 5:57 am

Re: Re-use cloud highcharts code in a « normal » way

hi...... 8)
It looks really impressive. I'm a developer though so may not be your target audience. Our product embeds Highcharts along with other functionality so directing users to the cloud isn't really an option. We develop a BI tool so our users so need some control over the charts, hence my question on the properties dialog.
keeep smiling :lol: :D
bye
:roll:
angilena
saiko
Posts: 14
Joined: Fri Oct 10, 2014 7:38 am

Re: Re-use cloud highcharts code in a « normal » way

Hi Gert,

Can you please show a sample way of using the code-menu ? may be with a JSfiddle. It doesn't look straight forward as Highchart examples, so would be quite helpful for a JS challenged guy like me.

Thanks in advance!
Gert Vaartjes
Posts: 217
Joined: Thu Apr 14, 2011 6:03 am

Re: Re-use cloud highcharts code in a « normal » way

Hi,

Sorry for the extremely late reply..

There's a code example in the custom-code section. Just uncomment it and you'll see the editor applying the javascript code.

What it does is changing the background-color and it adds click events (just for fun)

Best regards,

Gert Vaartjes
CTO
Highsoft
Jeffrey Phillips
Posts: 56
Joined: Tue Aug 30, 2016 9:32 pm

Re: Re-use cloud highcharts code in a « normal » way

Gert Vaartjes wrote:Hi,

I came across your post and saw that it has unfortunately never been answered. Sorry.

To answer your question, if it's still relevant, now you can copy the code from the code Menu, under the 3. Customize step.
We have silently going over in Beta and we improved quite a lot. Please take a look.

Best regards,

Gert Vaartjes
Did this ever happen? I have several charts I'd like to embed for offline use. Or is this workaround still the way to go?
https://highcharts.uservoice.com/forums ... of-full-co
pawel_d
Posts: 1910
Joined: Thu Jun 02, 2016 10:28 am

Re: Re-use cloud highcharts code in a « normal » way

Hi Jeffrey,

Yes, you can use the solution provided on uservoice by Gert: https://highcharts.uservoice.com/forums ... of-full-co. Also, you can of course copy all the options from the 'Code' section and create a chart, for example:

Code: Select all

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
  </head>

  <body>
    <div id="container"></div>
  </body>

  <script type="text/javascript">
    var options = {
      "chart": {
        "type": "line"
      },
      "title": {
        "text": "exemplary"
      },
      "xAxis": {
        "type": "category"
      },
      "series": [{
        "index": 0,
        "name": "Market share",
        "data": [
          [
            "Firefox",
            45
          ],
          [
            "IE",
            26.8
          ],
          [
            "Chrome",
            12.8
          ],
          [
            "Safari",
            8.5
          ],
          [
            "Opera",
            6.2
          ],
          [
            "Others",
            0.7
          ]
        ]
      }]
    };

    // Sample of extending options:
    Highcharts.extend(options, Highcharts.merge(options, {
      chart: {
        backgroundColor: "#bada55"
      },
      plotOptions: {
        series: {
          cursor: "pointer",
          events: {
            click: function(event) {
              alert(this.name + " clicked\n" +
                "Alt: " + event.altKey + "\n" +
                "Control: " + event.ctrlKey + "\n" +
                "Shift: " + event.shiftKey + "\n");
            }
          }
        }
      }
    }));

    $('#container').highcharts(options);
  </script>
</html>
Example:
https://jsfiddle.net/d_paul/phch3v7x/

Regards.
Paweł Dalek
Highcharts Developer
Jeffrey Phillips
Posts: 56
Joined: Tue Aug 30, 2016 9:32 pm

Re: Re-use cloud highcharts code in a « normal » way

As long as you remember to add

Code: Select all

$('#container').highcharts(options);
to the end of the copied code? :-)
pawel_d
Posts: 1910
Joined: Thu Jun 02, 2016 10:28 am

Re: Re-use cloud highcharts code in a « normal » way

Hi Jeffrey,

In this and similar cases (I mean Highcharts charts), yes. In case of Highstock, you would need to use:

Code: Select all

$('#container').highcharts('stockChart', options);
You could use the constructor approach:

Code: Select all

Highcharts.chart('container', options);
Highcharts.stockChart('container', options);
or

Code: Select all

new Highcharts.Chart('container', options);
new Highcharts.StockChart('container', options);
Example:
http://jsfiddle.net/d_paul/9pt8dvct/ - using jQuery
http://jsfiddle.net/d_paul/qusm7u05/ - using new Highcharts.StockChart('container', options)
http://jsfiddle.net/d_paul/ycnjh0kw/ - using Highcharts.StockChart('container', options)

Regards.
Paweł Dalek
Highcharts Developer
Locked

Return to “Highcharts Cloud”