I would like to read a json file and plot the data on a Chartjs using VueJs.
I was able to display some data but not from a Json file.
So far I have a vue.app looking like this:
export default {
name: 'app',
data () {
return {
labelschart: [],
datachart: [],
testLabels: ['10/01/2017 02:25:34', '11/01/2017 02:25:34', '12/01/2017 02:25:34', '13/01/2017 02:25:34', '14/01/2017 02:25:34'],
testData: [93.5, 93.4, 93.3, 93.4, 93.5]
...
computed: {
lineData () {
return {
labels: this.testLabels,
datasets: [
{
label: 'Instrument',
backgroundColor: '#36A2EB',
data: this.testData,
fill: 'False',
borderColor: 'blue'
}
]
}
}
my linechart.vue is this:
<script>
import { Line, mixins } from 'vue-chartjs'
export default Line.extend({
mixins: [mixins.reactiveProp],
props: ['chartData', 'options'],
mounted () {
this.renderChart(this.chartData, this.options)
}
})
</script>
this is the tag:
<line-chart class="card-content" :chartData="lineData" :options="options"></line-chart>
How can I fill the labelschart and datachart from a json file?
Thanks,
from Display json data on vuejs chartjs
No comments:
Post a Comment