ColumnDataSource for Ellipse size mismatch

[fation.b]

const x = 0.002051;
const y = -0.005786;
const angle = 18.790194;
const width = 0.537613;
const height = 0.505947;
    // eslint-disable-next-line no-undef
const source = new Bokeh.ColumnDataSource({
      data: { x:x, y:y, width:width, height:height, angle:angle },
});

// create some ranges for the plot
const xdr = new Bokeh.Range1d({ start: -0.5, end: 20.5 });
const ydr = new Bokeh.Range1d({ start: -0.5, end: 20.5 });

// make the plot
const plot = new Bokeh.Plot({
    title: "BokehJS Plot",
    x_range: xdr,
    y_range: ydr,
    width: 400,
    height: 400,
    background_fill_color: "#F2F2F7"
});

// add axes to the plot
const xaxis = new Bokeh.LinearAxis({ axis_line_color: null });
const yaxis = new Bokeh.LinearAxis({ axis_line_color: null });
plot.add_layout(xaxis, "below");
plot.add_layout(yaxis, "left");

// add grids to the plot
const xgrid = new Bokeh.Grid({ ticker: xaxis.ticker, dimension: 0 });
const ygrid = new Bokeh.Grid({ ticker: yaxis.ticker, dimension: 1 });
plot.add_layout(xgrid);
plot.add_layout(ygrid);

// add a Line glyph
const line = new Bokeh.Ellipse({
    x: { field: "x" },
    y: { field: "y" },
  width: { field: "width" },
  height: { field: "height" },
  angle:{field:"angle"},
    line_color: "#666699",
    line_width: 2
});
plot.add_glyph(line, source);

Bokeh.Plotting.show(plot);

[Bryan]

Hi @fation.b please edit your post to use code formatting so that the code is intelligible (either with the </> icon on the editing toolbar, or triple backtick ``` fences around the code blocks)

[carolyn]

Hi @fation.b ,

The ColumnDataSource is expecting lists, not single numbers, for its values. Try redefining your variables as lists.

Like this:

const x = [0.002051];
const y = [-0.005786];
const angle = [18.790194];
const width = [0.537613];
const height = [0.505947];