/vue-charts

Base on Vue2.0 wrapper for ChartJs.

Primary LanguageVueMIT LicenseMIT

vue-charts Package Quality

Base on Vue2, wrapper for ChartJs.

Render a Chart Easily

  • Single Line
  • Multiple Bar
  • Multiple Mix Chart

Features

Document and Demo

Home page
Line
Bar
Horizontal Bar
Radar
Polar Area
Pie
Doughnut
DataBinding
Jsondata

NPM Package

NPM Package

Install

npm install hchs-vue-charts   

or

yarn add hchs-vue-charts  

Notice

  • vue-charts base on Vue 2
  • vue-charts base on Chart.js 2

How to use --- dist & CDN

1.build a page

    <body>
        <div id="app">
            <chartjs-line></chartjs-line>
        </div>
    </body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
    <script src="js/vue-charts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
    <script type="text/javascript">
		Vue.use(VueCharts);
        const app = new Vue({
            el: '#app',
        });
    </script>

2.Done!
dist&CDN Demo

How to use --- Laravel Elixir

1.Checkout your gulpfile.js in your laravel project

    const elixir = require('laravel-elixir');

    require('laravel-elixir-vue-2');

    /*
     |--------------------------------------------------------------------------
     | Elixir Asset Management
     |--------------------------------------------------------------------------
     |
     | Elixir provides a clean, fluent API for defining some basic Gulp tasks
     | for your Laravel application. By default, we are compiling the Sass
     | file for our application, as well as publishing vendor resources.
     |
     */

    elixir(mix => {
        mix.sass('app.scss')
           .webpack('app.js');  // we just need to require 'hchs-vue-charts' in this file or somewhere else
    });

2.open your app.js

    /**
     * First we will load all of this project's JavaScript dependencies which
     * include Vue and Vue Resource. This gives a great starting point for
     * building robust, powerful web applications using Vue and Laravel.
     */

	//By default the bootstrap file will require('vue');
    require('./bootstrap');

	// chartjs package
	require('chart.js');
    // vue-charts package
    require('hchs-vue-charts');
    Vue.use(VueCharts);


    /**
     * Next, we will create a fresh Vue application instance and attach it to
     * the page. Then, you may begin adding components to this application
     * or customize the JavaScript scaffolding to fit your unique needs.
     */

    Vue.component('example', require('./components/Example.vue'));

    const app = new Vue({
        el: '#app'
    });

3.run gulp in your laravel project

	gulp

4.modify your wellcome.blade.php or where you want to show the chart

  • give vue root id
  • add line chart component
  • don't forget your script source
	<body>
	  <div class="flex-center position-ref full-height">
		  <div id="app" class="content">
			  <!--line chart component-->
			  <chartjs-line></chartjs-line>
			  <div class="title m-b-md">
				  Laravel
			  </div>

			  <div class="links">
				  <a href="https://laravel.com/docs">Documentation</a>
				  <a href="https://laracasts.com">Laracasts</a>
				  <a href="https://laravel-news.com">News</a>
				  <a href="https://forge.laravel.com">Forge</a>
				  <a href="https://github.com/laravel/laravel">GitHub</a>
			  </div>
		  </div>
	  </div>
  	</body>
  	<!--set script src-->
  	<script src="{{asset('js/app.js')}}"></script>

5.Done

Thanks

@yeknava - Horizontal Bar