I want to put time data in x-axis labels in vue chart.js . There is a way in pure js code, not vue, but I can't find it in vue version.
Below is my code.
export default {
name: "LineChart",
components: {
LineChartGenerator,
},
props: {
chartId: {
type: String,
default: "line-chart",
},
datasetIdKey: {
type: String,
default: "label",
},
width: {
type: Number,
default: 100,
},
height: {
type: Number,
default: 280,
},
cssClasses: {
default: "",
type: String,
},
styles: {
type: Object,
default: () => {},
},
plugins: {
type: Array,
default: () => [],
},
},
data() {
return {
chartData: {
labels: "???",
datasets: [
{
label: "vacuum",
backgroundColor: "#534e7f",
data: this.$store.state.cnc1,
},
],
},
chartOptions: {
maintainAspectRatio: false,
},
};
},
};
I tried a lot of things similar to the one below but failed.
I also installed the extension but it failed.
scales: {
x: {
type: "time",
time: {
unit: "day",
},
},
},
I want to make something like this.
Most of the vue examples don't help by putting specific values in 'labels:' beforehand.
How can I get the value of the label in real time?
I tried putting time data into the store, but only the time when execution started is displayed.
Or like this...My head is a potato.Any help would be appreciated.
did you match label and data like this?
chartData: {
labels: [ 'January', 'February', 'March'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 20, 12]
}
]
},
Related
Does not work like this:
<template>
<Bar
:chart-options="chartOptions"
:chart-data="$attrs['chart-data'] || chartData"
:chart-id="chartId"
:dataset-id-key="datasetIdKey"
:plugins="plugins"
:css-classes="cssClasses"
:styles="styles"
:width="width"
:height="height"
/>
</template>
<script>
import { Bar } from 'vue-chartjs/legacy'
import 'chart.js/auto'
export default {
name: 'BarChart',
components: { Bar },
props: {
chartId: {
type: String,
default: 'bar-chart',
},
datasetIdKey: {
type: String,
default: 'label',
},
width: {
type: Number,
default: 400,
},
height: {
type: Number,
default: 400,
},
cssClasses: {
default: '',
type: String,
},
styles: {
type: Object,
default: () => {},
},
plugins: {
type: Object,
default: () => {},
},
},
data() {
return {
chartData: {},
chartOptions: {
responsive: true,
title: {
display: true,
text: 'Custom Chart Title',
},
},
}
},
}
</script>
tried editing even with this: https://codesandbox.io/s/exciting-ully-2wst65?file=/src/components/Bar.vue
but nothing works.
All info gathered from: https://vue-chartjs.org/api/
Registration of components are not needed if you import auto.
maybe some ideas?
You are using v2 syntax in v3, the internal plugins like the tooltip, title, legend and decimation have been moved from the options namespace to the options.plugins namespace.
So you need to nest the title options in a plugins object within the options object. Then it will work
For those like me, who are looking for a solution using vue-chartjs V4.
To show the Title you need to pass the plugin object, for example:
plugins: {
type: Array,
default: () => [Title]
}
and then pass into the chartOptions props the title configuration, for example:
chartOptions: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: "Chart Title",
},
},
}
sandBox full example:
I'm currently facing the following problem:
I've created a simple line chart and filled it with example data.
But the tooltip doesn't show up.
I've tried using my config on the ECharts Website and there the tooltip is working.
option = {
title: {
text: 'Baum'
},
tooltip: {
trigger: 'item',
show: true,
showContent: true,
alwaysShowContent: true,
triggerOn: 'mousemove',
axisPointer:
{
label: {
show: true,
}
}
},
legend: {
data: ['lain', 'lain2']
},
xAxis:{
type: 'category',
data: ['1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9', '10'],
boundaryGap: false,
},
yAxis: {
type: 'value'
},
series: [
{
name: 'lain',
type: 'line',
showSymbol: true,
data: [100,199,200,287,345,456,567,600,700,800],
smooth: true
},
{
name: 'lain2',
type: 'line',
showSymbol: true,
data: [111,158,231,296,374,495,596, 650,750,879],
smooth: true
}
],
animationDuration: 2000
}
}
In vue it's implemented like this:
<v-chart :options="option"></v-chart>
The data in the diagram itself is shown properly.
Thanks ahead.
I found a solution.
The import for the tooltip module has to imported explicitly.
import 'echarts/lib/component/tooltip'
With this import it's working.
I have an Apex Chart with multiple lines, I would like to fill the area between each line with a specific colour. Is that possible?
I searched the documentation and it mentions the "fill" option which only seems to fill everything below a line and furthermore doesn't seem to work at all if I try to add it to my line chart.
Options:
const options = {
chart: {
type: 'line'
},
colors: ["#000000", "#115F66", "#AEC6C8", "#EE7E66", "#115F66", "#AEC6C8"],
xaxis: {
type: 'datetime',
categories: xLabels,
tickAmount: xLabels.length,
},
yaxis: {
decimalsInFloat: 0,
min: 0,
},
legend: {
show: false,
},
series: [
{
name: 'Main',
data: this.plotting_data.historicalData,
},
{
name: 'First Lower Bound',
data: this.plotting_data.lowerPred1,
},
{
name: 'Second Lower Bound',
data: this.plotting_data.lowerPred2,
},
{
name: 'Middle',
data: this.plotting_data.prediction,
},
{
name: 'First Upper Bound',
data: this.plotting_data.upperPred1,
},
{
name: 'Second Upper Bound',
data: this.plotting_data.upperPred2,
},
],
}
Range Area Charts are currently not supported in ApexCharts (as of v3.8.5).
I'm trying to enable some operations on my grid such as grouping, filtering and sorting, individually they works as shown in the docs but there is no an example of those functionality working together.
By myself I was able to combine sorting and filtering but grouping does not work when i'm adding it as it shown in the docs. look at at my code
<template>
<div>
<Grid :style="{height: '100%'}"
ref="grid"
:data-items="getData"
:resizable="true"
:reorderable="true"
#columnreorder="columnReorder"
:filterable="true"
:filter="filter"
#filterchange="filterChange"
:sortable="true"
:sort= "sort"
#sortchange="sortChangeHandler"
:groupable="true"
:group= "group"
#dataStateChange="dataStateChange"
:columns="columns">
</Grid>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
editID: null,
columns: [
{ field: 'AbsenceEmployeID', filterable:false, editable: false, title: '#'},
{ field: 'Employe', title: 'Employer', cell: DropDownEmployes},
{ field: 'Remarque', title: 'Remarque'},
{ field: 'Type', title: 'Type', cell: DropDownTypes},
{ field: 'CreatedDate', filter:'date', editable: false, editor: 'date', title: 'créé le', format: '{0:d}'},
{ title: 'Actions', filterable:false, cell: CommandCell}
],
filter: {
logic: "and",
filters: []
},
sort: [
{ field: 'CreatedDate', dir: 'desc' }
],
group: [],
gridData: []
}
}
mounted() {
this.loadItems()
},
computed: {
absencesList() {
return this.items.map((item) => Object.assign({ inEdit: item.AbsenceEmployeID === this.editID}, item));
},
getData() {
return orderBy(filterBy(this.absencesList, this.filter), this.sort);
},
...mapState({
absences: state => state.absences.absences
})
}
methods: {
loadItems () {
this.$store.dispatch('absences/getAbsences')
.then(resp => {
this.items = this.absences.map(item => item)
})
},
filterChange: function(ev) {
this.filter = ev.filter;
},
columnReorder: function(options) {
this.columns = options.columns;
},
sortChangeHandler: function(e) {
this.sort = e.sort;
},
// the following is for grouping but not yet used, read more
groupedData: function () {
this.gridData = process(this.getData, {group: this.group});
},
createAppState: function(dataState) {
this.group = dataState.group;
this.groupedData();
},
dataStateChange: function (event) {
this.createAppState(event.data);
},
}
}
</script>
The last three methods are not used yet, so filtering and sorting is working perfectly as of now. then in other to enable grouping I want to replace :data-items="getData" by :data-items="gridData" and run this.groupedData() method after the items are loaded but grouping doesn't work.
I think everything should be handle by the dataStateChange event and process() function but I also tried but without success
If you define the filterchange and sortchange events they are being triggered for filter and sort and you will have to updated data in their handlers. If you rather want to use datastatechage event for all the changes you have to remove the filterchange and sortchange events and the datastatechage event will be triggered instead of them. In this case you will have to update the data in its handler.
You can use the process method of #progress/kendo-data-query by passing the respective parameter each data change that is needed as in the example below:
const result = process(data, {
skip: 10,
take: 20,
group: [{
field: 'category.categoryName',
aggregates: [
{ aggregate: "sum", field: "unitPrice" },
{ aggregate: "sum", field: "unitsInStock" }
]
}],
sort: [{ field: 'productName', dir: 'desc' }],
filter: {
logic: "or",
filters: [
{ field: "discontinued", operator: "eq", value: true },
{ field: "unitPrice", operator: "lt", value: 22 }
]
}
});
Hers is a sample stackblitz example where such example is working correctly - https://stackblitz.com/edit/3ssy1k?file=index.html
You need to implement the groupchange method to handle Grouping
I prefer to use process from #progress/kendo-data-query
The following is a complete example of this
<template>
<Grid :style="{height: height}"
:data-items="gridData"
:skip="skip"
:take="take"
:total="total"
:pageable="pageable"
:page-size="pageSize"
:filterable="true"
:filter="filter"
:groupable="true"
:group="group"
:sortable="true"
:sort="sort"
:columns="columns"
#sortchange="sortChangeHandler"
#pagechange="pageChangeHandler"
#filterchange="filterChangeHandler"
#groupchange="groupChangeHandler"
/>
</template>
<script>
import '#progress/kendo-theme-default/dist/all.css';
import { Grid } from '#progress/kendo-vue-grid';
import { process } from '#progress/kendo-data-query';
const sampleProducts = [
{
'ProductID': 1,
'ProductName': 'Chai',
'UnitPrice': 18,
'Discontinued': false,
},
{
'ProductID': 2,
'ProductName': 'Chang',
'UnitPrice': 19,
'Discontinued': false,
},
{
'ProductID': 3,
'ProductName': 'Aniseed Syrup',
'UnitPrice': 10,
'Discontinued': false,
},
{
'ProductID': 4,
'ProductName': "Chef Anton's Cajun Seasoning",
'UnitPrice': 22,
'Discontinued': false,
},
];
export default {
components: {
Grid,
},
data () {
return {
gridData: sampleProducts,
filter: {
logic: 'and',
filters: [],
},
skip: 0,
take: 10,
pageSize: 5,
pageable: {
buttonCount: 5,
info: true,
type: 'numeric',
pageSizes: true,
previousNext: true,
},
sort: [],
group: [],
columns: [
{ field: 'ProductID', filterable: false, title: 'Product ID', width: '130px' },
{ field: 'ProductName', title: 'Product Name' },
{ field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
{ field: 'Discontinued', filter: 'boolean', title: 'Discontinued' },
],
};
},
computed: {
total () {
return this.gridData ? this.gridData.length : 0;
},
},
mounted () {
this.getData();
},
methods: {
getData: function () {
this.gridData = process(sampleProducts,
{
skip: this.skip,
take: this.take,
group: this.group,
sort: this.sort,
filter: this.filter,
});
},
// ------------------Sorting------------------
sortChangeHandler: function (event) {
this.sort = event.sort;
this.getData();
},
// ------------------Paging------------------
pageChangeHandler: function (event) {
this.skip = event.page.skip;
this.take = event.page.take;
this.getData();
},
// ------------------Filter------------------
filterChangeHandler: function (event) {
this.filter = event.filter;
this.getData();
},
// ------------------Grouping------------------
groupChangeHandler: function (event) {
this.group = event.group;
this.getData();
},
},
};
</script>
I am trying to draw line chart. I have data set in form
{
line_1:{
rt:[1,2,3,4,5,6],
int:[2,3,4,5,6,7]
},
line_2:{
rt:[1,2,3,4,5,6],
int:[2,3,4,5,6,7]
}
}
What I have tried:
showChart(){
this.renderChart({
labels: this.data.line_1.rt,
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: his.data.line_1.intensity,
}
]
}, {responsive: true, maintainAspectRatio: false})
}
Now I want "rt" to be at x axis and intensity array of every line is different. I am able to draw a single line but not able to draw multiple.
Here is how my chart component looks like:
<script>
let VueChartJs = require('vue-chartjs');
export default VueChartJs.Line.extend({
props:['data', 'status'],
watch: {
// whenever question changes, this function will run
status: function (newStatus) {
if(newStatus === true){
this.showChart();
}
}
},
methods :{
showChart(){
console.log(this.data);
this.renderChart({
labels: this.data.groups[0]['peaks'][0].eic.rt,
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: this.data.groups[0]['peaks'][0].eic.intensity
}
]
}, {responsive: true, maintainAspectRatio: false})
}
},
mounted () {
}
})
</script>
For multiple lines, you have to add multiple datasets ;)
datasets: [
{
label: 'Line One',
backgroundColor: '#f87979',
data: this.data.groups[0]['peaks'][0].eic.intensity
},
{
label: 'Line two',
backgroundColor: '#f87979',
data: this.data.groups[0]['peaks'][0].eic.intensity
}
]