In my vuejs project how to use google data-table chart? Google data-table chart link given below:
https://developers.google.com/chart/interactive/docs/gallery/table
I can implement this chart in normal javascript code. But how to use in vuejs code.
You can use your own component. Here I have made one simple example.
Vue.component('google-data-table', {
template: `<div id='app' ref="table_div"></div>`,
props: {
columns: {
type: Array,
required: true
},
tableData: {
type: Array,
required: true
}
},
mounted() {
google.charts.load('current', {
'packages': ['table']
});
google.charts.setOnLoadCallback(this.drawTable);
},
methods: {
drawTable: function() {
var data = new google.visualization.DataTable();
this.columns.forEach(element => {
data.addColumn(element.type, element.title);
});
data.addRows(this.tableData);
var table = new google.visualization.Table(this.$refs.table_div);
table.draw(data, {
showRowNumber: true,
width: '100%',
height: '100%'
});
}
}
});
new Vue({
el: '#app',
data: {
columns: [{
type: 'string',
title: 'Name'
},
{
type: 'number',
title: 'Salary'
},
{
type: 'boolean',
title: 'Full Time Employee'
}
],
tableData: [
['Mike', {
v: 10000,
f: '$10,000'
}, true],
['Jim', {
v: 8000,
f: '$8,000'
}, false],
['Alice', {
v: 12500,
f: '$12,500'
}, true],
['Bob', {
v: 7000,
f: '$7,000'
}, true]
]
}
});
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</head>
<body>
<div id="app">
<google-data-table :columns='columns' :table-data='tableData' />
</div>
</body>
</html>
Related
Hello i am trying to display different charts using the chartjs by calling the API. Below code shows how i have formatted the chart.vue
Chart.vue:
<template>
<div class="chart-container" style="position: relative; height: 40vh; width:100%;">
<slot name="test1"></slot>
<slot name="test2"></slot>
</div>
</template>
<script>
export default {
name: 'charts',
data () {
return {
date: [],
challenge: [],
data: []
}
},
mounted () {
this.check(8, 'chart_8')
this.check(7, 'chart_7')
},
methods: {
check (id, name) {
this.$http.get(`/api_chart/${ id }/full`)
.then((response) => {
this.date = response.data.date
this.challenge = response.data.challenge
this.data = this.date.map((date, index) => ({
x: new Date(date * 1000),
y: this.challenge[index]
}))
const ctx = document.getElementById([name]).getContext('2d')
let myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: 'Challenge',
data: this.data,
borderColor: ' #EA5455',
}
]
},
options: {
lineTension: 0,
maintainAspectRatio: false,
scales: {
yAxes: [
{
scaleLabel: {
display: false
},
ticks: {
beginAtZero: true,
callback (value) {
return `${value}%`
}
}
}
],
xAxes: [
{
type: 'time',
time: {
unit: 'month'
},
scaleLabel: {
display: true,
}
}
]
}
}
})
})
}
}
}
</script>
App.vue:
<template>
<div class="In order to display chart1">
<chart-display> <canvas slot="test1" id="chart_7" ></canvas> </chart-display>
</div>
<div class="In order to display chart1">
<chart-display> <canvas slot="test2" id="chart_8" ></canvas> </chart-display>
</div>
</template>
<script>
import chart-display from './Chart.vue'
export default {
component: {chart-display}
}
</script>
As you can see i have shared my Chart.vue and App.vue, i am able to see my chart in the browser, but whenever i run the code or refresh the page, the charts flickers and stops. And then in my console i get below error:
Please someone help me to get rid of this issue, and please tell me if any changes i should do in my code to solve it. Please send me the modification code.
As I wrote in my comment, the charts are rendered twice. This causes flickering.
// every time you use <chart-display>, 2 charts are rendered, this means chart 1 renders
// itself and chart 2, char 2 renders itself and chart 1, this is a bad pattern in Vue in general
mounted() {
this.check(8, "chart_8");
this.check(7, "chart_7");
}
Make the following changes:
ChartDisplay.vue
<template>
<div
class="chart-container"
style="position: relative; height: 40vh; width: 100%"
>
<canvas ref="chart_7"></canvas>
<canvas ref="chart_8"></canvas>
</div>
</template>
<script>
import Chart from "chart.js";
export default {
name: "ChartDisplay",
data() {
return {
date: [],
challenge: [],
data: [],
// save charts in an array
charts: [],
// charts options
options: {
lineTension: 0,
maintainAspectRatio: false,
scales: {
yAxes: [
{
scaleLabel: {
display: false,
},
ticks: {
beginAtZero: true,
callback(value) {
return `${value}%`;
},
},
},
],
xAxes: [
{
type: "time",
time: {
unit: "month",
},
scaleLabel: {
display: true,
},
},
],
},
},
};
},
mounted() {
this.render(7, this.$refs.chart_7);
this.render(8, this.$refs.chart_8);
},
methods: {
render(id, ctx) {
this.fetchData(id).then((response) => {
let data = response.date.map((date, index) => ({
x: new Date(date * 1000),
y: response.challenge[index],
}));
this.charts.push(
new Chart(ctx, {
type: "line",
data: {
datasets: [
{
label: "Challenge",
data: data,
borderColor: " #EA5455",
},
],
},
options: this.options,
})
);
});
},
fetchData(id) {
return this.$http.get(`/api_chart/${ id }/full`);
},
},
beforeDestroy() {
this.charts.forEach((chart) => chart.destroy());
},
};
</script>
<style >
[v-cloak] {
display: none;
}
</style>
App.vue
<template>
<div>
<div class="In order to display chart1">
<chart-display/>
</div>
</div>
</template>
<script>
import ChartDisplay from "./ChartDisplay.vue";
export default {
components: { ChartDisplay },
};
</script>
See it on sandbox
I found several errors on your code. I fix them in Sandbox
For Chat.vue :
I rename the file as ChartDisplay.vue as similar as the component name
import chart.js package for using Chart() function
I use a demo API
<template>
<div
class="chart-container"
style="position: relative; height: 40vh; width: 100%"
>
<slot name="test1"></slot>
<slot name="test2"></slot>
</div>
</template>
<script>
import Chart from "chart.js";
export default {
name: "ChartDisplay",
data() {
return {
date: [],
challenge: [],
data: [],
};
},
mounted() {
this.check(8, "chart_8");
this.check(7, "chart_7");
},
methods: {
check(id, name) {
fetch(
"https://api.wirespec.dev/wirespec/stackoverflow/fetchchartdataforvuejs"
)
.then((response) => response.json())
.then((response) => {
this.date = response.date;
this.challenge = response.challenge;
this.data = this.date.map((date, index) => ({
x: new Date(date * 1000),
y: this.challenge[index],
}));
const ctx = document.getElementById([name]).getContext("2d");
new Chart(ctx, {
type: "line",
data: {
datasets: [{
label: "Challenge",
data: this.data,
borderColor: " #EA5455",
}, ],
},
options: {
lineTension: 0,
maintainAspectRatio: false,
scales: {
yAxes: [{
scaleLabel: {
display: false,
},
ticks: {
beginAtZero: true,
callback(value) {
return `${value}%`;
},
},
}, ],
xAxes: [{
type: "time",
time: {
unit: "month",
},
scaleLabel: {
display: true,
},
}, ],
},
},
});
});
},
},
};
</script>
For App.vue
Your import should not carry any hyphen.
component should be components
render the component once to avoid flikering
<template>
<div>
<div class="In order to display chart1">
<chart-display>
<canvas slot="test1" id="chart_7"></canvas>
<canvas slot="test2" id="chart_8"></canvas>
</chart-display>
</div>
</div>
</template>
<script>
import ChartDisplay from "./ChartDisplay.vue";
export default {
components: {
ChartDisplay
},
};
</script>
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>
Please note that I was able to consume the geojson data and create a layer on leaflet map with ease. Also, tried using lib arcgis-to-geojson-utils but not able to get it working.
Here is my code.
Your help is greatly appreciated.
view.when()
.then(fetchData)
.then(createGraphics)
.then(createLayer)
.then(addToView)
.catch(function(e) {
console.error("Creating FeatureLayer failed", e);
})
function fetchData() {
return fetch(url,options)
.then(response => {
return response.json()
});
}
function createGraphics(schoolsGeoData) {
const geoData = JSON.parse(schoolsGeoData);
return geoData.features.map((school, i) => {
let schoolAttr = {
OBJECTID: school.properties["id"],
name: school.properties["name"]
}
return new Graphic({
// type: "point",
attributes: schoolAttr,
geometry: new Point({
x: school.geometry.coordinates[0],
y: school.geometry.coordinates[1]
}),
});
})
}
function createLayer(graphics) {
return new FeatureLayer({
source: graphics,
objectIdField: "OBJECTID",
fields: schoolFeilds(),
popupTemplate: schoolTemplate(),
renderer: myRenderer(),
geometryType: "point" ,
spatialReference: {
wkid: 4326
},
});
}
function addToView(layer) {
if(layer) {
view.map.add(layer);
}
}
Your code have a reasonable logic, of course there are thing missing that I can not know it they are working. For example, I don't know what options you add to fetch operation, but by default it will get you the data correctly, and you do not have to convert to JSON because it realize that.
I was actually going to ask you for more code, or what exactly was your problem, but I decide to remind you that you actually have a specific layer to handle GeoJSON data, GeoJSONLayer.
ArcGIS API - GeoJSONLayer
ArcGIS Examples - GeoJSONLayer
But, anyway I will leave you here a running example of what you are trying to do, fetching the data and using FeatureLayer, using the data from the example I mention,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>GeoJSON with FeatureLayer - 4.15</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/Graphic"
], function(Map, MapView, FeatureLayer, Graphic) {
const map = new Map({
basemap: "gray"
});
const view = new MapView({
center: [-80, 35],
zoom: 8,
map,
container: "viewDiv"
});
view.when()
.then(fetchData)
.then(createGraphics)
.then(createLayer)
.then(addToView)
.catch(function(e) {
console.error("Creating FeatureLayer failed", e);
})
function fetchData() {
return fetch(
'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson'
)
.then(response => {
return response.json()
});
}
function createGraphics(data) {
// const geoData = JSON.parse(data);
return data.features.map((feature, i) => {
return new Graphic({
attributes: {
OBJECTID: i,
title: feature.properties["title"],
mag: feature.properties["mag"],
type: feature.properties["type"],
place: feature.properties["place"],
time: feature.properties["time"]
},
geometry: {
type: "point",
x: feature.geometry.coordinates[0],
y: feature.geometry.coordinates[1]
},
});
})
}
function createLayer(graphics) {
const popupTemplate = {
title: "{title}",
content: "Magnitude {mag} {type} hit {place} on {time}",
fieldInfos: [
{
fieldName: "time",
format: {
dateFormat: "short-date-short-time"
}
}
],
outFields: ["title", "mag", "type", "place", "time"]
}
const renderer = {
type: "simple",
field: "mag",
symbol: {
type: "simple-marker",
color: "orange",
outline: {
color: "white"
}
},
visualVariables: [
{
type: "size",
field: "mag",
stops: [
{
value: 2.5,
size: "10px"
},
{
value: 8,
size: "40px"
}
]
}
]
};
return new FeatureLayer({
source: graphics,
fields: [{
name: "OBJECTID",
alias: "ObjectID",
type: "oid"
}, {
name: "title",
alias: "Title",
type: "string"
}
, {
name: "mag",
alias: "Magnitude",
type: "double"
}
, {
name: "type",
alias: "Type",
type: "string"
}, {
name: "place",
alias: "Place",
type: "string"
}, {
name: "time",
alias: "Time",
type: "date"
}],
objectIdField: "OBJECTID",
popupTemplate,
renderer
});
}
function addToView(layer) {
if(layer) {
view.map.add(layer);
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
I have one project that contain index.html,script.js,style.js I need to use vue-echart for a single page how can i use?
<script src="https://cdn.jsdelivr.net/npm/echarts#4.1.0/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts#4.0.2"></script>
<script src="vue.js"></script>
<script type="module" src="newScript.js"></script>
index.html
<div class="echarts">
<IEcharts
:option="bar"
:loading="loading"
#ready="onReady"
#click="onClick"
/>
<button #click="doRandom">Random</button>
</div>
newScript.js
//import IEcharts from 'vue-echarts-v3/src/full.js';
export default {
name: 'view',
components: {
IEcharts
},
props: {},
data: () => ({
loading: true,
bar: {
title: {
text: 'ECharts Hello World'
},
tooltip: {},
xAxis: {
data: ['Shirt', 'Sweater', 'Chiffon Shirt', 'Pants', 'High Heels', 'Socks']
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
}),
methods: {
doRandom() {
const that = this;
let data = [];
for (let i = 0, min = 5, max = 99; i < 6; i++) {
data.push(Math.floor(Math.random() * (max + 1 - min) + min));
}
that.loading = !that.loading;
that.bar.series[0].data = data;
},
onReady(instance, ECharts) {
console.log(instance, ECharts);
},
onClick(event, instance, ECharts) {
console.log(arguments);
}
}
};
When i use the mentioned way i am getting an error
Uncaught
ReferenceError: IEcharts is not defined.
//import IEcharts from 'vue-echarts-v3/src/full.js';
This line above is comment because there was error full.js is not found.
You need use global variable to register component. (Ref)
So, change IEcharts to "v-chart": VueECharts
For example:
// https://github.com/ecomfe/vue-echarts#using-the-component
var app = new Vue({
el: "#app",
components: {
"v-chart": VueECharts
},
data() {
let data = []
for (let i = 0; i <= 360; i++) {
let t = i / 180 * Math.PI
let r = Math.sin(2 * t) * Math.cos(2 * t)
data.push([r, i])
}
return {
polar: {
title: {
text: 'Demo'
},
legend: {
data: ['line']
},
polar: {
center: ['50%', '54%']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
angleAxis: {
type: 'value',
startAngle: 0
},
radiusAxis: {
min: 0
},
series: [
{
coordinateSystem: 'polar',
name: 'line',
type: 'line',
showSymbol: false,
data: data
}
],
animationDuration: 2000
}
}
}
});
<script src="https://cdn.jsdelivr.net/npm/echarts#4.1.0/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts#4.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<v-chart :options="polar"/>
</div>
I'm using a vue component to fetch and show data as below:
export default {
data() {
return {
posts: [],
post: {
id: '',
title: '',
rating: '',
ver: ''
},
pagination: {},
}
},
created() {
this.fetchRecentPosts();
},
methods: {
fetchRecentPosts() {
fetch('api/recentposts')
.then(res => res.json())
.then(res => {
this.posts = res.data;
})
}
},
}
I'm also using rateYo plugin to show posts rating.
without using vue.js i'm able to turn my div attribute into star rating by :
$(".rateYo").each(function () {
var rating = $(this).data("rating");
$(this).rateYo({
rating: rating,
starWidth: "13px",
spacing: "3px",
ratedFill: "#ffb300",
normalFill: "#d3d8e4",
readOnly: true
});
});
So, How should I apply it work on evey div inside a v-for loop using vue.js ?
Thanks
var app = new Vue({
el: '#app',
data() {
return {
posts: [
{
id: 1,
title: 'Post One',
rating: 2.5
},
{
id: 2,
title: 'Post Two',
rating: 4.1
}
],
post: {
id: '',
title: '',
rating: '',
ver: ''
},
pagination: {},
}
},
mounted() {
$('.rateYo').each(function() {
$(this).rateYo({
rating: $(this).data('rating'),
starWidth: "13px",
spacing: "3px",
ratedFill: "#ffb300",
normalFill: "#d3d8e4",
readOnly: true
});
});
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
<div id="app">
<div v-for="(post,index) in posts" :key="index">
<h3>{{ post.title }}</h3>
<div class="rateYo" :data-rating="post.rating"></div>
</div>
</div>