Vuejs Simple Line Chart using JSON – javascript
In this Post We Will Explain About is Vuejs Simple Line Chart using JSON – javascript With Example and Demo.
Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to vuejs line chart example
In this post we will show you Best way to implement creating simple charts with Vuejs, hear for How to vuejs custom Line chart with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
vuejs Simple line chart using JSON
Create simple Vuejs interactive highcharts charts easily with javascript Frameworks Like as a using vuejs with highcharts as well as Create simple interactive charts and simple easily for your mobile or web projects Like as a Anallytics..
index.html
[php]
[/php]
index.js
[php]
Vue.use(VueHighcharts);
var options = {
title: {
text: ‘Top 10 Web-sites’,
x: -20 //simple center
},
subtitle: {
text: ‘Websites: www.infinityknow.com.com’,
x: -20
},
xAxis: {
categories: [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’,
‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’
]
},
yAxis: {
title: {
text: ‘Total Values’
},
plotLines: [{
value: 0,
width: 1,
color: ‘#808080’
}]
},
tooltip: {
valueSuffix: ‘°C’
},
legend: {
layout: ‘vertical’, //chart vertical
align: ‘right’,
verticalAlign: ‘middle’,
borderWidth: 0
},
series: [{
name: ‘Laravel’,
data: [7.0, 6.9, 9.8, 14.8, 21.2, 21.8, 25.2, 26.8, 23.6, 21.6, 13.9, 9.6]
}, {
name: ‘PHP’,
data: [-0.2, 0.8, 8.7, 11.6, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.8]
}, {
name: ‘Magento’,
data: [-0.9, 0.6, 6.8, 8.4, 13.8, 17.0, 21.6, 17.9, 14.6, 9.0, 6.9, 1.0]
}, {
name: ‘Angularjs’,
data: [6.9, 4.2, 8.7, 8.8, 11.9, 15.2, 17.0, 16.6, 14.2, 10.6, 6.6, 4.8]
}]
};
var vm = new Vue({
el: ‘#liveApp’,
data: {
options: options
},
methods: {
liveChartUpdate: function() {
var chart = this.$refs.highcharts.chart;
chart.credits.update({
style: {
color: ‘#’ + (Math.random() * 0xffffff | 0).toString(16)
}
});
}
}
});
[/php]
I hope you have Got vuejs Simple line chart example And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.