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
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
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
Moderator: mcrossley
-
- 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
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.
i dont see the cumuluscharts.js being called anywhere and should be in the js folder of the cumulus installation
then add 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
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>
then add
Code: Select all
<script src="js/cumuluscharts.js"></script>
If thats not it someone else will chime in
Jeff
My Site http://wickliffeweather.com/
WeatherUnderground https://www.wunderground.com/personal-w ... KOHYOUNG21
My Site http://wickliffeweather.com/
WeatherUnderground https://www.wunderground.com/personal-w ... KOHYOUNG21
- 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
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 :
Try changing to following : Note Entire file below and has windDir changed to windDirg
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,
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 :
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 :
-
- 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
thank you jeff
Tony already works
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
Tony already works
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
- 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
Hi José Ramón,
I'm happy you got it working.
Kind Regards,
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 :
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 :