Vuejs Simple Line Chart using JSON – javascript

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

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/highcharts/highcharts.js"></script>
<!-- Simple vue-highcharts please should be load and this after Highcharts -->
<script src="https://unpkg.com/vue-highcharts/dist/vue-highcharts.min.js"></script>

<div id="liveApp">
  <highcharts :options="options" ref="highcharts"></highcharts>
  <button @click="liveChartUpdate">Live update credits</button>
</div>

index.js

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)
        }
      });
    }
  }
});

Example

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.