Page 1 of 1

Line Widths in Graphs.

Posted: Mon 15 Feb 2021 12:45 am
by Phil23
Hi all,

For those who understand HighCharts better than myself....

I have changed the Width & ranges selector in my http://weather.inverellit.com/graphs.htm page, which uses an older version of cumuluscharts,js.
The actual page now references:- <script src="js/cumuluscharts-old.js"></script>.

I'm in the process of updating http://weather.inverellit.com/trends.htm to incorporate the changes I made in the older JS file, but the Line widths seem to be handled differently in the newer file.

All I did in the old version was change it here.....

Code: Select all

        series: [{
                name: 'Temperature', lineWidth: 4,
                zIndex: 99  
            }, {
                name: 'Dew Point'
            }, {
                name: 'Apparent'
            }, {
                name: 'Wind Chill',
				visible: false
			}, {
                name: 'Heat Index',
				visible: false
            }, {
                name: 'Inside',
                visible: true
            }],
Simply made the Temp thicker so it stood out.
But the newer version seems to take a different approach to line widths in the code.

To @mcrossley
Would it be worth adding a version number like say 3043 to the beginning of the JS files?
I know they are not changed in every release, but if the last release number where an update occurred was noted it would help those of us who occasionally sift thru older files.
There are the Date Stamps of course, but they can be knocked out of wack by some unzip tools, and once an edit is made the version the scripts shipped with is hard to ascertain.

Thanks

Phil.

Re: Line Widths in Graphs.

Posted: Mon 15 Feb 2021 3:06 pm
by mcrossley
I'd tackle it by adding an new variable in the ajax.success() function, something like...

Code: Select all

var lineWidths = {
    'temp'     : 3,
    'dew'      : 1,
    'apptemp'  : 1,
    'feelslike': 1,
    'wchill'   : 1,
    'heatindex': 1,
    'humidex'  : 1,
    'intemp'   : 2'
 };
In the .forEach() loop where it adds the data series to the chart, add a new line to the series config....

Code: Select all

lineWidth: lineWidths[idx]
I'll add a last updated comment to the top of each file - it's easy for me then as it will get auto-updated whenever I save the file in my editor.

Re: Line Widths in Graphs.

Posted: Mon 15 Feb 2021 5:50 pm
by iandrews
Speaking of the temp line, I noticed that the temp line was "hidden" behind the other lines such as Humidex or heat index.

Looking at the code in cumuluscharts.js I see the below, which I assume is meant to set the temp line to on top:

Code: Select all

                    if (idx === 'temp') {
                        chart.series[chart.series.length - 1].options.zIndex = 99;
                    }

However it didn't seem to be working. As the Temp was the first series I have changed the code to:

Code: Select all

                    if (idx === 'temp') {
                        chart.series[0].options.zIndex = 99;
                    }

And the temp line is now top. So not sure why the original code isn't working.

Re: Line Widths in Graphs.

Posted: Mon 15 Feb 2021 5:58 pm
by iandrews
Update on my post above, not sure if it's related to the below post:

https://www.highcharts.com/forum/viewtopic.php?t=36665

It seems to state that when you add the first series the count goes up by 2. So as a test I have set the code to:

Code: Select all

                    if (idx === 'temp') {
                        chart.series[chart.series.length - 2].options.zIndex = 99;
                    } 
And the temp line is now on top.

Though assume this would only work if the temp line was the first added to a graph.

Re: Line Widths in Graphs.

Posted: Mon 15 Feb 2021 8:30 pm
by mcrossley
Yep, I have already fixed the zIndex for the next release, you cannot assume the array order will be the same.