xXx

Hexid M1n1 5h3ll MobiLe

C:/Abyss Web Server/htdocs/Cumulus/cumx/_[ Writable ]

File:C:/Abyss Web Server/htdocs/Cumulus/cumx/cumulusmxcharts.js

/* based on cumusluscharts.js by mcrossley 
with additions for language translations in Saratoga template by ktrue
// Version 1.00 - 13-May-2020 - initial release
// Version 1.01 - 28-May-2021 - add cuDir variable for CumulusMX .json files not in same directory
  note: change cuDir to URL path of CumulusMX .json files 
    ='./'; for same directory as wxgraphs.php
    ='/cumulusdata/'; for files in http://your.website.com/cumulusdata/ directory
*/
var cuDir = './'; 
var chart, config;

cumxLang['/hr'] = '/hr';
if(typeof langBaroPerHour !== 'undefined') {
	cumxLang['/hr'] = langBaroPerHour;
}

$(document).ready(function ()
	{
		$.ajax(
			{
				url: cuDir+"graphconfig.json",
				dataType: "json",
				success: function (result)
				{
					config = result;
					doTemp();
		
				}
			}
		);
	}
);

function changeGraph(graph)
{
  switch (graph)
  {
  case 'temp':
    doTemp();
    break;
  case 'dailytemp':
    doDailyTemp();
    break;
  case 'press':
    doPress();
    break;
  case 'wind':
    doWind();
    break;
  case 'windDir':
    doWindDir();
    break;
  case 'rain':
    doRain();
    break;
  case 'dailyrain':
    doDailyRain();
    break;
  case 'humidity':
    doHum();
    break;
  case 'solar':
    doSolar();
    break;
  case 'sunhours':
    doSunHours();
    break;
  }
}

var doTemp = function ()
{
  var freezing = config.temp.units === 'C' ? 0 : 32;
  var options =
  {
    chart:
    {
      renderTo: 'chartcontainer',
      type: 'line',
      alignTicks: false
    },
    title:
    {
      text: cumxTranslate('Temperature')
    },
    credits:
    {
      enabled: true
    },
    xAxis:
    {
      type: 'datetime',
      ordinal: false,
      dateTimeLabelFormats:
      {
        day: '%e %b',
        week: '%e %b %y',
        month: '%b %y',
        year: '%Y'
      }
    },
    yAxis: [
      {
        // left
        title:
        {
          text: cumxTranslate('Temperature')+' (\u00B0' + config.temp.units + ')'
        },
        opposite: false,
        labels:
        {
          align: 'right',
          x: -5,
          formatter: function ()
          {
            return '<span style="fill: ' + (this.value <= freezing ? 'blue' : 'red') + ';">' + this.value + '</span>';
          }
        },
        plotLines: [
          {
            // freezing line
            value: freezing,
            color: 'rgb(0, 0, 180)',
            width: 1,
            zIndex: 2
          }
        ]
      },
      {
        // right
        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>';
          }
        }
      }
    ],
    legend:
    {
      enabled: true
    },
    plotOptions:
    {
      series:
      {
        dataGrouping:
        {
          enabled: false
        },
        states:
        {
          hover:
          {
            halo:
            {
              size: 5,
              opacity: 0.25
            }

          }
        },
        cursor: 'pointer',
        marker:
        {
          enabled: false,
          states:
          {
            hover:
            {
              enabled: true,
              radius: 0.1
            }
          }
        }
      },
      line:
      {
        lineWidth: 2
      }
    },
    tooltip:
    {
      shared: true,
      split: false,
      valueSuffix: '°' + config.temp.units,
      valueDecimals: config.temp.decimals,
      xDateFormat: "%A, %b %e, %H:%M"
    },
    series: [
      {
        name: cumxTranslate('Temperature'),
        zIndex: 99
      },
      {
        name: cumxTranslate('Dew Point')
      },
      {
        name: cumxTranslate('Feels like')
      },
      {
        name: cumxTranslate('Wind Chill')
      },
      {
        name: cumxTranslate('Heat Index')
      },
      {
        name: cumxTranslate('Indoor'),
        visible: false
      }
    ],
    rangeSelector:
    {
      buttons: [
        {
          count: 6,
          type: 'hour',
          text: '6h'
        },
        {
          count: 12,
          type: 'hour',
          text: '12h'
        },
        {
          type: 'all',
          text: 'All'
        }
      ],
      inputEnabled: false
    }
  };

  chart = new Highcharts.StockChart(options);
  chart.showLoading();

  $.ajax(
  {
    url: cuDir+'tempdata.json',
    cache: false,
    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.series[4].setData(resp.heatindex);
      chart.series[5].setData(resp.intemp);
    }
  }
  );
};

function cumxTranslate(t) {
	var out = t;
	if(typeof cumxLang[t] !== 'undefined') { 
	  out = cumxLang[t];
	}
	return(out);
}

var doPress = function ()
{
  var options =
  {
    chart:
    {
      renderTo: 'chartcontainer',
      type: 'line',
      alignTicks: false
    },
    title:
    {
      text: cumxTranslate('Barometer')
    },
    credits:
    {
      enabled: true
    },
    xAxis:
    {
      type: 'datetime',
      ordinal: false,
      dateTimeLabelFormats:
      {
        day: '%e %b',
        week: '%e %b %y',
        month: '%b %y',
        year: '%Y'
      }
    },
    yAxis: [
      {
        // left
        title:
        {
          text: cumxTranslate('Barometer')+' (' + config.press.units + ')'
        },
        opposite: false,
        labels:
        {
          align: 'right',
          x: -5,
          formatter: function ()
          {
            return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
          }
        }
      },
      {
        // right
        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>';
          }
        }
      }
    ],
    legend:
    {
      enabled: true
    },
    plotOptions:
    {
      series:
      {
        dataGrouping:
        {
          enabled: false
        },
        states:
        {
          hover:
          {
            halo:
            {
              size: 5,
              opacity: 0.25
            }

          }
        },
        cursor: 'pointer',
        marker:
        {
          enabled: false,
          states:
          {
            hover:
            {
              enabled: true,
              radius: 0.1
            }
          }
        }
      },
      line:
      {
        lineWidth: 2
      }
    },
    tooltip:
    {
      shared: true,
      split: false,
      valueSuffix: config.press.units,
      valueDecimals: config.press.decimals,
      xDateFormat: "%A, %b %e, %H:%M"
    },
    series: [
      {
        name: cumxTranslate('Barometer')
      }
    ],
    rangeSelector:
    {
      buttons: [
        {
          count: 6,
          type: 'hour',
          text: '6h'
        },
        {
          count: 12,
          type: 'hour',
          text: '12h'
        },
        {
          type: 'all',
          text: 'All'
        }
      ],
      inputEnabled: false
    }
  };

  chart = new Highcharts.StockChart(options);
  chart.showLoading();

  $.ajax(
  {
    url: cuDir+'pressdata.json',
    dataType: 'json',
    cache: false,
    success: function (resp)
    {
      chart.hideLoading();
      chart.series[0].setData(resp.press);
    }
  }
  );
};

var compassP = function (deg)
{
  var a = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
	var b = a[Math.floor((deg + 22.5) / 45) % 8];
	return cumxTranslate(b);
};

var doWindDir = function ()
{
  var options =
  {
    chart:
    {
      renderTo: 'chartcontainer',
      type: 'scatter',
      alignTicks: false
    },
    title:
    {
      text: cumxTranslate('Wind Direction')
    },
    credits:
    {
      enabled: true
    },
    xAxis:
    {
      type: 'datetime',
      ordinal: false,
      dateTimeLabelFormats:
      {
        day: '%e %b',
        week: '%e %b %y',
        month: '%b %y',
        year: '%Y'
      }
    },
    yAxis: [
      {
        // left
        title:
        {
          text: cumxTranslate('Bearing')
        },
        opposite: false,
        min: 0,
        max: 360,
        tickInterval: 45,
        labels:
        {
          align: 'right',
          x: -5,
          formatter: function ()
          {
            return compassP(this.value);
          }
        }
      },
      {
        // right
        linkedTo: 0,
        gridLineWidth: 0,
        opposite: true,
        title:
        {
          text: null
        },
        min: 0,
        max: 360,
        tickInterval: 45,
        labels:
        {
          align: 'left',
          x: 5,
          formatter: function ()
          {
            return compassP(this.value);
          }
        }
      }
    ],
    legend:
    {
      enabled: true
    },
    plotOptions:
    {
      scatter:
      {
        cursor: 'pointer',
        enableMouseTracking: false,
        marker:
        {
          states:
          {
            hover:
            {
              enabled: false
            },
            select:
            {
              enabled: false
            }
          }
        },
        shadow: false
      }

    },
    tooltip:
    {
      enabled: false
    },
    series: [
      {
        name: cumxTranslate('Bearing'),
        type: 'scatter',
        marker:
        {
          symbol: 'circle',
          radius: 2
        }
      },
      {
        name: cumxTranslate('Avg Bearing'),
        type: 'scatter',
        color: 'red',
        marker:
        {
          symbol: 'circle',
          radius: 2
        }
      }
    ],
    rangeSelector:
    {
      buttons: [
        {
          count: 6,
          type: 'hour',
          text: '6h'
        },
        {
          count: 12,
          type: 'hour',
          text: '12h'
        },
        {
          type: 'all',
          text: 'All'
        }
      ],
      inputEnabled: false
    }
  };

  chart = new Highcharts.StockChart(options);
  chart.showLoading();

  $.ajax(
  {
    url: cuDir+'wdirdata.json',
    dataType: 'json',
    cache: false,
    success: function (resp)
    {
      chart.hideLoading();
      chart.series[0].setData(resp.bearing);
      chart.series[1].setData(resp.avgbearing);
    }
  }
  );
};

var doWind = function ()
{
  var options =
  {
    chart:
    {
      renderTo: 'chartcontainer',
      type: 'line',
      alignTicks: false
    },
    title:
    {
      text: cumxTranslate('Wind')
    },
    credits:
    {
      enabled: true
    },
    xAxis:
    {
      type: 'datetime',
      ordinal: false,
      dateTimeLabelFormats:
      {
        day: '%e %b',
        week: '%e %b %y',
        month: '%b %y',
        year: '%Y'
      }
    },
    yAxis: [
      {
        // left
        title:
        {
          text: cumxTranslate('Wind')+' (' + config.wind.units + ')'
        },
        opposite: false,
        min: 0,
        labels:
        {
          align: 'right',
          x: -5,
          formatter: function ()
          {
            return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
          }
        }
      },
      {
        // right
        linkedTo: 0,
        gridLineWidth: 0,
        opposite: true,
        min: 0,
        title:
        {
          text: null
        },
        labels:
        {
          align: 'left',
          x: 5,
          formatter: function ()
          {
            return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
          }
        }
      }
    ],
    legend:
    {
      enabled: true
    },
    plotOptions:
    {
      series:
      {
        dataGrouping:
        {
          enabled: false
        },
        states:
        {
          hover:
          {
            halo:
            {
              size: 5,
              opacity: 0.25
            }

          }
        },
        cursor: 'pointer',
        marker:
        {
          enabled: false,
          states:
          {
            hover:
            {
              enabled: true,
              radius: 0.1
            }
          }
        }
      },
      line:
      {
        lineWidth: 2
      }
    },
    tooltip:
    {
      shared: true,
      split: false,
      valueSuffix: config.wind.units,
      valueDecimals: config.wind.decimals,
      xDateFormat: "%A, %b %e, %H:%M"
    },
    series: [
      {
        name: cumxTranslate('Wind')
      },
      {
        name: cumxTranslate('Gust')
      }
    ],
    rangeSelector:
    {
      buttons: [
        {
          count: 6,
          type: 'hour',
          text: '6h'
        },
        {
          count: 12,
          type: 'hour',
          text: '12h'
        },
        {
          type: 'all',
          text: 'All'
        }
      ],
      inputEnabled: false
    }
  };

  chart = new Highcharts.StockChart(options);
  chart.showLoading();

  $.ajax(
  {
    url: cuDir+'winddata.json',
    dataType: 'json',
    cache: false,
    success: function (resp)
    {
      chart.hideLoading();
      chart.series[0].setData(resp.wspeed);
      chart.series[1].setData(resp.wgust);
    }
  }
  );
};

var doRain = function ()
{
  var options =
  {
    chart:
    {
      renderTo: 'chartcontainer',
      type: 'line',
      alignTicks: true
    },
    title:
    {
      text: cumxTranslate('Rain Today')
    },
    credits:
    {
      enabled: true
    },
    xAxis:
    {
      type: 'datetime',
      ordinal: false,
      dateTimeLabelFormats:
      {
        day: '%e %b',
        week: '%e %b %y',
        month: '%b %y',
        year: '%Y'
      }
    },
    yAxis: [
      {
        // left
        title:
        {
          text: cumxTranslate('Rain Rate')+' (' + config.rain.units + cumxTranslate('/hr')+')'
        },
        min: 0,
        opposite: false,
        labels:
        {
          align: 'right',
          x: -5,
          formatter: function ()
          {
            return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
          }
        }
      },
      {
        // right
        opposite: true,
        title:
        {
          text: cumxTranslate('Rain')+' (' + config.rain.units + ')'
        },
        min: 0,
        labels:
        {
          align: 'left',
          x: 5,
          formatter: function ()
          {
            return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
          }
        }
      }
    ],
    legend:
    {
      enabled: true
    },
    plotOptions:
    {
      series:
      {
        dataGrouping:
        {
          enabled: false
        },
        states:
        {
          hover:
          {
            halo:
            {
              size: 5,
              opacity: 0.25
            }

          }
        },
        cursor: 'pointer',
        marker:
        {
          enabled: false,
          states:
          {
            hover:
            {
              enabled: true,
              radius: 0.1
            }
          }
        }
      },
      line:
      {
        lineWidth: 2
      }
    },
    tooltip:
    {
      shared: true,
      split: false,
      valueDecimals: config.rain.decimals,
      xDateFormat: "%A, %b %e, %H:%M"
    },
    series: [
      {
        name: cumxTranslate('Rain Rate'),
        type: 'line',
        yAxis: 0,
        tooltip:
        {
          valueSuffix: config.rain.units + cumxTranslate('/hr')
        }
      },
      {
        name: cumxTranslate('Rain'),
        type: 'area',
        yAxis: 1,
        tooltip:
        {
          valueSuffix: config.rain.units
        }
      }
    ],
    rangeSelector:
    {
      buttons: [
        {
          count: 6,
          type: 'hour',
          text: '6h'
        },
        {
          count: 12,
          type: 'hour',
          text: '12h'
        },
        {
          type: 'all',
          text: 'All'
        }
      ],
      inputEnabled: false
    }
  };

  chart = new Highcharts.StockChart(options);
  chart.showLoading();

  $.ajax(
  {
    url: cuDir+'raindata.json',
    dataType: 'json',
    cache: false,
    success: function (resp)
    {
      chart.hideLoading();
      chart.series[0].setData(resp.rrate);
      chart.series[1].setData(resp.rfall);
    }
  }
  );
};

var doHum = function ()
{
  var options =
  {
    chart:
    {
      renderTo: 'chartcontainer',
      type: 'line',
      alignTicks: false
    },
    title:
    {
      text: cumxTranslate('Humidity')
    },
    credits:
    {
      enabled: true
    },
    xAxis:
    {
      type: 'datetime',
      ordinal: false,
      dateTimeLabelFormats:
      {
        day: '%e %b',
        week: '%e %b %y',
        month: '%b %y',
        year: '%Y'
      }
    },
    yAxis: [
      {
        // left
        title:
        {
          text: cumxTranslate('Humidity')+' (%)'
        },
        opposite: false,
        min: 0,
        max: 100,
        labels:
        {
          align: 'right',
          x: -5,
          formatter: function ()
          {
            return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
          }
        }
      },
      {
        // right
        linkedTo: 0,
        gridLineWidth: 0,
        opposite: true,
        min: 0,
        max: 100,
        title:
        {
          text: null
        },
        labels:
        {
          align: 'left',
          x: 5,
          formatter: function ()
          {
            return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
          }
        }
      }
    ],
    legend:
    {
      enabled: true
    },
    plotOptions:
    {
      series:
      {
        dataGrouping:
        {
          enabled: false
        },
        states:
        {
          hover:
          {
            halo:
            {
              size: 5,
              opacity: 0.25
            }

          }
        },
        cursor: 'pointer',
        marker:
        {
          enabled: false,
          states:
          {
            hover:
            {
              enabled: true,
              radius: 0.1
            }
          }
        }
      },
      line:
      {
        lineWidth: 2
      }
    },
    tooltip:
    {
      shared: true,
      split: false,
      valueSuffix: '%',
      valueDecimals: config.hum.decimals,
      xDateFormat: "%A, %b %e, %H:%M"
    },
    series: [
      {
        name: cumxTranslate('Humidity')
      },
      {
        name: cumxTranslate('Indoor')
      }
    ],
    rangeSelector:
    {
      buttons: [
        {
          count: 6,
          type: 'hour',
          text: '6h'
        },
        {
          count: 12,
          type: 'hour',
          text: '12h'
        },
        {
          type: 'all',
          text: 'All'
        }
      ],
      inputEnabled: false
    }
  };

  chart = new Highcharts.StockChart(options);
  chart.showLoading();

  $.ajax(
  {
    url: cuDir+'humdata.json',
    dataType: 'json',
    cache: false,
    success: function (resp)
    {
      chart.hideLoading();
      chart.series[0].setData(resp.hum);
      chart.series[1].setData(resp.inhum);
    }
  }
  );
};

var doSolar = function ()
{
  var options =
  {
    chart:
    {
      renderTo: 'chartcontainer',
      type: 'line',
      alignTicks: true
    },
    title:
    {
      text: cumxTranslate('Solar Radiation')
    },
    credits:
    {
      enabled: true
    },
    xAxis:
    {
      type: 'datetime',
      ordinal: false,
      dateTimeLabelFormats:
      {
        day: '%e %b',
        week: '%e %b %y',
        month: '%b %y',
        year: '%Y'
      }
    },
    yAxis: [
      {
        // left
        title:
        {
          text: cumxTranslate('Solar Radiation')+' (W/m\u00B2)'
        },
        min: 0,
        opposite: false,
        labels:
        {
          align: 'right',
          x: -5,
          formatter: function ()
          {
            return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
          }
        }
      },
      {
        // right
        opposite: true,
        title:
        {
          text: cumxTranslate('UV Index')
        },
        min: 0,
        labels:
        {
          align: 'left',
          x: 5,
          formatter: function ()
          {
            return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
          }
        }
      }
    ],
    legend:
    {
      enabled: true
    },
    plotOptions:
    {
      series:
      {
        dataGrouping:
        {
          enabled: false
        },
        states:
        {
          hover:
          {
            halo:
            {
              size: 5,
              opacity: 0.25
            }

          }
        },
        cursor: 'pointer',
        marker:
        {
          enabled: false,
          states:
          {
            hover:
            {
              enabled: true,
              radius: 0.1
            }
          }
        }
      },
      line:
      {
        lineWidth: 2
      }
    },
    tooltip:
    {
      shared: true,
      split: false,
      xDateFormat: "%A, %b %e, %H:%M"
    },
    series: [
      {
        name: cumxTranslate('Solar Radiation'),
        type: 'area',
        yAxis: 0,
        valueDecimals: 0,
        tooltip:
        {
          valueSuffix: 'W/m\u00B2'
        }
      },
      {
        name: cumxTranslate('Theoretical Max'),
        type: 'area',
        yAxis: 0,
        valueDecimals: 0,
        tooltip:
        {
          valueSuffix: 'W/m\u00B2'
        }
      },
      {
        name: cumxTranslate('UV Index'),
        type: 'line',
        yAxis: 1,
        valueDecimals: config.uv.decimals,
        tooltip:
        {
          valueSuffix: ''
        }
      }
    ],
    rangeSelector:
    {
      buttons: [
        {
          count: 6,
          type: 'hour',
          text: '6h'
        },
        {
          count: 12,
          type: 'hour',
          text: '12h'
        },
        {
          type: 'all',
          text: 'All'
        }
      ],
      inputEnabled: false
    }
  };

  chart = new Highcharts.StockChart(options);
  chart.showLoading();

  $.ajax(
  {
    url: cuDir+'solardata.json',
    dataType: 'json',
    cache: false,
    success: function (resp)
    {
      chart.hideLoading();
      chart.series[0].setData(resp.SolarRad);
      chart.series[1].setData(resp.CurrentSolarMax);
      chart.series[2].setData(resp.UV);
    }
  }
  );
};

var doSunHours = function ()
{
  var options =
  {
    chart:
    {
      renderTo: 'chartcontainer',
      type: 'column',
      alignTicks: false
    },
    title:
    {
      text: cumxTranslate('Sunshine Hours')
    },
    credits:
    {
      enabled: true
    },
    xAxis:
    {
      type: 'datetime',
      ordinal: false,
      dateTimeLabelFormats:
      {
        day: '%e %b',
        week: '%e %b %y',
        month: '%b %y',
        year: '%Y'
      }
    },
    yAxis: [
      {
        // left
        title:
        {
          text: cumxTranslate('Sunshine Hours')
        },
        min: 0,
        opposite: false,
        labels:
        {
          align: 'right',
          x: -12,
          formatter: function ()
          {
            return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
          }
        }
      },
      {
        // right
        linkedTo: 0,
        gridLineWidth: 0,
        opposite: true,
        title:
        {
          text: null
        },
        labels:
        {
          align: 'left',
          x: 12,
          formatter: function ()
          {
            return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
          }
        }
      }
    ],
    legend:

    {
      enabled: true
    },
    plotOptions:
    {
      series:
      {
        dataGrouping:
        {
          enabled: false
        },
        states:
        {
          hover:
          {
            halo:
            {
              size: 5,
              opacity: 0.25
            }

          }
        },
        cursor: 'pointer',
        marker:
        {
          enabled: false,
          states:
          {
            hover:
            {
              enabled: true,
              radius: 0.1
            }
          }
        }
      }
    },
    tooltip:
    {
      shared: true,
      split: false,
      xDateFormat: "%A, %b %e"
    },
    series: [
      {
        name: cumxTranslate('Sunshine Hours'),
        type: 'column',
        color: 'gold',
        yAxis: 0,
        valueDecimals: 1,
        tooltip:
        {
          valueSuffix: 'Hrs'
        }
      }
    ]
  };

  chart = new Highcharts.Chart(options);
  chart.showLoading();

  $.ajax(
  {
    url: cuDir+'sunhours.json',
    dataType: 'json',
    cache: false,
    success: function (resp)
    {
      chart.hideLoading();
      chart.series[0].setData(resp.sunhours);
    }
  }
  );
};

var doDailyRain = function ()
{
  var options =
  {
    chart:
    {
      renderTo: 'chartcontainer',
      type: 'column',
      alignTicks: false
    },
    title:
    {
      text: cumxTranslate('Daily Rain Totals')
    },
    credits:
    {
      enabled: true
    },
    xAxis:
    {
      type: 'datetime',
      ordinal: false,
      dateTimeLabelFormats:
      {
        day: '%e %b',
        week: '%e %b %y',
        month: '%b %y',
        year: '%Y'
      }
    },
    yAxis: [
      {
        // left
        title:
        {
          text: cumxTranslate('Rain')+' (' + config.rain.units + ')'
        },
        min: 0,
        opposite: false,
        labels:
        {
          align: 'right',
          x: -12,
          formatter: function ()
          {
            return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
          }
        }
      },
      {
        // right
        linkedTo: 0,
        gridLineWidth: 0,
        opposite: true,
        title:
        {
          text: null
        },
        labels:
        {
          align: 'left',
          x: 12,
          formatter: function ()
          {
            return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
          }
        }
      }
    ],
    legend:
    {
      enabled: true
    },
    plotOptions:
    {
      series:
      {
        dataGrouping:
        {
          enabled: false
        },
        states:
        {
          hover:
          {
            halo:
            {
              size: 5,
              opacity: 0.25
            }

          }
        },
        cursor: 'pointer',
        marker:
        {
          enabled: false,
          states:
          {
            hover:
            {
              enabled: true,
              radius: 0.1
            }
          }
        }
      }
    },
    tooltip:
    {
      shared: true,
      split: false,
      xDateFormat: "%A, %b %e"
    },
    series: [
      {
        name: cumxTranslate('Rain'),
        type: 'column',
        color: 'blue',
        yAxis: 0,
        valueDecimals: config.rain.decimals,
        tooltip:
        {
          valueSuffix: config.rain.units
        }
      }
    ]
  };

  chart = new Highcharts.Chart(options);
  chart.showLoading();

  $.ajax(
  {
    url: cuDir+'dailyrain.json',
    dataType: 'json',
    cache: false,
    success: function (resp)
    {
      chart.hideLoading();
      chart.series[0].setData(resp.dailyrain);
    }
  }
  );
};

var doDailyTemp = function ()
{
  var freezing = config.temp.units === 'C' ? 0 : 32;
  var options =
  {
    chart:
    {
      renderTo: 'chartcontainer',
      type: 'line',
      alignTicks: false
    },
    title:
    {
      text: cumxTranslate('Daily Temperature')
    },
    credits:
    {
      enabled: true
    },
    xAxis:
    {
      type: 'datetime',
      ordinal: false,
      dateTimeLabelFormats:
      {
        day: '%e %b',
        week: '%e %b %y',
        month: '%b %y',
        year: '%Y'
      }
    },
    yAxis: [
      {
        // left
        title:
        {
          text: cumxTranslate('Temperature')+' (\u00B0' + config.temp.units + ')'
        },
        opposite: false,
        labels:
        {
          align: 'right',
          x: -5,
          formatter: function ()
          {
            return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
          }
        },
        plotLines: [
          {
            // freezing line
            value: freezing,
            color: 'rgb(0, 0, 180)',
            width: 1,
            zIndex: 2
          }
        ]
      },
      {
        // right
        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>';
          }
        }
      }
    ],
    legend:
    {
      enabled: true
    },
    plotOptions:
    {
      series:
      {
        dataGrouping:
        {
          enabled: false
        },
        states:
        {
          hover:
          {
            halo:
            {
              size: 5,
              opacity: 0.25
            }

          }
        },
        cursor: 'pointer',
        marker:
        {
          enabled: false,
          states:
          {
            hover:
            {
              enabled: true,
              radius: 0.1
            }
          }
        }
      },
      line:
      {
        lineWidth: 2
      }
    },
    tooltip:
    {
      shared: true,
      split: false,
      valueSuffix: '°' + config.temp.units,
      valueDecimals: config.temp.decimals,
      xDateFormat: "%A, %b %e"
    },
    rangeSelector:
    {
      enabled: false
    },
    series: [
      {
        name: cumxTranslate('Average temperature'),
        color: 'green'
      },
      {
        name: cumxTranslate('Minimum temperature'),
        color: 'blue'
      },
      {
        name: cumxTranslate('Maximum temperature'),
        color: 'red'
      }
    ]
  };

  chart = new Highcharts.StockChart(options);
  chart.showLoading();

  $.ajax(
  {
    url: cuDir+'dailytemp.json',
    dataType: 'json',
    cache: false,
    success: function (resp)
    {
      chart.hideLoading();
      chart.series[0].setData(resp.avgtemp);
      chart.series[1].setData(resp.mintemp);
      chart.series[2].setData(resp.maxtemp);
    }
  }
  );
};
/* end of cumulusmxcharts.js */

Your Access Expired	Date. in : 02-11-2025
Regist : 09-12-2024	Expired : 01-12-2027