How to use smoothie - 10 common examples
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() {let start_rendering_line_chart = function () {
if (!scope.color)
scope.color = '0, 255, 0'
let series, w, h, canvas
angular.element($window).bind('resize', function() {
canvas.width = w
canvas.height = h
})
// smoothieJS - Create new chart
let chart = new smoothie.SmoothieChart({
borderVisible: false,
sharpLines: true,
grid: {
fillStyle: '#ffffff',
strokeStyle: 'rgba(232,230,230,0.93)',
sharpLines: true,
millisPerLine: 3000,
borderVisible: false
},
labels: {
fontSize: 11,
precision: 0,
fillStyle: '#0f0e0e'
},
maxValue: parseInt(scope.maxValue),
minValue: parseInt(scope.minValue),millisPerPixel: 25,
grid: {
verticalSections: 0,
strokeStyle: 'transparent',
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) {link: function(scope, element) {
let w, h, canvas
angular.element($window).bind('resize', function() {
canvas.width = w
canvas.height = h
})
// smoothieJS - Create new chart
let chart = new smoothie.SmoothieChart({
borderVisible: false,
sharpLines: true,
grid: {
fillStyle: '#ffffff',
strokeStyle: 'rgba(232,230,230,0.93)',
sharpLines: true,
borderVisible: false
},
labels: {
fontSize: 12,
precision: 0,
fillStyle: '#0f0e0e'
},
maxValue: 100,
minValue: 0,
horizontalLines: [{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: false
},
tooltip: true,
labels: { disabled: true }
})
smoothie.addTimeSeries(line1, {
strokeStyle: 'rgb(0, 255, 0)',
fillStyle: 'rgba(0, 255, 0, 0.4)',
lineWidth: 2
})
smoothie.streamTo(document.getElementById('smoothie-chart'), 100)
}
}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);
}smoothie
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data
