I would like to create a barChart using Vue-Google-charts where values are displayed on bars. If I read the google charts documentation, I should use annotations.
How do I put annotations in Vue-Google-Chart component code ?
Here is my current component code:
Vue.component('graphiquecolonne', {
template: '<GChart type="BarChart" :data="chartData2" :options="chartOptions2"/>',
props: ['datag2', 'titre'],
data() {
return {
chartData2: null
}
},
computed:{
chartOptions2(){
return {
title: this.titre,
height: 500,
pointSize: 10,
}
}
},
watch: {
datag2: {
immediate: false,
handler(newValue) {
this.chartData2 = newValue;
}
}
}
});
My data is in "datag2" object (prop) with currently label and value.
Thanks in advance!
you have to provide the column role, in the column headings for the data table.
if the following are your column headings...
['datag2', 'titre']
then you would add the annotation column role, after the data column that should have the annotations...
['datag2', 'titre', {role: 'annotation', type: 'string'}]
then provide the annotation value in the data rows...
[
['category 1', 10, '10'],
['category 2', 20, '20'],
['category 3', 30, '30'],
]
Related
I have been trying to call my own function for formatting the x and y axis values in a tooltip in Highcharts vue.
Consider the following;
data() {
return {
currencySymbol: "$",
};
},
computed: {
chartOptions() {
var symbol = this.currencySymbol;
return {
chart: {
type: "spline"
},
title: {
text: "Sin chart"
},
yAxis: {
gridLineDashStyle: "Dot",
labels: {
style: {
color: "#000"
},
formatter: label => {
return (
symbol + Highcharts.Axis.prototype.defaultLabelFormatter.call(label)
);
}
}
},
tooltip: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
this.formatNumber(this.y, this.fractionalDigits, this.locale, this.currencySymbol);
}
},
series: [
{
data: [10, 0, 8, 2, 6, 4, 5, 5],
color: "#6fcd98"
}
]
};
}
}
The labels work fine but the tooltip function call will not work. I have tried putting my formatNumber() function in both methods() and outside of any of the Vue hooks. Neither work.
Note that fractionDigits, locale and currencySymbol have been resolved at this point.
Wondering if someone can advise on the correct approach?
Also note that the formatter works when I remove the call to my formatNumber() function. It's lack of scope appears to be where the problem lies.
If I should assume that this.formatNumber, this.fractionDigits, this.locale, and this.currencySymbol would be references to a component's internal data, then the problem would occurs because of this context within tooltip's formatter function, which does not actually indicate on the component, but on the object on which the formatter was called, namely the TooltipFormatterContextObject.
In order to fix it, you can save appropriate context in the beginning of the chartOptions computed property function, and just refer it when calling component functions. Please take a look on the example below, where I've put the 'template' function named like yours, and presented how it could be implemented.
Live example: https://codesandbox.io/s/highcharts-vue-demo-wqwzu
Kind regards!
Not sure if it's the most elegant but I found a solution to this problem for myself.
I created a utility js file called helper.js, added my exported function (I'll need it in other places anyway) and put it in a directory called utils.
The contents are as follows;
export function formatNumber(number, maxFractionDigits, locale, currencySymbol) {
// function logic here
}
Then I imported same into my component and simply called the method as follows;
import {formatNumber} from "../../utils/helper";
export default {
data() {
return {
currencySymbol: "$",
};
},
computed: {
chartOptions() {
var symbol = this.currencySymbol;
return {
chart: {
type: "spline"
},
title: {
text: "Sin chart"
},
...
tooltip: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
formatNumber(this.y, this.fractionalDigits, this.locale, this.currencySymbol);
}
},
series: [
{
data: [10, 0, 8, 2, 6, 4, 5, 5],
color: "#6fcd98"
}
]
};
}
}
}
While using Firestore, vuefire, vue-tables-2, I stuck getting document's id.
My data structure is as below.
Here is my code.
<v-client-table :columns="columns" :data="devices" :options="options" :theme="theme" id="dataTable">
import { ClientTable, Event } from 'vue-tables-2'
import { firebase, db } from '../../firebase-configured'
export default {
name: 'Devices',
components: {
ClientTable,
Event
},
data: function() {
return {
devices: [],
columns: ['model', 'id', 'scanTime', 'isStolen'],
options: {
headings: {
model: 'Model',
id: 'Serial No',
scanTime: 'Scan Time',
isStolen: 'Stolen YN'
},
templates: {
id: function(h, row, index) {
return index + ':' + row.id // <<- row.id is undefined
},
isStolen: (h, row, index) => {
return row.isStolen ? 'Y': ''
}
},
pagination: {
chunk: 5,
edge: false,
nav: 'scroll'
}
},
useVuex: false,
theme: 'bootstrap4',
template: 'default'
}
},
firestore: {
devices: db.collection('devices')
},
};
My expectation is devices should id property as vuefire docs.
But array this.devices didn't have id field even if I check it exist it console.
Basically, every document already has id attribute, but it's non-enumerable
Any document bound by Vuexfire will retain it's id in the database as
a non-enumerable, read-only property. This makes it easier to write
changes and allows you to only copy the data using the spread operator
or Object.assign.
You can access id directly using device.id. But when passing to vue-tables-2、devices is copied and lost id non-enumerable attribute.
I think you can workaround using computed property
computed: {
devicesWithId() {
if (!this.devices) {
return []
}
return this.devices.map(device => {
...device,
id: device.id
})
}
}
Then, please try using devicesWithId in vue-tables-2 instead.
import gql from 'graphql-tag'
export default {
name: 'patient-list',
data () {
return {
patients: [],
patientsColumns: [
{ name: 'id', label: 'number', field: 'patient_number' },
{ name: 'last', label: 'last name', field: row => row.user.last },
{ name: 'first', label: 'first name', field: row => row.user.first }
]
}
},
apollo: {
patients: {
query: gql`
{
patients {
patient_number
user {
first
last
}
}
}
`
}
}
}
<div>
{{patients[0]}}
<q-table
:data="patients"
:columns="patientsColumns"
row-key="name"
></q-table>
</div>
I have problem with printing datas in table by apollo... and i can't figure out what is wrong with this :)
the main problem with my console is
( TypeError: Cannot add property __index, object is not extensible )
I created sample static data and was ok, but when I what use datas passed from apollo by graphql query datatable show "no data available"
If someone give me small advice I will be grateful :)
Error in render: "TypeError: Cannot add property __index, object is
not extensible"
Datatable and sample record passed from Graphql by apollo
this is my code
Printed first object from apollo
ERRORS FROM CONSOLE
I would like to know how to validate empty object using vuelidate. I tried to give a demonstration on jsfiddle as links follows
Vue.use(window.vuelidate.default)
const { required, minLength } = window.validators
new Vue(
{
el: "#app",
data: {
companies: [
{
id: 1,
name: 'facebook'
},
{
id: 2,
name: 'apple'
}
],
text: {
id: null,
name: null
}
},
validations: {
text: {
required
}
}
}
)
jsfiddle
$v.text is valid because it is a non-empty object. That means it doesn't have 'falsy' value so it meets the requirement. One way to make it work:
validations: {
text: {
id: {required},
name: {required},
},
},
JSFiddle
If you don't want to repeat items object structure, you can write a custom validator.
There is missing information about how to use withParams in the documentation of vuelidate page.
So i have searched on its github page and found this link .
According to link i came up with that solution
import { withParams } from 'vuelidate'
export const checkIfNull = withParams(
{ type: 'required' },
value => (value.id === null ? false : true)
)
There is nothing special about validating an object, you just need to define the structure and add any validation rules you require.
Please see the example I created and take another look at the Collections docs.
I have created a Pie chart using the Pie chart example in sencha ExtJS website , I wanted to add a click event to the each Pie slice so that i get handle to the contextual data on that slice. I was able to add a click listener to the Pie but not sure how to get the data on the slice.
Below is the ExtJS code.
Ext.onReady(function(){
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [{
'name': 'January',
'data1': 10
}, {
'name': 'February',
'data1': 7
}, {
'name': 'March',
'data1': 5
}, {
'name': 'April',
'data1': 2
}, {
'name': 'May',
'data1': 27
}]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 800,
height: 600,
animate: true,
store: store,
theme: 'Base:gradients',
legend: { // Pie Chart Legend Position
position: 'right'
},
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item){
//calculate and display percentage on hover
var total = 0;
store.each(function(rec){
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 5
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
},
listeners: {//This Doesnt Work :(
itemclick: function(o){
alert('clicked at : ' + o);
}
}
}],
listeners: { //This Event handler works but I am not sure how to figure how which slice i have clicked ..................................
click: {
element: store, //bind to the underlying el property on the panel
fn: function(o, a){
alert('clicked' + o + a + this);
}
}
}
});
});
Kindly help.
Regards,
Lalit
Here is how you get data of the clicked slice. The series class supports listeners via the Observable syntax and they are:
itemmouseup When the user interacts with a marker.
itemmousedown When the user interacts with a marker.
itemmousemove When the user iteracts with a marker.
afterrender Will be triggered when the animation ends or when the series has been rendered completely.
I will make use of the itemmousedown event to capture the clicked slice. Here is my listener method:
series: [{
.
.
.
listeners:{
itemmousedown : function(obj) {
alert(obj.storeItem.data['name'] + ' &' + obj.storeItem.data['data1']);
}
}
.
}]
Note that I have placed my listener inside the series and not the chart! Now, the obj variable holds lot of information. For each series, the property to get data will differ. So, you will have to carefully inspect the object using firebug or some other developer tool.
Now, in case of Piecharts, you can get the slice information by using the obj:
obj.storeItem.data['your-series-variable-name']
Here is the obj from firebug..
I'm using a more selective approach, because I needed to add some custom logic in order to implement drag-and-drop for our charts. So after the chart definition I just add the following:
// Add drag-and-drop listeners to the sprites
var surface = chart.surface;
var items = surface.items.items;
for (var i = 0, ln = items.length; i < ln; i++) {
var sprite = items[i];
if (sprite.type != "circle") { continue; } // only add listeners to circles
// Additional funky checks for the draggable sprites
sprite.on("mousedown", onSpriteMouseDown, sprite); // mouse down ONLY for sprites
}
surface.on("mousemove", onSurfaceMouseMove, surface); // mouse move for the entire surface
surface.on("mouseup", onSurfaceMouseUp, surface);
Cheers!
Frank