SeaMon.graphics.echarts.*

Description

Graphical helper functions for plotting ECharts time-series data from SeaMon-API forecasts.

Functions

SeaMon.graphics.echarts.plotConfig

Constructs an ECharts plot options for plotting with the ECharts library.

plotOpts = SeaMon.graphics.echarts.plotConfig(data,
                                              model,
                                              param,
                                              opts={wpMarkers:false,
                                                    tooltipCallback: null})

Parameters

Parameter	Value	Description
data	json data object	SeaMon-API forecast data from SeaMon.forecast.* methods
model	string	model name in forecast data, e.g. 'gfs'
param	string	picks weather parameter name in forecast data, e.g. 'wind'
wpMarkers	boolean	choose weather to add waypoint markers to time series graph
tooltipCallback	function	callback funtion, must accept (index, latlong, data)

Return values

Parameter	Value	Description
plotOpts	ECharts options	for editing and passing to ECharts library for plotting

Example

Fetch wind forecast data from SeaMon and plot time series with ECharts

<div id="graphs-container-wind"></div>

<style>
#graphs-container-wind {
  position: absolute;
  width: 100%;
  height: 300px;
}
</style>

<script>
// init echarts plot area (see ECharts docs)
var chart = echarts.init( $('#graphs-container-wind')[0] );
window.addEventListener('resize', function(){
  chart.resize();
});

// fetch forecast data and run plotting on the data
SeaMon.forecast.drive([['Reykjavik','now'], ['Akureyri','80kph']], ['harm|wind'])
.then( data => {

  // create time series plot config from wind forecast data
  let windOpts = SeaMon.graphics.echarts.plotConfig(data, "harm", "wind");

  // can edit ECharts options here before plotting, (refer to ECharts docs for options)
  // e.g. change axisLabel font size:
  windOpts.xAxis.axisLabel.fontSize = 18;

  // insert data and options into EChart
  chart.setOption(windOpts);
})
.catch( e => {
  console.log("error:", e.message);
});
</script>