Plotly plotter about sacredboard HOT 3 CLOSED

The result should be a HTML component that can plot several series at once.

• plot several series at once
• The x and y axes must support definable labels
• The plot must show the series' label (the label must be unique)
• It must be possible to dynamically add/remove series.
• The x-axis must support both numerical and date values.
  • Date should be displayed in the local timezone.
• The x-axis and y-axis must allow linear/log scale.

from sacredboard.

The component should be defined as:

<plot-chart params="
	series: [series1, series2, series3],
	xLabel:'x label', yLabel:'y label',
	xType: 'date',
	yType: 'linear'"></plot-chart>

• (optional) xLabel and yLabel axes labels
• (optional) xType and yType are one of linear, log or date.
  • Date expects the corresponding values to be of JavaScript Date type.
  • The type of the data in the series must correspond to the type of the axis (number/date)
• series1...seriesN are series to be displayed, each of them having properties

{x: [0, 1, 2,...], y: [10,20,30,...], label: "a data series"}
// or, for date-based data
{x: [date1, date2, date3,...], y: [10,20,30,...], label: "a data series"}

• All the arrays and labels should be wrapped by Knockout observables so that the chart gets modified automatically. X and Y can be either a regular observable or an arrayObservable.

Implementation

Implemented as a Javascript module in the plot directory.

from sacredboard.

Test scenario (in-code):
You can use the test page (http://127.0.0.1:5000/static/scripts/plot/test.html).

1. Create the <plot-chart> element with an observable array of series that have the x andy elements defined as well as observable arrays. The xLabel and yLabel of the chart, as well as the label of the series, are observables too. (defined as ko.observable(value) or (ko.observableArray([]))
   2.set different values for axes labels ( e.g. in the developer console )
2. remove one of the series, then the other one, and re-add them to the observable array in the reverse direction (so that the first one that was removed is added back to the chart first).
   NOTE: this is needed when we want to dynamically add another trace (e.g. when changing from step-based to time-based x-axis as defined in #6)
3. Add two series with a time-based x axis (so that the chart shows some progress over time)

from sacredboard.