![121396.CJoze.071cdc35-33d6-4b7f-a327-304d03978184.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516378801/m0seimjoetbtc15s1bup.png)
<a href="https://codepen.io/andreic/pen/CJoze/image/large.png">Image-source</a>
This time I will briefly review the statistical data, it is not all the web related to statistics, its normal web for things that smells statistics intended for the admin section or for certain consumption because the data is confidential, this time I will present the data in the form of statistics for can help view data maximally and more accurately. I will use a library I recommend to create statistical views on a web. and I will use it in the framework vue.js. just let's get started
#### What Will I Learn?
- Install Package library with NPM
- Combine the vuejs and library jquery 
- Implement Morris.js in Template

#### Requirements
- Install Node.js
- Install Vue Cli
- Browser(Chrome,firefox,IE, etc)
- Basic Jquery and Es6

#### Difficulty
- Basic

### Install Package library with NPM
The first step I will do is to install the package from Morris.js via NPM. You can open the folder you have installed vue cli then open the command line and install package morris.js.
<code>npm install vue-morris --save</code>
![Screenshot_1.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516379157/blaj4wxih6mvgzphugwf.png)
If there is no error eating the install process will work.

### Combine Vuejs and Jquery.
In its default we can not access jquery in vue.js, because vue.js and other javascript framework has been using <b>es6</b> javascript language. therefore vue.js does not recognize the <b>$</b> Jquery symbol. But if you use <b>webpack</b> you can overcome it by declaring it on <code>webpack.config.js</code>
You can search the web.config.js file or with the search feature in your text editor for faster results. the following is the structure of my file.
![Screenshot_2.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516379560/pn32pft6xbcmpxywhfmk.png)

You can add this code to declare jquery in vue.
<pre><code>
resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'jquery': 'jquery/src/jquery.js'
    }
  }
</code>
</pre>
I have added in my file like this. and now you can use jquery on vue.js
https://res.cloudinary.com/hpiynhbhq/image/upload/v1516379772/zwcodhzdiuagfsqgno2v.png


### Implement Morris.js in Template
After all the configuration we have created, now we are ready to use library morris.js to display our statistical data. There are several steps we must follow.
<li><b>Register Morris.js in Vue.js</b></li>
Open your <b>main.js</b> file and import morrris.js like this
<b>main.js</b>
<pre><code>
import Vue from 'vue'
import App from './App'
import Raphael from 'raphael/raphael'
global.Raphael = Raphael
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})
</code>
</pre>

<pre><code>
import Raphael from 'raphael/raphael'
global.Raphael = Raphael
</code> 
</pre>
Import Raphael in vue. and use it as globally

<li><b>Use in template</b></li>

The following is the app.vue file that used morris.js. In morris we can display statistics in different forms. not only different forms of data in the show are also different, here is the data and display of each statistic
<b>Donut Chart</b>

``` html
<template>
  <div id="app">
    <h1>Donut Chart</h1>
   <donut-chart id="donut" :data="donutData" :colors="arrayColors" resize="true">
</donut-chart>
  </div>
</template>
<script>
import { DonutChart } from 'vue-morris'
export default {
  data(){
    return{
      donutData: [
        { label: 'Car', value: 40 },
        { label: 'Motorcycle', value: 150 },
        { label: 'airplane', value: 100 }
      ],
      arrayColors:[ "#FF6384", "#73c000", "#FFCE56" ]
    }
  },
  components:{
    DonutChart
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
```
![Screenshot_4.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516381611/vqhkl0ohtsvynthadpu1.png)

<b>Barchart</b>
``` html
<template>
  <div id="app">
    <h1>Bar chart</h1>
   <bar-chart id="bar" :data="barData" :bar-colors="arrayColors" :xkeys="xkeys" :ykeys="ykeys" grid="true" resize="true" grid-text-weight="bold">
</bar-chart>
  </div>
</template>
<script>
import {BarChart} from 'vue-morris'
export default {
  data(){
    return{
      barData: [
        { year: '2012', car: 40 , motorcycle:300, airplane:60},
        { year: '2013', car: 150, motorcycle:280, airplane:70},
        { year: '2014', car: 100, motorcycle:150, airplane:30},
        { year: '2015', car: 100, motorcycle:390, airplane:90}
      ],
      xkeys:["2012","2013","2014","2015"],

      arrayColors:[ "#5859f9", "#73c000", "#cc45ff" ],
      ykeys:["car","motorcycle","airplane"]
    }
  },
  components:{
    BarChart
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
```
![Screenshot_5.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516383665/ety7rrir5wtekvtm2qwq.png)


We have finished implementing morris in vue.js. a little adjustment in the data section to be in the passing into the chart, we need to use v-bind to make the data becomes dynamic, just so much of me. hopefully this tutorial can help you. thank you

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@alfarisi94/use-morris-js-in-vue-js">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>