vij
Posts: 6
Joined: Fri May 24, 2019 5:10 am

Any Learning Resources for HighCharts Cloud (Especially custom code?)

Considering the Advanced plan. But before that - are there any Learning Resources for HighCharts Cloud (Especially custom code?) that a newbie can learn. Especially looking for a tutorial that explains custom code stuff(with events) well.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Any Learning Resources for HighCharts Cloud (Especially custom code?)

Hi,

Welcome to our forum and thanks for contacting us!

We have documentation here: https://cloud.highcharts.com/docs
We have a few videos tutorials on Youtube: https://www.youtube.com/channel/UCzxXof ... A/featured

But I think the most useful for customers is our Support Tech Team and Highcharts community. You can ask any question here on the forum, on StackOverflow or you can contact us directly via [email protected] - we will always reply to you and help with custom coding.

Also, many questions have already been asked here on this forum.

Let me know if you have any further questions.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
vij
Posts: 6
Joined: Fri May 24, 2019 5:10 am

Re: Any Learning Resources for HighCharts Cloud (Especially custom code?)

Thank you for the prompt reply! Unfortunately, the custom code aspect is not explained in the videos. Infact there is nothing much about those on the web.
rafalS wrote: Fri May 24, 2019 8:16 am
Let me know if you have any further questions.

Best regards!
Actually, I have a very specific requirement. I am looking to be able to create charts that have a drop down menu with 5 possible selections (or) say 5 links and when we click each link, it takes us to different column charts. Is this possible with highcharts cloud?

Has to be with the cloud version that gives embed code.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Any Learning Resources for HighCharts Cloud (Especially custom code?)

Yes, it is possible, but requires some custom coding. I need some additional info to point you in the right direction.

Do you have all 5 column charts in the same container and change only the data? Or you want the same container but, except data, you want to change the whole chart's design? Or you want links pointing to the whole different container or different website?

Also, are you a programmer and do you know anything about JavaScript or you are a no-tech user?

Regards.
Rafal Sebestjanski,
Highcharts Team Lead
vij
Posts: 6
Joined: Fri May 24, 2019 5:10 am

Re: Any Learning Resources for HighCharts Cloud (Especially custom code?)

rafalS wrote: Fri May 24, 2019 9:14 am Do you have all 5 column charts in the same container and change only the data?
Regards.
This! Same container and only want the data to change.

I am not a developer by profession, but I use a common sense approach to programming and do code for my requirements regularly. I can do some web automation in selenium and python and data manipulation via python - that kind of stuff. Never actively programmed javascript though - but I am confident I can manage if I can see comparable examples of what I want to achieve.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Any Learning Resources for HighCharts Cloud (Especially custom code?)

That's great because this is the easiest case ;)

You can create your own drop-down menu, but I will use the one from exporting.

In short - I created a references in the drop-down menu:

Code: Select all

menuItems: ["first", "second", "third"]
And we can control every item, for example the first one, like this:

Code: Select all

menuItemDefinitions: {
      first: {
        onclick: function() {
          var chart = this;
          chart.series[0].setData([5, 4, 3, 6, 5]);
        },
        text: 'First data'
      },
.
.
I used setData() method to set a specific set of data (array with values inside).

To merge this code with Cloud, please go to Customize -> Custom Code and paste this:

Code: Select all

Highcharts.merge(true, options, {
    exporting: {
    buttons: {
      contextButton: {
        menuItems: ["first", "second", "third"]
      }
    },
    menuItemDefinitions: {
      first: {
        onclick: function() {
          var chart = this;
          chart.series[0].setData([5, 4, 3, 6, 5]);
        },
        text: 'First data'
      },
      second: {
        onclick: function() {
          var chart = this;
          chart.series[0].setData([14, 12, 21, 17, 22]);
        },
        text: 'Second data'
      },
      third: {
        onclick: function() {
          var chart = this;
          chart.series[0].setData([1, 5, 1, 5, 1]);
        },
        text: 'Third data'
      }
    },
  }
});
cloudSetData.png
cloudSetData.png (67.2 KiB) Viewed 7453 times
API Reference: https://api.highcharts.com/highcharts/e ... .menuItems
https://api.highcharts.com/highcharts/e ... efinitions
https://api.highcharts.com/class-refere ... es#setData

Let me know if you have any further questions!

Regards.
Rafal Sebestjanski,
Highcharts Team Lead
vij
Posts: 6
Joined: Fri May 24, 2019 5:10 am

Re: Any Learning Resources for HighCharts Cloud (Especially custom code?)

Learnt a bit just looking at that code :) But I don't think visitors will find the charts with that kind of a drop down. How about having them as links(buttons?) right at the top. Noone can miss that.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Any Learning Resources for HighCharts Cloud (Especially custom code?)

Hi,

Sure, you can render your own buttons using Highcharts SVG Renderer: https://api.highcharts.com/class-refere ... rer#button

If you want to style them or make them responsive, you can look for many examples on this forum or on StackOverflow.

Here you have an example of 3 buttons changing your data:

Code: Select all

chart: {
                events: {
                    render: function () {
                        var chart = this;

                        chart.renderer.button('First data', 50, 10, function () {
                            chart.series[0].setData([5, 3, 4, 5, 2]);
                        }).add()
                        chart.renderer.button('Second data', 150, 10, function () {
                            chart.series[0].setData([14, 12, 21, 17, 22]);
                        }).add()
                        chart.renderer.button('Third data', 250, 10, function () {
                            chart.series[0].setData([1, 5, 1, 5, 1]);
                        }).add()
                    }
                }
            },
Useful API References: https://api.highcharts.com/highcharts/c ... nts.render
https://api.highcharts.com/class-refere ... er#destroy

Let me know if you have any further questions. Remeber to destroy all buttons before you render new ones in render event.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
vij
Posts: 6
Joined: Fri May 24, 2019 5:10 am

Re: Any Learning Resources for HighCharts Cloud (Especially custom code?)

I am clearly out of my depth here :-/ The above code returns an error.

What I really want is to have buttons below the default chart that would allow me to switch the charts (data, legend etc)
It would have been good if there was a clear template for this as this is mostly what I will need across hundreds of charts. Feeling bit disheartened here. Thanks for trying.
vij
Posts: 6
Joined: Fri May 24, 2019 5:10 am

Re: Any Learning Resources for HighCharts Cloud (Especially custom code?)

Ok, I got it to work...But it looks unpolished. Looks like there's more to do here... Hmm...
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Any Learning Resources for HighCharts Cloud (Especially custom code?)

Hi vij,

You can, of course, style your SVG buttons. You can also create your own HTML buttons and attach almost the same click event listener. You can position them wherever you want and also you can easily create your own custom legend.

But, unfortunately, I cannot do all of this for you - I can show you some examples and provide links to the documentation and examples only.

Did you consider using highcharts.js instead of Cloud? Cloud is for no-tech users, but if you know basics, I recommend to consider using a pure library - it's more flexible and still low-level entry.

Have a good week,
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Cloud”