bokehJS with an ajax NCSS request

by Patrick Brockmann

HTML

<script src="https://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-api-1.3.4.min.js"></script>

JavaScript

// https://github.com/bokeh/bokeh/issues/658

//request = "http://webportals.ipsl.jussieu.fr/thredds/ncss/grid/EUROCORDEX/cordex_viewer/ensemble_statistic/TG/yr/rcp85/FRA/mean.nc?var=TG&latitude=0&longitude=0&temporal=all&accept=csv";

request = "https://thredds.ucar.edu/thredds/ncss/grib/NCEP/GFS/Pacific_20km/best?var=Temperature_height_above_ground&latitude=0&longitude=200&temporal=all&vertCoord=&accept=csv";

var x = [],
  y = [];

$.ajax({
  async: false,
  type: "GET",
  url: request,
  success: function(data) {
    // Split the lines
    var lines = data.split('\n');
    //console.log(lines);
    $.each(lines, function(lineNo, line) { // Iterate over the lines
      //console.log(line);
      // ncss display a empty line at end
      if (line.length == 0) return false;
      var items = line.split(',');
      // header line containes categories
      if (lineNo != 0) {
        x.push(Date.parse(items[0]));
        y.push(parseFloat(items[4]) - 273.15); // K to degC
      }
    });
  },
  error: function() {
    console.log(request);
  }
});

console.log(x, y);

// Few lines of BokehJS to produce a plot with all handy tools (zoom, pan, wheel_zoom, ...) ready to be used  

var plot = new Bokeh.Plotting.figure({
  title: 'Temperature_height_above_ground (degC) at 0N, 200E - NCSS request test',
  plot_width: 600,
  plot_height: 400,
  //x_range: [Date.parse("2010"), Date.parse("2020")],
  //y_range: [283, 288],
  tools: "pan,wheel_zoom,box_zoom,reset,save,crosshair",
  x_axis_type: "datetime"
});

plot.line(x, y, {
  line_width: 2,
  line_color: '#43A2CA'
});

//plot.circle(x, y, {
//  color: '#0000FF'
//});

// show the plot
Bokeh.Plotting.show(plot);