I would like to install in a component via CDN called vue-cc-quaggajs to read barcodes.
I've tried the following:
new Vue({
el: "#app",
data: {
readerSize: {
width: 640,
height: 480
}
},
methods: {
logIt (data) {
console.log('detected', data)
}
},
components: {
//QuaggaScanner
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#carloscgo/vue-cc-quaggajs#2.0.0/dist/vue-quagga.js"></script>
<div id="app">
<quagga-scanner :onDetected="logIt" :readerSize="readerSize" :readerType="'ean_reader'"></quagga-scanner>
</div>
But I'm getting some errors, like:
Cannot read property 'width' of undefined" found in Scanner - Root
Could you help me? I don't know if I'm referencing the right JS file or if I could use another component to scan barcodes.
I have succeeded with quagga-scanner by building the component with CDN. It works as the default package. Here is the live demo. I worked with this image and it gives me output at console.log.
Note: Use a good camera to read the barcode. Stackoverflow snippet will not work as you don't get the camera permission from the snippet.
Vue.component('quagga-scanner', {
props: {
onDetected: {
type: Function,
},
onProcessed: {
type: Function,
},
readerType: {
type: String,
default: 'code_128_reader',
},
readerSize: {
width: {
type: Number,
default: 640,
},
height: {
type: Number,
default: 480,
}
}
},
data() {
return {
quaggaState: {
inputStream: {
type: 'LiveStream',
constraints: {
width: {
min: this.readerSize.width
},
height: {
min: this.readerSize.height
},
facingMode: 'environment',
aspectRatio: {
min: 1,
max: 2
}
}
},
locator: {
patchSize: 'medium',
halfSample: true
},
numOfWorkers: 4,
frequency: 10,
decoder: {
readers: [{
format: this.readerType,
config: {}
}]
},
locate: true
},
}
},
mounted() {
this.init();
},
methods: {
init() {
Quagga.init(this.quaggaState, function(err) {
if (err) {
return console.log(err);
}
Quagga.start();
});
Quagga.onDetected(this.onDetected ? this.onDetected : this._onDetected);
Quagga.onProcessed(this.onProcessed ? this.onProcessed : this._onProcessed);
},
reInit() {
Quagga.stop();
this.init();
},
getImage() {
const canvas = Quagga.canvas.dom.image;
return canvas.toDataURL();
},
_onProcessed(result) {
let drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function(box) {
return box !== result.box;
}).forEach(function(box) {
Quagga.ImageDebug.drawPath(box, {
x: 0,
y: 1
}, drawingCtx, {
color: "green",
lineWidth: 2
});
});
}
if (result.box) {
Quagga.ImageDebug.drawPath(result.box, {
x: 0,
y: 1
}, drawingCtx, {
color: "#00F",
lineWidth: 2
});
}
if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, {
x: 'x',
y: 'y'
}, drawingCtx, {
color: 'red',
lineWidth: 3
});
}
}
},
_onDetected(result) {
console.log('detected: ', result);
},
},
template: `
<div id="interactive" class="viewport scanner">
<video></video>
<canvas class="drawingBuffer"></canvas>
</div>
`
})
new Vue({
el: "#app",
data: {
readerSize: {
width: 640,
height: 480
}
},
methods: {
logIt(data) {
console.log('detected', data)
},
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* In order to place the tracking correctly */
canvas.drawing,
canvas.drawingBuffer {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#carloscgo/vue-cc-quaggajs#2.0.0/dist/vue-quagga.js"></script>
<script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
<div id="app">
<quagga-scanner :on-detected="logIt" :reader-size="readerSize" :reader-type="'ean_reader'"></quagga-scanner>
</div>
</body>
</html>
What I end up with is blank page and the error
TypeError: Cannot read property 'getBasePixel' of undefined
and no chart on the page. i'm new to vue.js so might be totally use error but I tried to use mostly the demos from the vue-chartjs page. and chart.js page. It seems as somewhere I screwed up but can't see where. Some people report that chrome. Any assistance with thiis would be appreciated. Trying to bring in a few streams of data..2 to be exact....
CHARTS.JS
import { Scatter, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Scatter,
mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options)
}
}
Randomchart.vue*
<template>
<div class="small">
<scatter :chart-data="datacollection" :chart-options="options"></scatter>
<button #click="fillData()">Randomize</button>
</div>
</template>
<script>
import Scatter from '#/components/Chart1.js'
export default {
components: {
Scatter
},
data () {
return {
datacollection: null,
options: null
}
},
mounted () {
this.fillData()
},
methods: {
fillData () {
console.log("firing phiil");
this.datacollection = {
datasets: [{
label: 'My First dataset',
xAxisID: 'x-axis-1',
yAxisID: 'y-axis-1',
borderColor: 'rgba(47, 152, 208, 0.2)',
backgroundColor: [
'rgba(47, 152, 208, 0.2)',
],
data: [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}]
}, {
label: 'My Second dataset',
xAxisID: 'x-axis-1',
yAxisID: 'y-axis-2',
borderColor: 'rgba(0, 0, 208, 0.2)',
backgroundColor: [
'rgba(47, 152, 208, 0.2)',
],
data: [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}]
}]
}
console.log(this.datacollection);
}
}
}
function randomScalingFactor () {
return Math.round(Math.random(-100, 100));
}
</script>
<style>
.small {
max-width: 600px;
margin: 150px auto;
}
</style>
The problem is with extra datasets params xAxisID and yAxisID.
it seems they're not set correctly, so when vue-charts tries getting references to those DOM elements, it gets undefined, thus the error.
You should either remove those params, or add those elements (via options or manually)
Here is a working version of the app
PS: also, if you need to get a random number from the interval [-100, 100], you should use Math.round(Math.random() * 200) - 100.
In your version, it always returns either 1, or 0 (because Math.random takes no parameters and always returns a value between 1 and 0)
I created two x,y arrays and then performed two chart using these. I want to write some texts in only Chart red one. And I want to use (x,y) coordinates to determine text region.
I try to Chartjs Global plugin but it causes to writing text all charts. I demand texting only one chart.
I could not succeed in Chartjs mono Plugin in Script.
Please Help Me.
Here is my code:
<!DOCTYPE html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div class="w3-row">
<div class="w3-col s3"><p></p></div>
<div class="w3-col s6" align="center"><canvas id="myChart" height="120"></canvas></div>
<div class="w3-col s3"><p></p></div>
</div>
<div class="w3-row">
<div class="w3-col s3"><p></p></div>
<div class="w3-col s6" align="center"><canvas id="myTau" height="120"></canvas></div>
<div class="w3-col s3"><p></p></div>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script type="text/javascript">
var xCoord = new Array(1997, 2003, 2005, 2009, 2014, 2018, 2019);
var yCoord = new Array(1, 3, 5, 3, 6, 10, 9);
var c = [];
for (var i = 0; i < xCoord.length; i++) {
var obj = { x: xCoord[i], y: yCoord[i] };
c.push(obj);
}
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'None',
data: c,
borderWidth: 1,
borderColor: "#3e95cd",
fill: false,
cubicInterpolationMode: 'monotone'
}
]
},
options: {
title: {
display: true,
text: 'My Chart'
},
tooltips: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
scaleLabel: {
display: true,
labelString: 'Year Assembly',
fontSize: 14
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Aquifer Values',
fontSize: 15
}
}]
}
}
});
</script>
<script type="text/javascript">
var xCoord = new Array(1997, 2003, 2005, 2009, 2014, 2018, 2019);
var yCoord = new Array(41, 31, 11, 31, 88, 101, 91);
var c = [];
for (var i = 0; i < xCoord.length; i++) {
var obj = { x: xCoord[i], y: yCoord[i] };
c.push(obj);
}
var ctx = document.getElementById('myTau').getContext('2d');
var myTau = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'None',
data: c,
borderWidth: 1,
borderColor: "#ef1414",
fill: false,
cubicInterpolationMode: 'monotone'
}
]
},
options: {
title: {
display: true,
text: 'My Chart 2'
},
tooltips: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
scaleLabel: {
display: true,
labelString: 'Year Assembly',
fontSize: 14
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Aquifer Values Corresponding',
fontSize: 15
}
}]
}
}
});
</script>
UPDATE:
Here is another problem:
Is there any way to assign text position via chartjs coordinate system, in stead of "width., height."?
For instance, according to xCoord & yCoord arrays, is it possible to set the position of ctx.fillText x,y coordinates:
In stead of ctx.fillText("s(A)", width * .28, height * .70); can be like this : ctx.fillText("s(A)", 2005, 3); (2015,9) is belong to chartjs coordinate system.
My Aim:
s(A) can be seen on chartjs area at the point of (2005,3)
s(A) can be seen on chartjs area at the point of (2015,9)
My Coordinate Problem Picture
Here is Last Problem Code:
<!DOCTYPE html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div class="w3-row">
<div class="w3-col s3"><p></p></div>
<div class="w3-col s6" align="center"><canvas id="myChart" height="120"></canvas></div>
<div class="w3-col s3"><p></p></div>
</div>
<div class="w3-row">
<div class="w3-col s3"><p></p></div>
<div class="w3-col s6" align="center"><canvas id="myTau" height="120"></canvas></div>
<div class="w3-col s3"><p></p></div>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script type="text/javascript">
var plugin = {
beforeDraw: function (chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
ctx.font = "1em sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("s(A)", width * .28, height * .70);
ctx.fillText("s(B)", width * .75, height * .55);
//These section were set according to canvas width and height
//I want to set coordinates chartjs coordinates like in data {x:1993,y:70}
// Doesnt Work Like This: ctx.fillText("s(A)", 2005, 2);
//Doesnt Work Like This: ctx.fillText("s(B)", 2015, 9);
ctx.save();
}
};
Chart.plugins.register(plugin);
var xCoord = new Array(1997, 2003, 2005, 2009, 2014, 2018, 2019);
var yCoord = new Array(1, 3, 5, 3, 6, 10, 9);
var c = [];
for (var i = 0; i < xCoord.length; i++) {
var obj = { x: xCoord[i], y: yCoord[i] };
c.push(obj);
}
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'None',
data: c,
borderWidth: 1,
borderColor: "#3e95cd",
fill: false,
cubicInterpolationMode: 'monotone'
}
]
},
options: {
plugins: [plugin],
title: {
display: true,
text: 'My Chart'
},
tooltips: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
scaleLabel: {
display: true,
labelString: 'Year Assembly',
fontSize: 14
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Aquifer Values',
fontSize: 15
}
}]
}
}
});
</script>
An working example:
var plugin = {
id: 'plugin',
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx,
xScale = chart.scales['x-axis-0'],
yScale = chart.scales['y-axis-0'];
ctx.restore();
ctx.font = "1em sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
// ctx.fillText("s(A)", width * .28, height * .70);
ctx.fillText(
"s(A)",
xScale.getPixelForValue('2005'),
yScale.getPixelForValue(3)
);
ctx.fillText(
"s(B)",
xScale.getPixelForValue('2015'),
yScale.getPixelForValue(9)
);
ctx.save();
}
};
var xCoord = new Array(1997, 2003, 2005, 2009, 2014, 2018, 2019);
var yCoord = new Array(1, 3, 5, 3, 6, 10, 9);
var c = [];
for (var i = 0; i < xCoord.length; i++) {
var obj = {
x: xCoord[i],
y: yCoord[i]
};
c.push(obj);
}
var ctx = document.getElementById('myTau').getContext('2d');
var myTau = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'None',
data: c,
borderWidth: 1,
borderColor: "#ef1414",
fill: false,
cubicInterpolationMode: 'monotone'
}]
},
plugins: [plugin],
options: {
title: {
display: true,
text: 'My Chart 2'
},
tooltips: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
scaleLabel: {
display: true,
labelString: 'Year Assembly',
fontSize: 14
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Aquifer Values Corresponding',
fontSize: 15
}
}]
}
}
});
var ctx = document.getElementById('myTax').getContext('2d');
var myTau = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'None',
data: c,
borderWidth: 1,
borderColor: "#ef1414",
fill: false,
cubicInterpolationMode: 'monotone'
}]
},
options: {
title: {
display: true,
text: 'My Chart 2'
},
tooltips: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
scaleLabel: {
display: true,
labelString: 'Year Assembly',
fontSize: 14
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Aquifer Values Corresponding',
fontSize: 15
}
}]
}
}
});
<canvas id="myTau" height="120"></canvas>
<canvas id="myTax" height="120"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Create and register a new plugin that draw the text, then call it only on the second chart, you can pass data as well (like an array of labels and the locations of each for example).
Update: (register plugins)
If you register a plugin globally then, you will have to disable the plugin in each chart here you don't want it to run.
options: {
plugins: {
plugin: false
}
}
- or -
If you don't register the plugin globally, in each chart that you need to add the labels add the following:
{
plugins: [plugin]
}
Note: In the second snippet of code plugin is not nested under options. Seen here.
Update: (display text using x,y datasets)
In order to use a x,y value you need to identify the axes you what the value from using its id, the defaults are x-axis-0 and y-axis-0, that increments if you add more axes. Or use a custom axis id.
After that, within the chart instance there is a scale object that represents the axis and using chart.scales['x-axis-0'] you can access a function called getPixelForValue which will convert the giving value from that axis to its pixel location.
<!DOCTYPE html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div class="w3-row">
<div class="w3-col s3"><p></p></div>
<div class="w3-col s6" align="center"><canvas id="myChart" height="120"></canvas></div>
<div class="w3-col s3"><p></p></div>
</div>
<div class="w3-row">
<div class="w3-col s3"><p></p></div>
<div class="w3-col s6" align="center"><canvas id="myTau" height="120"></canvas></div>
<div class="w3-col s3"><p></p></div>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script type="text/javascript">
var plugin = {
beforeDraw: function (chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
ctx.font = "1em sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("s(A)", width * .28, height * .70);
ctx.fillText("s(B)", width * .75, height * .55);
ctx.save();
}
};
Chart.plugins.register(plugin);
var xCoord = new Array(1997, 2003, 2005, 2009, 2014, 2018, 2019);
var yCoord = new Array(1, 3, 5, 3, 6, 10, 9);
var c = [];
for (var i = 0; i < xCoord.length; i++) {
var obj = { x: xCoord[i], y: yCoord[i] };
c.push(obj);
}
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'None',
data: c,
borderWidth: 1,
borderColor: "#3e95cd",
fill: false,
cubicInterpolationMode: 'monotone'
}
]
},
options: {
plugins: [plugin],
title: {
display: true,
text: 'My Chart'
},
tooltips: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
scaleLabel: {
display: true,
labelString: 'Year Assembly',
fontSize: 14
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Aquifer Values',
fontSize: 15
}
}]
}
}
});
</script>
<script type="text/javascript">
var xCoord = new Array(1997, 2003, 2005, 2009, 2014, 2018, 2019);
var yCoord = new Array(41, 31, 11, 31, 88, 101, 91);
var c = [];
for (var i = 0; i < xCoord.length; i++) {
var obj = { x: xCoord[i], y: yCoord[i] };
c.push(obj);
}
var ctx = document.getElementById('myTau').getContext('2d');
var myTau = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'None',
data: c,
borderWidth: 1,
borderColor: "#ef1414",
fill: false,
cubicInterpolationMode: 'monotone'
}
]
},
options: {
title: {
display: true,
text: 'My Chart 2'
},
tooltips: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
scaleLabel: {
display: true,
labelString: 'Year Assembly',
fontSize: 14
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Aquifer Values Corresponding',
fontSize: 15
}
}]
}
}
});
</script>
Here is problem. The text is written all charts. My aim is only red one chart (My Chart 2).
Is it possible to have different preUnits for Morris Line chart?
Here is my javascript:
Morris.Line({
element: 'payment_chart',
data: json.data,
xkey: 'm',
ykeys: json.label,
labels: json.label,
parseTime: false,
preUnits: "$",
smooth: true,
resize: true
});
I have just two lines, one represents Dollar value, the other quantity. My tooltip looks like:
April
Sales: $3
Amount: $249.99
What I would like to do is remove dollar sign from sales.
No you can't have different preUnits for Morris Line chart:
preUnits: Set to a string value (eg: '$') to add a label prefix all y-labels.
But you can set the hoverCallback function to do the job:
Morris.Line({
element: 'payment_chart',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Sales', 'Amount'],
parseTime: false,
preUnits: "$",
smooth: true,
resize: true,
hoverCallback: function (index, options, content, row) {
var indexAmount = 2;
var txtToReplace = $(content)[indexAmount].textContent;
return content.replace(txtToReplace, txtToReplace.replace(options.preUnits, ""));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>
<div id="payment_chart"></div>