How to use the smoothie.TimeSeries function in smoothie
To help you get started, we’ve selected a few smoothie examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
karlcswanson / micboard / js / chart-smoothie.js View on Github 
fillStyle: 'transparent',
},
labels: {
disabled: true,
},
maxValue: 200,
minValue: 0,
// scaleSmoothing:.7,
limitFPS: 0,
};
chart.slotChart = new SmoothieChart(chartOptions);
if (micboard.MIC_MODELS.indexOf(data.type) > -1) {
chart.audioSeries = new TimeSeries();
chart.rfSeries = new TimeSeries();
chart.slotChart.addTimeSeries(chart.audioSeries, {
strokeStyle: '#69B578',
fillStyle: '',
lineWidth: 2,
});
chart.slotChart.addTimeSeries(chart.rfSeries, {
strokeStyle: '#DC493A',
fillStyle: '',
lineWidth: 2,
});
} else if (micboard.IEM_MODELS.indexOf(data.type) > -1) {
chart.audioLSeries = new TimeSeries();
chart.audioRSeries = new TimeSeries();
chart.slotChart.addTimeSeries(chart.audioLSeries, {
strokeStyle: '#69B578',mounted () {
// Random data
var line1 = new TimeSeries()
// Add random data points at irregular intervals
var maxYValue = 10000
var addValueLoop = function () {
setTimeout(function () {
// Generate a random value, centered around zero, raised to the power of 5
// so that larger values occur less frequently
var value = Math.pow(Math.random() * 2 - 1, 5) * maxYValue
line1.append(new Date().getTime(), value)
addValueLoop()
}, Math.random() * 500)
}
addValueLoop()
var smoothie = new SmoothieChart({
grid: {
strokeStyle: 'transparent',
borderVisible: falsefontSize: 11,
precision: 0,
fillStyle: '#0f0e0e'
},
maxValue: parseInt(scope.maxValue),
minValue: parseInt(scope.minValue),
horizontalLines: [{
value: 5,
color: '#eff',
lineWidth: 1
}]
})
// smoothieJS - set up canvas element for chart
canvas = element.find('canvas')[0]
series = new smoothie.TimeSeries()
w = canvas.width
h = canvas.height
chart.addTimeSeries(series, {
strokeStyle: 'rgba(' + scope.color + ', 1)',
fillStyle: 'rgba(' + scope.color + ', 0.2)',
lineWidth: 2
})
chart.streamTo(canvas, 1000)
let dataCallInProgress = false
// update data on chart
scope.getData = function() {initChart(data) {
const chart = {};
chart.slotChart = new SmoothieChart(chartOptions);
if (MIC_MODELS.indexOf(data.type) > -1) {
chart.audioSeries = new TimeSeries();
chart.rfSeries = new TimeSeries();
chart.slotChart.addTimeSeries(chart.audioSeries, {
strokeStyle: '#69B578',
fillStyle: '',
lineWidth: 2,
});
chart.slotChart.addTimeSeries(chart.rfSeries, {
strokeStyle: '#DC493A',
fillStyle: '',
lineWidth: 2,
});
} else if (IEM_MODELS.indexOf(data.type) > -1) {
chart.audioLSeries = new TimeSeries();
chart.audioRSeries = new TimeSeries();
chart.slotChart.addTimeSeries(chart.audioLSeries, {function render () {
if (smoothie) smoothie.stop();
$('chart').width = document.body.clientWidth;
smoothie = new SmoothieChart();
smoothie.streamTo($('chart'), 1000);
time = new TimeSeries();
smoothie.addTimeSeries(time, {
strokeStyle: 'rgb(255, 0, 0)',
fillStyle: 'rgba(255, 0, 0, 0.4)',
lineWidth: 2
});
}},
maxValue: 100,
minValue: 0,
yMinFormatter: function (min, precision) {
return parseFloat(min).toFixed(precision) + '%';
},
yMaxFormatter: function (max, precision) {
return parseFloat(max).toFixed(precision) + '%';
},
labels: {
fillStyle: '#000000',
},
timestampFormatter: timestampFormatter,
});
this.cpuSeries = new TimeSeries();
this.cpuChart.addTimeSeries(this.cpuSeries, { lineWidth: 1, strokeStyle: '#51bb7b' });
this.cpuChart.streamTo(this.cpuChartCanvas.current, 1000);
}borderVisible: false,
millisPerLine: 10000,
},
yMinFormatter: function (min, precision) {
return parseFloat(min).toFixed(precision) + ' MiB';
},
yMaxFormatter: function (max, precision) {
return parseFloat(max).toFixed(precision) + ' MiB';
},
labels: {
fillStyle: '#000000',
},
timestampFormatter: timestampFormatter,
});
this.memorySeries = new TimeSeries();
this.memoryChart.addTimeSeries(this.memorySeries, { lineWidth: 1, strokeStyle: '#51bb7b' });
this.memoryChart.streamTo(this.memoryChartCanvas.current, 1000);
}server.get(scope.moduleName, function(serverResponseData) {
let numberOfLines = Object.keys(serverResponseData).length
for (let x = 0; x < numberOfLines; x++) {
let keyForThisLine = Object.keys(serverResponseData)[x];
scope.seriesArray[x] = new smoothie.TimeSeries();
chart.addTimeSeries(scope.seriesArray[x], seriesOptions[x]);
scope.metricsArray[x] = {
name: keyForThisLine,
color: seriesOptions[x].strokeStyle,
}
}
})chart.audioSeries = new TimeSeries();
chart.rfSeries = new TimeSeries();
chart.slotChart.addTimeSeries(chart.audioSeries, {
strokeStyle: '#69B578',
fillStyle: '',
lineWidth: 2,
});
chart.slotChart.addTimeSeries(chart.rfSeries, {
strokeStyle: '#DC493A',
fillStyle: '',
lineWidth: 2,
});
} else if (IEM_MODELS.indexOf(data.type) > -1) {
chart.audioLSeries = new TimeSeries();
chart.audioRSeries = new TimeSeries();
chart.slotChart.addTimeSeries(chart.audioLSeries, {
strokeStyle: '#69B578',
fillStyle: '',
lineWidth: 2,
});
chart.slotChart.addTimeSeries(chart.audioRSeries, {
strokeStyle: '#69B578',
fillStyle: '',
lineWidth: 2,
});
}
chart.slotChart.streamTo(this.chartElement, 100);
return chart;smoothie
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data
