Welcome to the Cumulus Support forum.

Latest Cumulus MX release v3.0.2 build 3052 - 13 September 2019.
Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014

See the Wiki for downloading either version.

Highcharts Graphs

Discussion and support for 3rd-party (non-Sandaysoft) tools for Cumulus
User avatar
beteljuice
Posts: 2715
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: ex XP SP3 - now W10 laptop grr
Location: Dudley, West Midlands, UK

Re: Highcharts Graphs

Post by beteljuice » Mon 01 Jul 2019 12:15 pm

Was the above a cut from Mark's code?
Yes ... but part of a larger construct, so additional code / syntax before and after.

I suspect your problem is a syntactic error, but the beteljuice hates 'object' code and have very little experience with high-charts.

You'll just have to poke and hope until someone more able takes pity on you :roll:
Image
......................Imagine, what you will KNOW tomorrow !

Phil23
Posts: 207
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis Vantage Pro2 Plus
Operating System: Win7 Pro
Location: Australia

Re: Highcharts Graphs

Post by Phil23 » Tue 02 Jul 2019 12:31 am

Still must be missing something.

Have this code below ATM & it behaves exactly as before.
No buttons visible until you pan the chart a bit, then they pop up at the selected value.

Maybe mark has another bit of code outside this section that enables them by default,
I'm sure I saw that in his page.

Cheers.

Code: Select all

        rangeSelector: {
            buttons: [{
                    count: 6,
                    type: 'hour',
                    text: '6h'
                }, {
                    count: 12,
                    type: 'hour',
                    text: '12h'
                }, {
                    count: 24,
                    type: 'hour',
                    text: '24h'
                }, {
                    count: 48,
                    type: 'hour',
                    text: '48h'
                }, {
                    count: 72,
                    type: 'hour',
                    text: '3d'
                }, {
                    count: 96,
                    type: 'hour',
                    text: '4d'
                }, {
                    count: 120,
                    type: 'hour',
                    text: '5d'
                }, {
                    type: 'all',
                    text: 'All'
                }],
        buttonTheme : {'stroke-width': 1},
        inputEnabled: false,
        selected    : 3
        }
    };

Image

User avatar
beteljuice
Posts: 2715
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: ex XP SP3 - now W10 laptop grr
Location: Dudley, West Midlands, UK

Re: Highcharts Graphs

Post by beteljuice » Tue 02 Jul 2019 1:13 am

In your code snippet, the curly braces don't add up (One too many closing })
Image
......................Imagine, what you will KNOW tomorrow !

Phil23
Posts: 207
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis Vantage Pro2 Plus
Operating System: Win7 Pro
Location: Australia

Re: Highcharts Graphs

Post by Phil23 » Tue 02 Jul 2019 4:19 am

Strange,

If I remove their the } or the }; at the end, the graph won't display.
Image

Phil23
Posts: 207
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis Vantage Pro2 Plus
Operating System: Win7 Pro
Location: Australia

Re: Highcharts Graphs

Post by Phil23 » Tue 02 Jul 2019 4:48 am

From what I can make of Mark's page, he seems to be doing it a bit different to the standard page.

Code: Select all

	<script src="//code.highcharts.com/stock/highstock.js"></script>
	<script src="//code.highcharts.com/highcharts-more.js"></script>
	<script src="/scripts/grid.1710201545.js"></script>
	<script src="/scripts/recentGraphs.1812200936.js"></script>
Mine looks like this.

Code: Select all

	<script src="lib/jquery/jquery-latest.min.js"></script>
	<script src="lib/highstock/js/highstock.js"></script>
        <script src="lib/highstock/js/themes/grid.js"></script>
        <script src="js/cumuluscharts.js"></script>    
highcharts-more might be doing something.
Image

User avatar
mcrossley
Posts: 5624
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2
Operating System: Stretch Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Highcharts Graphs

Post by mcrossley » Mon 08 Jul 2019 3:41 pm

I think it is a Highcharts version thing.

I am running Highstock version 7.1.2, you are running 2.1.4

My code has a line commented out that presumably worked around this issue in older versions of Highstock charts...
// chart.rangeSelector.clickButton(1, chart.rangeSelector.buttonOptions[1], true); // If you select the default button in options, the buttons are not displayed if the graph is drawn without any data

Phil23
Posts: 207
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis Vantage Pro2 Plus
Operating System: Win7 Pro
Location: Australia

Re: Highcharts Graphs

Post by Phil23 » Tue 09 Jul 2019 9:13 pm

mcrossley wrote:
Mon 08 Jul 2019 3:41 pm
I am running Highstock version 7.1.2, you are running 2.1.4
Thanks Mark,

So I presume I'm best to upgrade assuming that is fairly painless & the new version will be backward compatible with the old chart.js.
My code has a line commented out that presumably worked around this issue in older versions of Highstock charts...

// chart.rangeSelector.clickButton(1, chart.rangeSelector.buttonOptions[1], true); // If you select the default button in options, the buttons are not displayed if the graph is drawn without any data
Could give that option a try, but just a little unclear on where to put that line of code.

On the matter of upgrading; Am I better to link to the code on Highcharts site that placing it on my own webserver.
As per the example of your code above.

Cheers

Phil
Image

Phil23
Posts: 207
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis Vantage Pro2 Plus
Operating System: Win7 Pro
Location: Australia

Re: Highcharts Graphs

Post by Phil23 » Tue 09 Jul 2019 10:08 pm

So have made an improvement with this change in the graphs page code.
Borrowed from Mark.

Code: Select all

	<script src="lib/jquery/jquery-latest.min.js"></script>
	<!-- <script src="lib/highstock/js/highstock.js"></script> -->
        <!-- <script src="lib/highstock/js/themes/grid.js"></script> -->
        <script src="js/cumuluscharts.js"></script>    
		
	<script src="//code.highcharts.com/stock/highstock.js"></script>
	<script src="//code.highcharts.com/stock/js/themes/grid.js"></script>
	<!-- <script src="/scripts/grid.1710201545.js"></script> -->
	<!-- <script src="/scripts/recentGraphs.1812200936.js"></script> -->
I now get the buttons by default without moving the slider.

I'm playing a bit blind with my java & highcharts knowledge, but am I taking the right approach, using the online highstock library?

Also I did notice at one stage I had a box in the Top Right of the graph that stated the range of the chart. Not sure how to invoke that intentionally,
as it seem to magically appear in one of my random edits... :lol:

http://weather.inverellit.com/graphs.htm
http://weather.inverellit.com/graphs2.htm
Graph1.JPG
Graph2.JPG
You do not have the required permissions to view the files attached to this post.
Image

User avatar
mcrossley
Posts: 5624
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2
Operating System: Stretch Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Highcharts Graphs

Post by mcrossley » Wed 10 Jul 2019 8:52 am

The line...
inputEnabled: false,

controls the manual range input box visibility.

Post Reply