I used the exact example and even created the same spreedsheet as in the vue example https://codesandbox.io/embed/yqxxkp32mj?module=%2Fsrc%2FApp.vue here, if i copy the spreedsheet from their example it works fine but when I add my own spreedsheet (which is practically a copy of what they have it gives me this error)
Getting All series on a given axis must be of the same data type
methods: {
onChartReady(chart, google) {
const query = new google.visualization.Query(
"https://docs.google.com/spreadsheets/d/1GpwJaxUPYv9MV2uAvW4qkKanFlwrzTHWS55vzK3J9VE/edit?usp=sharing"
);
query.send(response => {
const options = {
title: "Creating a Chart from a Separate Spreadsheet"
};
const data = response.getDataTable();
chart.draw(data, options);
});
}
}
};
This is my google sheet
https://docs.google.com/spreadsheets/d/1GpwJaxUPYv9MV2uAvW4qkKanFlwrzTHWS55vzK3J9VE/edit?usp=sharing
I am using vue-google-charts
Thanks
Related
I was using VueJS in browser mode and am now trying to switch my code to a VueJS SPA and vue-router. I've been stuck for hours with a $refs not working anymore.
To interact with my Google Charts, I was using an absolute reference to the graph (this.$refs.villesChart) to get selected data like that:
computed: {
eventsprox() {
let eventsprox = {
select: () => {
var selection = "";
if (this.$refs.villesChart) selection = this.$refs.villesChart1.chartObject.getSelection();
if (selection.length) {
var row = selection0[0].row + 1;
this.code_commune = this.dataprox[row][4];
this.changerville(this.code_commune, this.dataprox[row][0]);
}
return false;
},
};
return eventsprox;
}
HTML code for graph:
<GChart type="BarChart" id="villesChart" ref="villesChart" :data="dataprox" :options="optionsprox" :events="eventsprox"/>
I don't know why, but in browser mode, this.$refs.villesChart is a component:
[1]: https://i.stack.imgur.com/xJ8pV.png
but now it is a proxy object, and lost its chartObject attribute:
[2]: https://i.stack.imgur.com/JyXrL.png
I'm really confused. Do you have an idea why?
And if I use the proxy object, then I get a Vue warning "Avoid app logic that relies on enumerating keys on a component instance" and it is not working in production environment.
Thanks a lot for your help!!
After hours of testing different solutions, I finally found a solution working with Vue3 and Vue-google-chart 1.1.0.
I got rid of "refs" and put the events definition and code in the data section of my Vue 3 app (instead of computed) and accessed the chart data through a component variable I used to populate it.
Here is my event code where this.dataprox is my data table for the chart:
eventsprox: {
'click': (e) => {
const barselect = parseInt(e.targetID.split('#')[2]) + 1;
this.code_commune = this.dataprox[barselect][4];
this.nom_commune = this.dataprox[barselect][0];
this.changerville(this.code_commune, this.nom_commune);
}
},
My Gchart html code:
<GChart type="AreaChart" :data="datag" :options="optionsg" :events="eventsprox"/>
I hope it can help!
I'm using apex charts to create a graph of real-time data coming in from the back-end.
I have used the demo as a guide and implemented my own real-time chart (https://apexcharts.com/vue-chart-demos/line-charts/realtime/)
I want the data to scroll like in the linked example, currently, mine appears to redraw the line each time it's updated (https://imgur.com/a/1aTc1JV)
I use this function to update the series data with a fixed-length queue which is updated every second (queue.append(newData) and then queue.pop(0))
updateChart: function () {
var me = this;
this.intervalid1 = setInterval(() => {
me.$refs.chart.updateSeries([
{
data: this.temperature,
},
]);
}, 1000);
},
Insted of doing queue.pop(0) set range in xaxis to length - 1 of your initial data (if type: "numeric").
https://apexcharts.com/docs/options/xaxis/#range
I want to get the whole link address, but with the hoverProvider, I can only get the part of hoverd range.
here is the activate code and the result
export function activate(context: vscode.ExtensionContext) {
// Use the console to output diagnostic information (console.log) and errors (console.error)
// This line of code will only be executed once when your extension is activated
const disposal = vscode.languages.registerHoverProvider("javascript", {
provideHover(document, position, token) {
const range = document.getWordRangeAtPosition(position);
const word = document.getText(range);
return new vscode.Hover(
word
);
},
});
context.subscriptions.push(disposal);
}
so how to get the whole link 'https://www.youtube.com'?
According to the documentation, the getWordRangeAtPosition method allows you to define a custom word definition with a regular expression. A good regular expression to match a URL can be found in this answer.
Thus, in your case, you'd simply have to add a regular expression to the getWordRangeAtPosition method:
provideHover(document, position, token) {
const URLregex = /(https?:\/\/)*[-a-zA-Z0-9#:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()#:%_\+.~#?&//=]*)?/gi;
const range = document.getWordRangeAtPosition(position, URLregex);
const word = document.getText(range);
return new vscode.Hover(word);
}
I am using ionic 4 and I am doing pagination using ion-infinite-scroll. My problem is I always get the duplicate page problem. Can I know how to solve this duplicate problem? Here is my code in home.page.ts:
doInfinite(event) {
this.userService.getData().then(res => {
event.target.complete();
});
}
loadData(event) {
console.log('Load more data');
this.userService.getData().then(res => {
event.target.complete();
});
}
Here is home.html
<ion-infinite-scroll (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="loading ...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
It depends what your userService.getData() looks like.
It doesn't look like you are telling it to start at an offset.
Each time you pull data down, you should assign that list data to some local on-page variable, let's say dataList.
Then use this.dataList.length as the starting index for your next data request.
So some pseudo-code for how this might work would be:
let dataFeed = [];
let startAtRecord = 0;
constructor() {
this.userService.getData(startAtRecord).then(res => {
this.dataFeed = res;
this.startAtRecord = this.dataService.length;
});
}
loadData(event) {
// ask for a batch of records, starting at `startAtRecord`
this.userService.getData(startAtRecord).then(res => {
// add the new res data to the existing dataFeed
this.dataFeed = [...this.dataFeed, ...res];
// keep track of the number of records loaded
this.startAtRecord = this.dataService.length;
event.target.complete();
});
}
Do you see what I'm saying? The data service has to load the next page of data so you don't get the same one back, so it needs to track where its starting the list from.
I'm implementing nodejs app that saves data to database. Application takes post request from /add and it is supposed to take two arguments (actual data and table name). All tables are going to contain same fields and datatypes that are defined in model file.
Table name tells where data is going to be saved. Currently my app works fine when it comes to saving data to one table (named Test) but this should be extended to work with multiple tables. Tables should also be created if they don't exist.
I have created model for Sequelize:
// The model schema.
const modelDefinition = {
data: {
type: Sequelize.JSON,
allowNull: false,
},
};
// Define the model.
const SensorModel = db.define('Test', modelDefinition, modelOptions);
I have seperate controller file where data is added:
sensorController.addData = (req, res) => {
db.sync().then(() => {
const newSensor = {
data: req.body.data,
};
return Sensor.create(newSensor).then(() => {
res.status(201).json({
message: ' data added!',
});
});
});
};
from route file:
router.post('/add', sensorController.addData);
Currently this only creates table called test and adds data there. I want to extend this so that table name can be specified when adding new data but I'm a bit lost with this and don't know how to do it. Thanks in advance.
try this:
console.log('name_table:', youModel.getTableName())
youModel.tableName='NEW_TABLE_NAME';
console.log('name_table:', youModel.getTableName())
It works for me.