OdinGraph

A Data Graphing component based off the Plotly graphing library. This component will allow you to produce interactive graphs to display the data from an Endpoint.

Currently, this component can produce both line graphs, and heatmaps, as required. Data can be provided as an array of values, or as an array of arrays of values, effectively as a 2 dimensional array. Depending on the type of graph required, this will either be for multiple datasets, or for a 2 dimensional array.

Because this component uses the Plotly library, it allows a user to manipulate the graph if required. The graphs produced can be zoomed and panned, and if multiple datasets are present, individual datasets can be shown or hidden if required. Graphs can also be exported as PNG images.

Properties

• prop_data (Data Object/Array)

  A 1 or 2 dimensional array of the data to be displayed by the Graph Component

• type (string)

  The type of data to display. By default, this will be "scatter", for line graphs. Other options include "line", also for line graphs, "heatmap", for 2d heatmaps, and "contour", for 2d contour maps. If a 2d graph type is selected, but a 1d data array provided, num_x must not be null so that the component may reshape the data.

• num_x (integer)

  The number of datapoints, horizontally, for a 2d graph type. Will be ignored unless the data provided is 1d.

• series_names (array of strings)

  The label, or labels, for the datasets provided, especially useful if the data is made up of multiple 1D datasets, as with multiple line graphs.

• title (string)

  Title for the produced graph,

Examples

const data_1d_multiple = [Array.from(Array(5), () => Math.round(Math.random()*10)),
                              Array.from(Array(5), () => Math.round(Math.random()*10)),
                              Array.from(Array(5), () => Math.round(Math.random()*10)),
                              Array.from(Array(5), () => Math.round(Math.random()*10)),
                              Array.from(Array(5), () => Math.round(Math.random()*10))];
...
<OdinGraph title="Multiple Datasets" prop_data={data_1d_multiple}
                       series_names={["Test 1", "Test 2", "Test Again", "Low", "High"]}/>

---

const data_1d_multiple = [Array.from(Array(5), () => Math.round(Math.random()*10)),
                              Array.from(Array(5), () => Math.round(Math.random()*10)),
                              Array.from(Array(5), () => Math.round(Math.random()*10)),
                              Array.from(Array(5), () => Math.round(Math.random()*10)),
                              Array.from(Array(5), () => Math.round(Math.random()*10))];
...
<OdinGraph title="Heatmap" prop_data={data_1d_multiple} type="heatmap" />