Neti Pot Manufacturer

    hchs-vue-charts

    1.2.8 • Public • Published

    vue-charts

    Base on Vue2, wrapper for ChartJs.
    -Vue js
    -Chart js
    -Work well with Laravel

    Render a Chart Easily

    -Single Line
    -Multiple Bar
    -Multiple Mix Chart

    Features

    -Single Chart
    -Multiple Chart
    -Multiple Mix Chart
    -Override Datasets
    -Override Option
    -Pass Json data
    -DataBinding & Auto Render

    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

    Install

    npm i hchs-vue-charts

    DownloadsWeekly Downloads

    1,528

    Version

    1.2.8

    License

    MIT

    Last publish

    Collaborators

    • g9308370