Create line chart component in Vue


Data Visualization is the important part of a commercial application. There are plenty of JavaScript library available for this task. In this series of post we are discussing about Chartjs and its Vue wrapper.

Creating Component may save your time and it increase the re-usability of the code.

Create a Line Chart component

In-order to use Chartjs charts we need multiple dependency which can be installed using one of the following methods.

 yarn add vue-chartjs chart.js
 npm install vue-chartjs chart.js --save

Create component

In the component folder of the project add the following code and name the file LineChart.js

import { Line, mixins } from 'vue-chartjs'

export default {
  extends: Line,  
  mixins: [mixins.reactiveProp],
  name: 'LineChart',
  props: [{
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  }],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}

We have used a mixin which combine the reactive props and Line chart from the vue-chartjs module.

Using the component

In the page component we can import component and bind the data, and options.

<template>
  <div class="flex-container">
    <LineChart :chartData="chartdata" :options="options" />
  </div>
</template>

<script>
// @ is an alias to /src
import  LineChart   from "@/components/LineChart"
export default {
  name: "LineChart",
  components: { LineChart
  },
  data (){
    return {
    chartdata: {
      labels: ['January', 'February'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 20]
        },
         {
          label: 'Data Two',
          backgroundColor: '#5885af',
          data: [140, 120]
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
    },
    }

  }
  
};
</script>
<style>

.flex-container {
  display: flex;
}
</style>

A complete set of chart components will be available on Vue-chart-components Repository

Following vue-route post may interest you

How to add router in Vuejs project


Router is enabling us to use vue app as different URL enabled , such as one of Home, About etc. It is not a new feature, it exists in react, angular etc.

Virtually router turn single page vuejs app into multi page app, in reality these pages are components (known for developers, not the end user). When the user click on the link Vuejs simply switching between these components.

Vue Router

By adding a Vue router to our app Vue will create additional folder structure , a router, view and configuration files.

View and Router

Views are page components ( url such as /about), which can be consisting of other components to. You can create additional pages as you wish and should configure on the router file.

New Vue project with router

In the CLI command we can specify whether want to use router on not, that is it.

For existing non router project

For existing non router projects it is possible to add router, but be careful that the app.vue file will be replaced by the vue CLI. So copy the content to clipboard or another file and move it back when the process is completed.

Issue the following command to add router using the vue CLI.

vue add router // say no to history

That is all you know about router,

The following vue post posts may help you

How to make API request in Nuxtjs component


Nuxtjs is a framework which simplifying the development of the Vue project.

Using async fetch property we can fetch data from an API end point. There is another method called asyncData

fetch v/s asyncData

The fetch can be placed on any component while the asyncData can be used only with page component directly, that is only with in the route.

fetching API

The fetch can be used to get data from an API , an Ideal API call will look like the following

data(){
return {
   dataHolder= []
}
},
async fetch() {
    const url='https://api.nuxtjs.dev/posts';
    this.Trending = await fetch(url).then(res =>
      res.json()
    )
  },
  // call fetch only on client-side
  fetchOnServer: false

fetch can be configure for either client or server using the fetchOnServer property

The following Nuxtjs posts may help you

How to read static JSON file using async fetch in Nuxtjs


Nuxtjs is a framework which simplifying the development of the Vue project.

Using async fetch property we can read data from JSON file placed inside the static folder. There are other methods for fetching data like asyncData.

fetch

The fetch can be placed on any component while the asyncData can be used only with page component directly, that is only with in the route.

Inside our script please add the fetch after the component name as follows

</p>
data(){
return {
   dataHolder= []
}
},
async fetch() {    
    const url='./hashTags.json';
    this.dataHolder= await fetch(url).then(res =>
      res.json()
    )
  },
<p>

fetch can be configure for either client or server using the fetchOnServer property

The following Nuxtjs posts may help you

How to add header in Nuxtjs


Nuxtjs is a framework which simplifying the development of the Vue project.

Lets learn how to add a cool Header component which will displayed all of the routes in our project.

Component

The component folder holds our custom vue components, lets create a Header component first

Our simple Header look like this

<template>
  <div>
    <nav>
      <nuxt-link  to="/" >
        <div class="navigation__logo">BlueBird</div>
      </nuxt-link>
      <div class="navigation__user">​ @user</div>
    </nav> 
  </div>
</template>

<script>
 
export default {
  name: "Header",
  created() {},
  data() {
    return {};
  },
  props: {},
  methods: {},
  components:{
 
  }
  };
</script>

<style scoped>
.header {
  background-color: red;
}

nav {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 5%;

  background-color: crimson;

  color: white;
}

nav.navigation__logo {
  font-weight: bold;

  font-size: 24px;
}
a{
  text-decoration:none;
  color: white;
}
.navigation__user {
  font-weight: bold;
}
</style>

Layout

The default.vue under Layout folder is responsible for structuring the site layout, we can add our component before the Nuxt component as follow, leave everything else intact.

<template>
  <div>
    <Header/>
    <Nuxt />    
  </div>
</template>
<script>
import Header from '@/components/Header.vue'
export default {
  components:{
    Header
  }
}
</script>

We can also create additional components and import and place them in the default.vue

The following Nuxtjs posts may help you

How to add routes in Nuxtjs


Nuxtjs is a framework which simplifying the development of the Vue project. Vuejs is already super cool framework , why I need another ? Nothing in Vue is changed in Nuxtjs, but it reduce the configuration time required and add some additional feature to it.

Routes

For routes Nuxtjs uses the folder structure. Under the Pages we have a default page, which is the landing page of our Nuxt app. We can create folder to create sub routes and add a file ending with .vue extension to create a routes.

For example we can create about page by creating one file About.vue . For sub route, Products, can create a folder products , then inside folder create a file index.vue ( default home for products).

Suppose you want to access some special route with product id . It can be create in a different way. Inside the Products folder create a file _id.vue in which id is the id of the product.

The following Nuxtjs posts may help you

Nuxtjs project setup


Nuxtjs is a framework which simplifying the development of the Vue project. Vuejs is already super cool framework , why I need another ? Nothing in Vue is changed in Nuxtjs, but it reduce the configuration time required and add some additional feature to it.

Nuxtjs used folder structure to build routing system. For applying component such as Header/Footer for the whole project we can use the Layout folder. There are plenty of features to explore

Create Project

First install Nuxtjs using the npm

npm install nuxt

To create project, you have to use any of the following command

npm init nuxt-app <project-name>
npx create-nuxt-app <project-name>
yarn create nuxt-app <project-name>

Run the project

we can use the npm dev command to run the project

The following Nuxtjs posts may help you

Easiest way to use bootstrap in Angular


Angularjs is a front end library for create beautiful interactive web application using Nodejs ( JavaScript). If you are familiar with Reactjs , may catch it faster.

bootstrap

To enable bootstrap for the angular project there are multiple ways. You can manually include the library by downloading it from the getBootstrap.com. I prefer the npm way as most developers does

  1. Install the bootstrap from npm repo
  2. import them in styles.css

Install bootstrap

npm install --save bootstrap

Styles.css

Styles.css can be found at the root of your src folder of the project. Import the bootstrap main.css enable it for all the component for your project.

@import "~bootstrap/dist/css/bootstrap.min.css";

You can import as many styles you need to include.

Keep reading Angular posts

How to display list of data in Angular component template


Angularjs is a front end library for create beautiful interactive web application using Nodejs ( JavaScript). If you are familiar with Reactjs , may catch it faster.

List of data

As in other languages a list of data can be stored using a list/array in Angular. So how do we display it in HTML ? Like we do in other JS framework Angular also do, but using ngfor.

In our example we had a list of data as follows

 this.list= ['DELL', 'HP', 'LENOVO', 'ACER'];

In the HTML template we can render it using *ngFor

<p *ngFor= "let brand of list">
    <button>{{brand}}</button>
</p>

Keep reading Angular posts

Conditionally place component in Angular


Angularjs is a front end library for create beautiful interactive web application using Nodejs ( JavaScript). If you are familiar with Reactjs , may catch it faster.

conditional place component

In Angular we can place components conditionally, this can be done by

  • Create a property
  • use ngIf

First up all create simple property for enabling and disabling. It can be true or false property.

 enableFeature=flase

Now you can place ngif with in the any tag/component. In our case it is just a h1 tag.

<h1 *ngIf="enableFeature">{{'You slected ' + brandSelected}} </h1> 
What does this means ?

The heading will only show up if the enableFeature is set to true

Keep reading Angular posts