score:0
Accepted answer
you shouldn't try access a computed property from your data as explained on the vue forum.
the data is evaluated before the computed array
i would advise changing your computed property to something like below and then use that as your chart data:
foo() {
var plotdata = []
for (var i=0; i<this.pureseconddataset.length; i++)
plotdata.push({t: new date(this.pureseconddataset[i].t), y: this.pureseconddataset[i].y})
return {
chartdata: {
datasets:[{
backgroundcolor: '#ed645a',
bordercolor: '#ed645a',
fill: false,
data: plotdata
}]
}
}
}
i've added a fiddle to show how you can do this by not using the computed property in data. while i was making the fiddle i found that for a proper line graph you need to have a labels property for the x-values otherwise you can use type: scatter and drawline:true to specify the x and y values together. chart.js - plot line graph with x , y coordinates
new vue({
el: "#app",
data: () => {
return {
plotdata: [{
x: 1,
y: 1
}, {
x: 2,
y: 2
}, {
x: 3,
y: 3
}]
}
},
computed: {
foo() {
return {
type: 'scatter',
data: {
datasets: [{
showline: true,
label: 'my first dataset',
backgroundcolor: 'rgb(255, 99, 132)',
bordercolor: 'rgb(255, 99, 132)',
data: this.plotdata
}]
}
}
}
},
mounted() {
var ctx = document.getelementbyid('chart').getcontext('2d');
new chart(ctx, this.foo);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<div id="app">
<canvas id="chart" width="400" height="400"></canvas>
</div>
Source: stackoverflow.com
Related Query
- How to use computed property with data from JSON in data object for time axis in Vue using Chart.js
- How to use data from database for chart.js (bubble chart) with Ajax/JSON method?
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- How to use JSON data in creating a chart with chartjs?
- How to use async data for use with chart.js in ionic
- How can I show JSON data in Chart.js with Javascript if static values are working but dynamic from mySQL are not?
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- Populating Chart.Js line graph with multiple lines using data from a JSON Object
- How to write better code in es6 for formatting an object with array values
- How to set min max for x axis depend on data with Chartjs and Spring Boot?
- How to use chart.js to plot line chart with x axis as time stamp in seconds
- How to pass a chart.js chart data object in json from a controller in asp.net mvc
- Multiple axis line chart with Chart.js and JSON data from Google Sheet
- how can i grab a property from an array of JSON objects to use the values of that property as a labels in my chart?
- How to get data from JSON for chart.js, using vue.js
- How to use a string returned from php by ajax as data for a chart.js chart?
- how do i use the numbers i key in from a form as the input data for chartjs
- Chart for Real time data with duplicate x axis
- Chartjs random colors for each part of pie chart with data dynamically from database
- How to prevent first/last bars from being cut off in a chart with time scale
- Multiple lines / data series from JSON file with Chart.js
- Chart.js load new data from saved JSON object
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to create chartjs chart with data from database C#
- In Chart.js >3.0, on axis of type time, how to show labels and ticks only for existing data points (make labels reflect data)?
- Adding a Date adapter for Time Cartesian axis from a cdn
- Angular / ng2-charts: Fetching json data in chart object showing: Cannot read property 'length' of undefined
- format JSON data for chart.js from Angular 4 observable
More Query from same tag
- Double Y Axis + Bar chart combo
- How to reduce the gap between bars on bar chart
- Dynamically add charts with chart.js
- The data that is called in chart does not match the database
- start y-axis from 0 in ng2-charts
- Chart.js v3: How can I grow fontsize of legend of my graph?
- Don't show label tooltip in Chart.js if hover is less than 1 second
- Attach onAnimationComplete for Chart.js after creation
- How to show all dates on xAxis between two dates in chart.js
- Fetch more data for line chart onZoom/onPan issues
- How can I control the placement of my Chart.JS pie chart's legend, as well as its appearance?
- chart.js mix chart (bar + line): get lines to start at x = 0
- Chartjs background color multiple Dataset
- chart.js animation loading
- Stacked bar chart with chartjs with included values
- Lost column of bar chart in Chart.js
- How to dynamically call function with a for loop within Chart.js (JS)
- Pie Chart Label is not visible in ReactJS
- Place Text in Chart-Canvas Area in ChartJS
- Change value from 0 to something on tooltip only
- angular chart.js not resizing (shinking) in a flexbox
- Stepped line with null values in chart.js
- Using Chart.js with Dates as x-Axis labels
- Datalabels plugin throws error when using scriptable option
- Unable to clone a Chart.js chart in a pop up
- Javascript not populate chart after retrieve json data
- Chart.js hidden property
- Chart.js - Is it possible to have two y axis with positive values one above the other?
- Angular ng2-charts chartsjs-plugin-labels options not working
- Chart.js not displaying in box