Skip to content

Instantly share code, notes, and snippets.

@sundlee

sundlee/vue-chart-example.html

Last active February 1, 2023 16:59
Show Gist options
  • Save sundlee/ddf5c875de98310721ac838767bedf56 to your computer and use it in GitHub Desktop.
Save sundlee/ddf5c875de98310721ac838767bedf56 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
vue-chart-example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue - chart.js example</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@2.0.10/dist/vuetify.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />
<script src="https://cdn.jsdelivr.net/npm/babel-regenerator-runtime@6.5.0/runtime.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.10/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs@3.4.0/dist/vue-chartjs.js"></script>
</head>
<body>
<div id="app">
<v-row dense>
<v-col cols="sm">
<v-card class="pa-2" outlined tile raised>
<my-line-chart v-if="ChartConfig.labels.length" :line-data="ChartConfig" :chart-options="options">
</my-line-chart>
</v-card>
</v-col>
<v-col cols="sm">
<v-card class="pa-2" outlined tile raised>
<my-bar-chart v-if="ChartConfig.labels.length" :bar-data="ChartConfig" :chart-options="options"></my-bar-chart>
</v-card>
</v-col>
</v-row>
<v-row no-gutters>
<v-col cols="sm">
<v-card class="pa-2" outlined tile raised>
One of three columns
</v-card>
</v-col>
</v-row>
</div>
<script>
Vue.component('my-bar-chart', {
extends: VueChartJs.Bar,
props: ['barData', 'chartOptions'],
mounted() {
this.renderChart(this.barData, this.chartOptions);
},
/*watch: {
barData () {
console.log('bar data changed')
this.renderChart(this.barData, this.chartOptions);
},
chartOptions () {
this.renderChart(this.barData, this.chartOptions);
}
}*/
}, {
responsive: true,
maintainAspectRatio: false
})
Vue.component('my-line-chart', {
extends: VueChartJs.Line,
props: ['lineData', 'chartOptions'],
mounted() {
this.renderChart(this.lineData, this.chartOptions);
}/*,
watch:{
lineData () {
this.renderChart(this.lineData, this.chartOptions);
},
chartOptions () {
this.renderChart(this.lineData, this.chartOptions);
}
} */
}, {
responsive: true,
maintainAspectRatio: false
})
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
ChartConfig: {
labels: [],
datasets: [
{
data: [],
backgroundColor: '#3498db',
borderColor: 'rgba(136,136,136,0.5)',
label: "2013"
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
categoryPercentage: 0.5,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
},
iceCream: [],
drawer: false
}
},
mounted: function () {
this.getListData();
},
methods: {
getListData: async function () {
this.status = "getting data...";
// var that = this;
await axios.get("https://my-json-server.typicode.com/isogunro/jsondb/IceCream").then((response) => {
console.log(response.data)
this.getChartData(response.data);
})
.catch(function (error) {
console.log(error);
});
},
getChartData: function (chartData) {
//console.log(chartData);
for (var i = 0; i < chartData.length; i++) {
this.ChartConfig.labels.push(chartData[i].Flavor)
//this.$set(this.ChartConfig.labels,i,chartData[i].Flavor)
}
for (var i = 0; i < chartData.length; i++) {
this.ChartConfig.datasets[0].data.push(chartData[i].Vote)
//this.$set(this.ChartConfig.labels,i,chartData[i].Vote)
}
console.log(this.ChartConfig);
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment