Visualización de datos de transmisión en vivo en JavaScript puro-batido

Vista prévia

Descripción

Smoothie es una biblioteca de gráficos de JavaScript vainilla que se puede utilizar para visualizar flujos de datos en tiempo real con animaciones suaves utilizando la API de canvas de HTML5.

See also:

• biblioteca de visualización de datos de streaming en tiempo real â & #128; & #147; SensorChart

Install the Smoothie via NPM:

$ NPM install Smoothie

¿Cómo funciona?

Cree un elemento canvas HTML5 para el gráfico de batidos.

<canvas id="chart" width="100" height="100"></canvas>

Descargue y ponga el archivo JavaScript smoothie. js en la página web cuando sea necesario.

<script src="smoothie.js"></script>

Cree una nueva instancia del gráfico de batidos.

var chart = new SmoothieChart();

Agregue datos de secuencia personalizados al gráfico de batidos.

chart.addTimeSeries(data, {

 // parameters here
 });

Transmita un gráfico de batidos al elemento canvas.

smoothie.streamTo(document.getElementById("chart"));

Opciones posibles para el gráfico de batidos.

{

minValue: undefined,










// specify to clamp the lower y-axis to a given value

maxValue: undefined,










// specify to clamp the upper y-axis to a given value

maxValueScale: 1,











 // allows proportional padding to be added above the chart. for 10% padding, specify 1.1.

minValueScale: 1,











 // allows proportional padding to be added below the chart. for 10% padding, specify 1.1.

yRangeFunction: undefined,







// function({min: , max: }) { return {min: , max: }; }

scaleSmoothing: 0.125,









// controls the rate at which y-value zoom animation occurs

millisPerPixel: 20,










 // sets the speed at which the chart pans by

enableDpiScaling: true,








 // support rendering at different DPI depending on the device

yMinFormatter: function(min, precision) { // callback function that formats the min y value label


return parseFloat(min).toFixed(precision);

},

yMaxFormatter: function(max, precision) { // callback function that formats the max y value label


return parseFloat(max).toFixed(precision);

},

yIntermediateFormatter: function(intermediate, precision) { // callback function that formats the intermediate y value labels


return parseFloat(intermediate).toFixed(precision);

},

maxDataSetLength: 2,

interpolation: 'bezier'








 // one of 'bezier', 'linear', or 'step'

timestampFormatter: null,







 // optional function to format time stamps for bottom of chart






















// you may use SmoothieChart.timeFormatter, or your own: function(date) { return ''; }

scrollBackwards: false,








 // reverse the scroll direction of the chart

horizontalLines: [],










// [ { value: 0, color: '#ffffff', lineWidth: 1 } ]

grid:

{


fillStyle: '#000000',








 // the background colour of the chart


lineWidth: 1,












 // the pixel width of grid lines


strokeStyle: '#777777',







 // colour of grid lines


millisPerLine: 1000,









// distance between vertical grid lines


sharpLines: false,










// controls whether grid lines are 1px sharp, or softened


verticalSections: 2,









// number of vertical sections marked out by horizontal grid lines


borderVisible: true









 // whether the grid lines trace the border of the chart or not

},

labels

{


disabled: false,











// enables/disables labels showing the min/max values


fillStyle: '#ffffff',








 // colour for text of labels,


fontSize: 15,


fontFamily: 'sans-serif',


precision: 2,


showIntermediateLabels: false,




// shows intermediate labels between min and max values along y axis


intermediateLabelSameAxis: true,

},

title

{


text: '',














 // the text to display on the left side of the chart


fillStyle: '#ffffff',








 // colour for text


fontSize: 15,


fontFamily: 'sans-serif',


verticalAlign: 'middle'







 // one of 'top', 'middle', or 'bottom'

},

tooltip: false













// show tooltip when mouse is over the chart

tooltipLine: {













// properties for a vertical line at the cursor position


lineWidth: 1,


strokeStyle: '#BBBBBB'

},

tooltipFormatter: SmoothieChart.tooltipFormatter, // formatter function for tooltip text

nonRealtimeData: false,








 // use time of latest data as current time

displayDataFromPercentile: 1,





 // display not latest data, but data from the given percentile






















// useful when trying to see old data saved by setting a high value for maxDataSetLength






















// should be a value between 0 and 1

responsive: false,











// whether the chart should adapt to the size of the canvas

limitFPS: 0














 // maximum frame rate the chart will render at, in FPS (zero means no limit)
}

Registro de cambios

09/27/2018

• v1.3.5: add new intermediate label options