Welcome to the Cumulus Support forum.

Latest Cumulus MX release 3.9.1 (build 3096) - 31 October 2020 (please see announcement regarding releases since 3.5.0)
Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014 (a patch is available for 1.9.4 build 1099 that extends the date range of the NOAA report and Snow Index drop-down menus to 2030)

Use this Wiki link to Download the Software (Cumulus MX / Cumulus 1 and other related items).

Highcharts Graphs

Discussion and support for 3rd-party (non-Sandaysoft) tools for Cumulus
User avatar
beteljuice
Posts: 3065
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: Highcharts Graphs

Post by beteljuice »

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: 561
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 »

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
        }
    };


User avatar
beteljuice
Posts: 3065
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: Highcharts Graphs

Post by beteljuice »

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

Phil23
Posts: 561
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 »

Strange,

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

Phil23
Posts: 561
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 »

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.

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

Re: Highcharts Graphs

Post by mcrossley »

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: 561
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 »

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

Phil23
Posts: 561
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 »

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.

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

Re: Highcharts Graphs

Post by mcrossley »

The line...
inputEnabled: false,

controls the manual range input box visibility.

Mapantz
Posts: 863
Joined: Sat 17 Dec 2011 11:55 am
Weather Station: Davis Vantage Pro2
Operating System: Windows 10 x64
Location: Dorset - UK
Contact:

Re: Highcharts Graphs

Post by Mapantz »

I have a bit of a boggle whilst trying to theme the historic charts..
It's the drilldown bit that I have an issue with.

I don't like the underlining of the data labels or axis labels. Also, by default, a white shadow is placed around those labels, so I like to remove it..

Code: Select all

 activeAxisLabelStyle: {
              textDecoration: 'none',
              textOutline: '10px',
              fontWeight: 'normal',
	      color: '#FFFFFF'
 },
activeDataLabelStyle: {
              textDecoration: 'none',
              textOutline: '10px',
              fontWeight: 'normal',
	      color: '#FFFFFF'
  },
        
That does the job. However, if the value is zero, which shows on the label, none of the code above works. It only executes if a value is higher than 0. The above code also doesn't execute if the drilldown goes down more than 2 steps.

I don't know if it's a bug or i've missed something. I have had a look at the highcharts api but I cannot find anything other than those two label styles.
Annotation 2019-11-04 235242.jpg
Annotation 2019-11-04 235359.jpg
You do not have the required permissions to view the files attached to this post.
Image

Bridger
Posts: 44
Joined: Fri 01 Jun 2012 4:58 pm
Weather Station: Davis Vantage Vue
Operating System: Windows XP Pro
Location: New Forest. UK
Contact:

Re: Highcharts Graphs

Post by Bridger »

I am looking for some assistance with Historic Graphs.
I am trying to set up Historic Graphs on my original WeatherBlues Template. I have had the graphs working for some time now on Ken's Saratoga template and I have cut and pasted the code and links from there.
The WeatherBlues graphs work OK from XAMPP with PHP 5.6.3 on my PC but not from my web host with PHP7.2 - except the Comfort graph which does plot, but slowly,
When I Inspect the page in Chrome it reports errors with highstock.js

WeatherBlues http://www.fordingbridgeweather.co.uk/h ... graphs.php
Saratoga http://www.fordingbridgeweather.co.uk/s ... graphs.php

Peter
You do not have the required permissions to view the files attached to this post.

Mapantz
Posts: 863
Joined: Sat 17 Dec 2011 11:55 am
Weather Station: Davis Vantage Pro2
Operating System: Windows 10 x64
Location: Dorset - UK
Contact:

Re: Highcharts Graphs

Post by Mapantz »

Hi Bridger

I would try updating your highcharts js files first. They're on 4.2.3 and the latest versions are up to 8.0.0.

Also, try using the latest jquery js and see how you get on.
Image

Sadgit
Posts: 183
Joined: Sun 04 Jan 2009 5:56 pm
Weather Station: Vantage Vue
Operating System: Windows 7
Location: Middlesbrough, England

Re: Highcharts Graphs

Post by Sadgit »

Can anyone give me some pointers to using these please? I feel thick asking but I have read all pages and back to square 1. My database is filling up nicely.. but this shows just the normal page..

https://weather.wilmslowastro.com/graph ... p?view=sce
thicko alert I know!

Mapantz
Posts: 863
Joined: Sat 17 Dec 2011 11:55 am
Weather Station: Davis Vantage Pro2
Operating System: Windows 10 x64
Location: Dorset - UK
Contact:

Re: Highcharts Graphs

Post by Mapantz »

Image

Sadgit
Posts: 183
Joined: Sun 04 Jan 2009 5:56 pm
Weather Station: Vantage Vue
Operating System: Windows 7
Location: Middlesbrough, England

Re: Highcharts Graphs

Post by Sadgit »

thanks.. not 100% what I need to do with them.. Still new to this web making lark. Will have a play again later

Post Reply