Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024

Cumulus MX V4 beta test release 4.0.0 (build 4018) - 28 March 2024

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 drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

Help with recent graphics

From build 3044 the development baton passed to Mark Crossley. Mark has been responsible for all the Builds since. He has made the code available on GitHub. It is Mark's hope that others will join in this development, but at the very least he welcomes your ideas for future developments (see Cumulus MX Development suggestions).

Moderator: mcrossley

Post Reply
josebp
Posts: 65
Joined: Tue 13 Apr 2010 11:37 am
Weather Station: Davis Vantage Pro2
Operating System: WINDOWS 10
Location: Sevilla, España
Contact:

Help with recent graphics

Post by josebp »

Hi, I'm trying to put the recent graphics on my website:
http://www.tiempoensevilla.es/wxrecent.php
and I have two problems
1º.- It is always continuously loading the wind direction graph.
2º.- The chart shows one hour less, although the figure is from the official Spanish time
I can not find the solution
An aid would be welcome.
Thank you.
José Ramón
------------------------------------------
Hola, estoy intentando poner los gráficos recientes en mi web:
http://www.tiempoensevilla.es/wxrecent.php
y tengo dos problemas
1º.- Siempre está continuamente cargando el gráfico de dirección de viento.
2º.- En el gráfico pone una hora menos aunque el dato es de la hora oficial española
No encuentro la solución
Una ayuda sería bien recibida.
Muchas gracias.
José Ramón
Image
jlmr731
Posts: 225
Joined: Sat 27 Aug 2016 12:11 am
Weather Station: Davis vantage pro 2
Operating System: Debian
Location: Wickliffe, Ohio
Contact:

Re: Help with recent graphics

Post by jlmr731 »

I see it wants to reload the data file for wind direction, even if I click temp it show temp but then jumps back to wind direction.

Code: Select all

	<!-- add scrips here -->
	<script src="http://code.highcharts.com/stock/4.2.3/highstock.js"></script>
	<script src="scripts/grid.js"></script>
	<script src="scripts/recentGraphs.js"></script>
i dont see the cumuluscharts.js being called anywhere and should be in the js folder of the cumulus installation
then add

Code: Select all

<script src="js/cumuluscharts.js"></script> 
pointing to the correct path of the file as you can put it in your scipts folder like the others

If thats not it someone else will chime in
User avatar
BeaumarisWX
Posts: 357
Joined: Mon 09 Apr 2012 2:38 pm
Weather Station: Davis VP2 Plus - 24hr FARS
Operating System: Windows 10 Pro Hades Canyon
Location: Beaumaris, Tasmania, AU
Contact:

Re: Help with recent graphics

Post by BeaumarisWX »

Hi,
Sorry if I'm wrong, though I found ages ago that a floor in the script "recentGraphs.js" was the cause.
In your current "recentGraphs.js" the ajax call is too late. see below;
look for :
// go fetch the data
$.ajax({
var windDir = function () {

// whilst we wait for the data, start to draw the chart
// first define the options
var options = clone(commonOptions);

options.chart.type = 'scatter';
options.title = {text: 'Recent Wind Direction'};
options.subtitle = {text: null};

options.xAxis = {
type: 'datetime',
maxPadding: 0.005,
minPadding: 0.005,
labels: {align: 'left'},
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
};

options.yAxis = [{
// left y axis
title: {text: null},
opposite: false,
labels: {
align: 'right',
x: -5,
formatter: function () {
return getOrd(this.value);
}
},
min: 0,
max: 360,
//maxPadding: 0.05,
//minPadding: 0.05,
tickInterval: 45,
tickAmount: 9,
minorTickInterval: null,
plotBands: [{
color: '#E8E8FF',
from: 0,
to: 22.5
}, {
color: '#E8E8FF',
from: 67.5,
to: 112.5
}, {
color: '#E8E8FF',
from: 157.5,
to: 202.5
}, {
color: '#E8E8FF',
from: 247.5,
to: 292.5
}, {
color: '#E8E8FF',
from: 337.5,
to: 360
}]
}, {
// right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {text: null},
labels: {
align: 'left',
x: 5,
formatter: function () {
return getOrd(this.value);
}
},
//maxPadding: 0.05,
//minPadding: 0.05,
tickInterval: 45,
tickAmount: 9,
minorTickInterval: null
}];

options.tooltip = {enabled: false};

options.plotOptions = {
scatter: {
cursor: 'pointer',
enableMouseTracking: false,
marker: {
states: {
hover: {enabled: false},
select: {enabled: false}
}
},
shadow: false,
animation: false
}
};

options.series = [{
name: 'Bearing',
color: 'rgba(20,20,20,.5)',
marker: {
symbol: 'square',
radius: 2
},
negativeColor: 'rgba(20,200,20,.7)',
visible: true,
data: []

}, {
name: '10 min Avg.',
color: 'rgba(200,20,20,.9)',
marker: {
symbol: 'square',
radius: 2
},
negativeColor: 'rgba(20,20,200,.7)',
data: []
}];

// draw the chart
chart = new Highcharts.StockChart(options);
chart.showLoading();
// go fetch the data
$.ajax({
//url: 'utils/realtimeLogSql2.php?recordAge=' + g_hours + '&recordUnit=hour&avgbearing&nth=' + g_nth,
url: 'utils/realtimeLogSql.php?recordAge='+g_recordAge+'&recordUnit='+g_recordUnit+'&avgbearing&bearing',
datatype: 'json',
success: function (resp) {
chart.hideLoading();
chart.series[0].setData(resp.bearing);
chart.series[1].setData(resp.avgbearing);
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
}
});
};

Try changing to following : Note Entire file below and has windDir changed to windDirg
// Recent Graphs Script
// Mark Crossley
// 2014-10-07 - Added canvas 'tweak' to Highcharts for the Wind Direction scatter graph.
//
/*global Highcharts */
/*exported changeImage */
/*jshint jquery:true, globalstrict:true */
'use strict';

var chart;
var g_recordAge = '7';
var g_recordUnit = 'day';
Highcharts.setOptions({
lang: {
months: ["Enero "," Febrero ","Marzo "," Abril "," Mayo "," Junio "," Julio "," Agosto "," Septiembre ", " Octubre "," Noviembre "," Diciembre"],
weekdays: ["Dom "," Lun "," Mar "," Mie "," Jue "," Vie "," Sab"],
shortWeekdays: ["do", "lu", "ma", "mi", "ju", "vi", "sa"],
shortMonths: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
rangeSelectorFrom: "de",
rangeSelectorTo: "a",
decimalPoint: ",",
loading: "Cargando..."
}
});
// default graph options
var commonOptions = {
chart: {
renderTo: 'graph_container',
type: 'line'
},
credits: {enabled: false},
rangeSelector: {
buttons: [{
type: 'hour',
count: 6,
text: '\u00A06h '
}, {
type: 'hour',
count: 12,
text: '\u00A012h '
}, {
type: 'day',
count: 1,
text: '\u00A01d '
}, {
type: 'day',
count: 2,
text: '\u00A02d '
}, {
type: 'all',
text: '\u00A0Todo\u00A0'
}],
buttonTheme: {'stroke-width': 1},
inputEnabled: false
//selected: 1
},
xAxis: {
type: 'datetime',
maxPadding: 0.005,
minPadding: 0.005,
dateTimeLabelFormats: {
day: '%e %B',
week: '%e %B %Y',
month: '%B %Y',
year: '%Y'
}
},
legend: {enabled: true},
plotOptions: {
series: {
cursor: 'pointer',
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
}
},
line: {lineWidth: 2}
}
};

function clone(obj) {
var copy;
// Handle the 3 simple types, and null or undefined
if (null === obj || 'object' !== typeof obj) {
return obj;
}

// Handle Date
if (obj instanceof Date) {
copy = new Date();
copy.setTime(obj.getTime());
return copy;
}

// Handle Array
if (obj instanceof Array) {
copy = [];
for (var i = 0, len = obj.length; i < len; i++) {
copy = clone(obj);
}
return copy;
}

// Handle Object
if (obj instanceof Object) {
copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) {
copy[attr] = clone(obj[attr]);
}
}
return copy;
}

throw new Error('Unable to copy obj! Its type isn\'t supported.');
}

var getOrd = function (deg) {
var a = ['N', 'NE', 'E', 'SE', 'S', 'SO', 'O', 'NO'];
return a[Math.floor((deg + 22.5) / 45) % 8] + (deg === 0 ? '|calma' : '');
};

var temperature = function () {
// go fetch the data
$.ajax({
url: 'utils/realtimeLogSql.php?recordAge='+g_recordAge+'&recordUnit='+g_recordUnit+'&temp&dew&apptemp&wchill&intemp',
datatype: 'json',
success: function (resp) {
chart.hideLoading();
chart.series[0].setData(resp.temp);
chart.series[1].setData(resp.dew);
chart.series[2].setData(resp.apptemp);
chart.series[3].setData(resp.wchill);

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


// whilst we wait for the data, start to draw the chart
// first define the options
var options = clone(commonOptions);

options.title = {text: 'Temperatura (\u00B0C)'};
options.subtitle = {text: 'Fuente:tiempoensevilla.es'};

options.chart.alignTicks = false;

options.yAxis = [{
// left y axis
title: {text: 'Temperatura (\u00B0C)'},
allowDecimals: false,
opposite: false,
//tickInterval: 5,
//minorTickInterval: 1,
labels: {
align: 'right',
x: -5,
formatter: function () {
return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
}
},
plotBands: [{
// visualize sub-zero
from: -200,
to: 32,
color: 'rgba(68, 170, 213, .1)'
}],
plotLines: [{
// visualize zero
value: 32,
color: 'rgb(0, 0, 180)',
width: 1,
zIndex: 2
}]
}, {
// right y axis
linkedTo: 0,
//gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'left',
x: 5,
formatter: function () {
return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
}
}
}];

options.tooltip = {
shared: true,
crosshairs: true,
valueSuffix: '\u00B0C',
valueDecimals: 1
};

options.series = [{
name: 'Temperatura',
//data: resp.temp,
color: '#ff0000',
zIndex: 99 // Force temperature plot to always be on top
}, {
name: 'Punto de Roc\u00EDo',
//data: resp.dew,
color: '#DE8686'
}, {
name: 'Sensaci\u00F3n',
//data: resp.app,
color: '#3399FF'
}, {
name: 'Sensaci\u00F3n por viento',
color: '#1ED775',
//data: resp.wchill,
visible: true

}];

// draw the chart
chart = new Highcharts.StockChart(options);
chart.showLoading();
};

var pressure = function () {
// go fetch the data
$.ajax({
url: 'utils/realtimeLogSql.php?recordAge='+g_recordAge+'&recordUnit='+g_recordUnit+'&press',
datatype: 'json',
success: function (resp) {
//var chart = $('#container').highcharts();
chart.hideLoading();
chart.series[0].setData(resp.press);
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
}
});

// whilst we wait for the data, start to draw the chart
// first define the options
var options = clone(commonOptions);

options.title = {text: 'Bar\u00F3metro (hPa)'};
options.subtitle = {text: 'Fuente:tiempoensevilla.es'};

options.chart.alignTicks = false;

options.yAxis = [{
// left y axis
title: {text: 'Presi\u00F3n a nivel del mar (hPa)'},
minRange: 0.001,
opposite: false,
labels: {
align: 'right',
x: -5,
formatter: function () {
return parseFloat(this.value).toFixed(2);
}
}
}, {
// right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {text: null},
minRange: 0.001,
labels: {
align: 'left',
x: 5,
formatter: function () {
return parseFloat(this.value).toFixed(2);
}
}
}];

options.tooltip = {
shared: true,
crosshairs: true,
valueSuffix: ' hPa',
valueDecimals: 1,
formatter: function () {
var point = this,
series = this.points[0].series;
return '<span style="font-size:10px">' + Highcharts.dateFormat('%A, %e %B , %H:%M', point.x) + '</span><br>' +
'<span style="color:' + series.color + '">' + series.name + '</span>: ' +
'<b> ' + Highcharts.numberFormat(point.y, 1, ',', '') + ' hPa</b> ';
}
};

options.series = [{
name: 'Pressure'
}];

// Create the chart
//$('#container').highcharts('StockChart', options);
chart = new Highcharts.StockChart(options);
chart.showLoading();
};

var wind = function () {
// go fetch the data
$.ajax({
url: 'utils/realtimeLogSql.php?recordAge='+g_recordAge+'&recordUnit='+g_recordUnit+'&wspeed&wgust',
datatype: 'json',
success: function (resp) {
chart.hideLoading();
chart.series[0].setData(resp.wspeed);
chart.series[1].setData(resp.wgust);
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
}
});
// whilst we wait for the data, start to draw the chart
// first define the options
var options = clone(commonOptions);

options.title = {text: 'Recent Wind Speeds'};
options.subtitle = {text: 'Wind Speeds (mph)'};

options.yAxis = [{
// left y axis
title: {text: 'Wind Speed (mph)'},
opposite: false,
labels: {
align: 'right',
x: -5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
},
min: 0
}, {
// right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {text: null},
labels: {
align: 'left',
x: 5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
}
}];

options.tooltip = {
shared: true,
crosshairs: true,
valueSuffix: ' mph'
};

options.series = [{
name: 'Avg speed',
step: true
}, {
name: 'Gust speed',
step: true,
color: 'rgba(255,0,0,0.8)'
}];

// draw the chart
chart = new Highcharts.StockChart(options);
chart.showLoading();
};

var windDirg = function () {
// go fetch the data
$.ajax({
//url: 'utils/realtimeLogSql2.php?recordAge=' + g_hours + '&recordUnit=hour&avgbearing&nth=' + g_nth,
url: 'utils/realtimeLogSql.php?recordAge='+g_recordAge+'&recordUnit='+g_recordUnit+'&avgbearing&bearing',
datatype: 'json',
success: function (resp) {
chart.hideLoading();
chart.series[0].setData(resp.bearing);
chart.series[1].setData(resp.avgbearing);
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
}
});
// whilst we wait for the data, start to draw the chart
// first define the options
var options = clone(commonOptions);

options.chart.type = 'scatter';
options.title = {text: 'Recent Wind Direction'};
options.subtitle = {text: null};

options.xAxis = {
type: 'datetime',
maxPadding: 0.005,
minPadding: 0.005,
labels: {align: 'left'},
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
};

options.yAxis = [{
// left y axis
title: {text: null},
opposite: false,
labels: {
align: 'right',
x: -5,
formatter: function () {
return getOrd(this.value);
}
},
min: 0,
max: 360,
//maxPadding: 0.05,
//minPadding: 0.05,
tickInterval: 45,
tickAmount: 9,
minorTickInterval: null,
plotBands: [{
color: '#E8E8FF',
from: 0,
to: 22.5
}, {
color: '#E8E8FF',
from: 67.5,
to: 112.5
}, {
color: '#E8E8FF',
from: 157.5,
to: 202.5
}, {
color: '#E8E8FF',
from: 247.5,
to: 292.5
}, {
color: '#E8E8FF',
from: 337.5,
to: 360
}]
}, {
// right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {text: null},
labels: {
align: 'left',
x: 5,
formatter: function () {
return getOrd(this.value);
}
},
//maxPadding: 0.05,
//minPadding: 0.05,
tickInterval: 45,
tickAmount: 9,
minorTickInterval: null
}];

options.tooltip = {enabled: false};

options.plotOptions = {
scatter: {
cursor: 'pointer',
enableMouseTracking: false,
marker: {
states: {
hover: {enabled: false},
select: {enabled: false}
}
},
shadow: false,
animation: false
}
};

options.series = [{
name: 'Bearing',
color: 'rgba(20,20,20,.5)',
marker: {
symbol: 'square',
radius: 2
},
negativeColor: 'rgba(20,200,20,.7)',
visible: true,
data: []

}, {
name: '10 min Avg.',
color: 'rgba(200,20,20,.9)',
marker: {
symbol: 'square',
radius: 2
},
negativeColor: 'rgba(20,20,200,.7)',
data: []
}];

// draw the chart
chart = new Highcharts.StockChart(options);
chart.showLoading();
};

var humidity = function () {
// go fetch the data
$.ajax({
url: 'utils/realtimeLogSql.php?recordAge='+g_recordAge+'&recordUnit='+g_recordUnit+'&inhum&hum',
datatype: 'json',
success: function (resp) {
chart.hideLoading();
chart.series[0].setData(resp.hum);
chart.series[1].setData(resp.inhum);
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
}
});

// whilst we wait for the data, start to draw the chart
// first define the options
var options = clone(commonOptions);

options.title = {text: 'Recent Humidty'};
options.subtitle = {text: 'Relative humidity (%)'};

options.yAxis = [{
// left y axis
min: 0,
max: 100,
title: {text: 'Relative Humidity (%)'},
gridLineWidth: 0,
opposite: false,
labels: {
align: 'right',
x: -5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
},
plotBands: [{
from: 0,
to: 20,
color: 'rgba(255, 220, 0, .15)'
}, {
from: 20,
to: 80,
color: 'rgba(20, 255, 20, .1)'
}, {
from: 80,
to: 90,
color: 'rgba(234, 207, 30, .15)'
}, {
from: 90,
to: 100,
color: 'rgba(240, 50, 0, .1)'
}]
}, {
// right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {text: null},
labels: {
align: 'left',
x: 5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
}
}];

options.tooltip = {
shared: true,
valueSuffix: '%'
};


options.series = [{
name: 'Outdoor',
color: 'red'
}, {
name: 'Indoor',
color: 'blue'
}];

// draw the chart
chart = new Highcharts.StockChart(options);
chart.showLoading();
};

var rain = function () {
// go fetch the data
$.ajax({
url: 'utils/realtimeLogSql.php?recordAge='+g_recordAge+'&recordUnit='+g_recordUnit+'&rfall&rrate',
datatype: 'json',
success: function (resp) {
chart.hideLoading();
chart.series[0].setData(resp.rfall);
chart.series[1].setData(resp.rrate);
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 dat
}
});

// whilst we wait for the data, start to draw the chart
// first define the options
var options = clone(commonOptions);

options.title = {text: 'Recent Rain'};
options.subtitle = {text: 'Rain (in) & Rate (in/h)'};

options.yAxis = [{
// left y axis
min: 0,
minRange: 2,
title: {
text: 'Rainfall rate (in/h)',
style: {color: 'rgba(255,100,100,1)'}
},
opposite: false,
labels: {
align: 'right',
x: -5,
formatter: function () {
return Highcharts.numberFormat(this.value, 1);
}
}
}, {
// right y axis
min: 0,
gridLineWidth: 0,
minRange: 2,
opposite: true,
title: {
text: 'Rainfall (in)',
style: {color: 'rgba(100,200,255,1)'}
},
labels: {
align: 'left',
x: 5,
formatter: function () {
return Highcharts.numberFormat(this.value, 1);
}
}
}];

options.tooltip = {
shared: true,
crosshairs: true,
valueDecimals: 1
};

options.series = [{
name: 'Daily rainfall',
//data: resp.rfall,
type: 'area',
yAxis: 1,
tooltip: {valueSuffix: ' in'},
zIndex: 10,
color: 'rgba(100,200,255,0.8)',
fillColor: {
linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, 'rgba(10,80,255,0.6)'],
[1, 'rgba(10,150,50,0.1)']
]
}
}, {
name: 'Rainfall rate',
//data: resp.rrate,
yAxis: 0,
type: 'line',
zIndex: 5,
tooltip: {valueSuffix: ' in/h'},
color: 'rgba(255,100,100,0.8)'
}];

// draw the chart
chart = new Highcharts.StockChart(options);
chart.showLoading();
};

var solar = function () {
// go fetch the data
$.ajax({
url: 'utils/realtimeLogSql.php?recordAge='+g_recordAge+'&recordUnit='+g_recordUnit+'&CurrentSolarMax&SolarRad&UV&UV_AVG',
datatype: 'json',
success: function (resp) {
var i = 0;
resp.percent = [];
for (; i < resp.SolarRad.length; i++) {
resp.percent = [];
resp.percent[0] = resp.SolarRad[0];
// ignore values when theoretical < 50, and cap at a maximum of 150%
resp.percent[1] = (resp.CurrentSolarMax[1] < 50 ? 0 : Math.round(Math.min(resp.SolarRad[1] / resp.CurrentSolarMax[1] * 100, 150) * 10) / 10);
}
chart.hideLoading();
chart.series[0].setData(resp.CurrentSolarMax);
chart.series[1].setData(resp.SolarRad);
chart.series[2].setData(resp.UV);
chart.series[3].setData(resp.percent);
chart.series[4].setData(resp.UV_AVG);
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
}
});

// whilst we wait for the data, start to draw the chart
// first define the options
var options = clone(commonOptions);

options.title = {text: 'Recent Solar Information'};
options.subtitle = {text: 'UV index & Solar Radiation (Wm\u207B\u00B2)'};

options.yAxis = [{
// left y axis - UV Index
title: {
text: 'UV Index'
},
opposite: false,
labels: {
align: 'right',
x: -5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
},
showEmpty: false,
min: 0,
minRange: 4,
minPadding: 0
//maxPadding: 0
}, {
// right y axis - Solar Rad W/m2
gridLineWidth: 0,
showEmpty: false,
opposite: true,
title: {text: 'Solar Radiation (Wm\u207B\u00B2)'},
labels: {
align: 'left',
x: 5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
},
min: 0
//max: 1000
}, {
// left y axis #2- Percentage of max
title: {text: 'Solar % of theoretical'},
labels: {
align: 'left',
x: 5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
},
showEmpty: false,
min: 0,
//minRange: 10,
minPadding: 0,
//max: 100,
//maxPadding: 0,
plotLines: [{
value: 75,
color: '#CC2000',
width: 1,
zIndex: 2
}]
}];

options.tooltip = {
shared: true,
crosshairs: true
};

options.series = [{
name: 'Theoretical Max',
//data: resp.CurrentSolarMax,
yAxis: 1,
type: 'area',
color: 'rgba(100,100,255,0.4)',
fillColor: 'rgba(100,100,255,0.25)',
tooltip: {
valueSuffix: ' W/m\u00B2'
}
}, {
name: 'Solar Radiation',
//data: resp.SolarRad,
yAxis: 1,
type: 'area',
color: 'rgba(255,80,10,0.8)',
lineWidth: 1,
fillColor: {
linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, 'rgba(255,80,10,0.4)'],
[1, 'rgba(150,0,0,0.3)']
]
},
tooltip: {
//formatter: function () {
//var str = '' + this.x + ' ' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1) + ' W/m\u00B2<br>' +
// ' percentage of max: ' + (options.series[0].y > 0 ? Highcharts.numberFormat(this.y / options.series[0].y * 100): '--') + '%';
// return "0";
//}
valueSuffix: ' W/m\u00B2'
}
}, {
name: 'UV Index',
//data: resp.UV,
yAxis: 0,
//color: 'rgba(255,0,0,0.8)',
visible: true,
tooltip: {valueDecimals: 1}
}, {
name: 'Solar %',
//data: resp.percent,
yAxis: 2,
visible: false,
tooltip: {
valueSuffix: '%',
valueDecimals: 1
}
}, {
name: 'UV 10 min avg.',
//data: resp.UV_AVG,
yAxis: 0,
//color: 'rgba(255,0,0,0.8)',
visible: false,
tooltip: {valueDecimals: 1}
}];

// draw the chart
chart = new Highcharts.StockChart(options);
chart.showLoading();
};


function changeImage(im) {
switch (im) {
case 'temp':
temperature();
break;
case 'press':
pressure();
break;
case 'wind':
wind();
break;
case 'windDirg':
windDirg();
break;
case 'rain':
rain();
break;
case 'humidity':
humidity();
break;
case 'solar':
solar();
break;
}
}

$(document).ready(function () {
temperature();
});


/**
* Faster scatter charts mod for Highcharts
*
* Author: Torstein Hønsi
* Last updated: 2014-10-07
*/
(function (H) {
// Skip advanced options testing, assume all points are given as [x, y]
H.seriesTypes.scatter.prototype.pointClass = H.extendClass(H.Point, {
init: function (series, options) {
this.series = series;
this.x = options[0];
this.y = options[1];
return this;
}
});
// Draw points as composite shapes
H.seriesTypes.scatter.prototype.drawPoints = function () {
var data = this.points,
renderer = this.chart.renderer,
chart = this.chart,
radius = this.options.marker.radius,
size = radius * 2,
stripe, stripes = [],
group, groups = [],
path, paths = [],
i = data.length,
x, y, j, l,
lastX,
point,
oddOrEven = 0,
remaining = data.length,
layers = this.layers;

if (this.clipPath) {
this.clipPath.attr({
x: 0,
y: 0,
height: chart.yAxis[0].height,
width: chart.xAxis[0].width
});
} else {
this.clipPath = renderer.clipRect({
x: 0,
y: 0,
height: chart.yAxis[0].height,
width: chart.xAxis[0].width
});
}

if (layers) {
var layersLen = layers.length, k =0;

for(; k < layersLen; k++) {
layers[k].destroy();
}
}
layers = this.layers = [];

// Divide the points into stripes. Points within the same group won't overlap in the y
// dimension
while (i--) {
point = data;
group = Math.round(point.plotY / radius);
if (!stripes[group]) {
stripes[group] = [];
}
stripes[group].push(point);
}

var sortFunc = function (a, b) {
return a.plotX - b.plotX;
};

// Sort the members of each stripe by x value
i = stripes.length;
while (i--) {
if (stripes[i]) {
stripes[i].sort(sortFunc);
}
}

// Loop over the members of each stripe and add them to a group if they don't overlap
// in the x dimension.

// first do even stripes, where points are guaranteed not to overlap with points in even stripes
l = stripes.length;
while (remaining) {
group = [];

for (i = oddOrEven; i < l; i += 2) {
stripe = stripes[i];
if (stripe) {
j = stripe.length;
lastX = null;
while (j--) {
x = stripe[j].plotX;
if (lastX === null || lastX - x >= size) {
// group.push(stripe[j]); // push it to the group
// stripe.splice(j, 1); // remove it from the stripe
group.push(stripe.splice(j, 1)[0]);
remaining--;
lastX = x;
}
}
}
}

if (group.length) {
groups.push(group);
}

if (!group.length && !oddOrEven) { // finished adding points to even stripes
oddOrEven = 1;
}
}

i = groups.length;
while (i--) {
group = groups[i];
path = [];
l = group.length;
for (j = 0; j < l; j++) {
// Math.round() reduces rendering times by 20% in a 50,000 points chart
//x = Math.round(group[j].plotX);
//y = Math.round(group[j].plotY);
x = Math.floor(group[j].plotX);
y = Math.floor(group[j].plotY);
path.push('M', x - radius, y - radius, 'L', x + radius, y - radius, x + radius, y + radius, x - radius, y + radius);

/* Note: using the symbol prototype gives higher
processing times. The rendering time is slightly higher for
complex paths like circles, and lower for simple paths like
triangles. Tested in Chrome. Probably the best solution is to
use a simplified shape calculation in-line. */
/*
symbolPath = Highcharts.Renderer.prototype.symbols.circle(
x - radius,
y - radius,
size,
size);

// faster than concat:
for (var m = 0, len = symbolPath.length; m < len; m++)
path.push(symbolPath[m]);
*/
}
paths.push(path);
}

// render
l = paths.length;
for (i = 0; i < l; i++) {
if (!layers[i]) {
layers[i] = renderer.path(paths[i]).attr({
fill: this.pointAttr[''].fill
}).add(this.markerGroup);
} else {
layers[i].attr({
d: paths[i]
});
}
}
layers.length = i;
this.markerGroup.clip(this.clipPath);
};
}(Highcharts));
// End faster scatter mod



It only seems to herald as an issue with Saratoga Template as it already has ajax calls being made so tends to loop otherwise. Including windDir being the Main cause of conflict with the Saratoga script I think.

Note: Jeff : this is a mysql based script not the "js/cumuluscharts.js" json based cumulusMX one.

Kind regards,
Tony Beaumaris, Tasmania (AUS)

CMX Mobile : https://beaumaris-weather.com/BWX/
CMX Default: https://beaumaris-weather.com/cumulusmx_default/
Colour Dashboard : https://beaumaris-weather.com/dashborad_color.php
Click below for Saratoga Template :
Image
josebp
Posts: 65
Joined: Tue 13 Apr 2010 11:37 am
Weather Station: Davis Vantage Pro2
Operating System: WINDOWS 10
Location: Sevilla, España
Contact:

Re: Help with recent graphics

Post by josebp »

thank you jeff
Tony already works :clap: :clap: :clap: :clap: :clap:
Thank you so much
Regarding the time unless you mark the graph, do you think of something?
Thanks again.
Kind regards,
José Ramón

--------------------------------------------------
gracias jeff
Tony ya funciona
Muchas Gracias
Respecto a la hora de menos que marca el gráfico se os ocurre algo?
Gracias de nuevo.
Un abrazo,
José Ramón
Image
User avatar
BeaumarisWX
Posts: 357
Joined: Mon 09 Apr 2012 2:38 pm
Weather Station: Davis VP2 Plus - 24hr FARS
Operating System: Windows 10 Pro Hades Canyon
Location: Beaumaris, Tasmania, AU
Contact:

Re: Help with recent graphics

Post by BeaumarisWX »

Hi José Ramón,
I'm happy you got it working.
Kind Regards,
Tony Beaumaris, Tasmania (AUS)

CMX Mobile : https://beaumaris-weather.com/BWX/
CMX Default: https://beaumaris-weather.com/cumulusmx_default/
Colour Dashboard : https://beaumaris-weather.com/dashborad_color.php
Click below for Saratoga Template :
Image
Post Reply