Application of Chart.js in Laravel project

Source: Internet
Author: User
Tags cloudflare

This article is reproduced, the original: Chart.js in the Laravel project application

Introduced

Chart.js is a HTML5 chart library that uses canvas elements to showcase a wide range of client diagrams, support line charts, column charts, radar charts, pie charts, doughnut charts, and more, and this article describes how to use Chart.js in Laravel projects.

Installation

You can install chart.js in NPM or bower with the following command.

NPM Install chart.js--savebower install chart.js--save

You can use CDN link in your project.

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.jshttps://cdnjs.cloudflare.com/ajax/libs/ chart.js/2.6.0/chart.bundle.min.jshttps://cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.jshttps:// Cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.min.js

You can download the latest version of Chart.js from GitHub, and there are plenty of examples to learn.


My choice is to download a few JS files, and then placed in the Laravel project under the Public/js directory, such as:

Use

Add the following code wherever you want in the HTML, and this canvas is where the chart is. :

<canvas id="my_chart"  width= "height= "  - "></canvas>

Then in the controller to implement a data query method, and to return a JSON string, the specific data according to your needs, I only check a set of data, make a pie chart, can also be more than one group of data production line chart, histogram and so on.

 Public functionGetchartdata () {$my _data=Array(); Array_push($today _data, Visitcapacity::where (' My_data ', ' >= ', Carbon::today ())->where (' site ', 1),Count()); Array_push($today _data, Visitcapacity::where (' My_data ', ' >= ', Carbon::today ())->where (' site ', 2),Count()); Array_push($today _data, Visitcapacity::where (' My_data ', ' >= ', Carbon::today ())->where (' site ', 3),Count()); Array_push($today _data, Visitcapacity::where (' My_data ', ' >= ', Carbon::today ())->where (' site ', 4),Count()); Log:: Info (Json_encode ($my _data)); return $my _data; }

To add a route:

Route::get (' Get_chart_data ', ' member\[email protected] ');

JS implementation:

$.get (' Get_chart_data ',function(data, status) {varCTX = document.getElementById ("My_chart"). GetContext ("2d")); varMy_chart =NewChart (ctx,{type:' Pie ', Data: {labels: ["Home article List",                        "Categorized articles list",                        "Article details",                        "About me.",], datasets: [{data:data, back                            Groundcolor: [Window.chartColors.red, Window.chartColors.orange,                        Window.chartColors.purple, Window.chartColors.green, ],}]}, options: {responsive:true,                }            });});
Definition of color:
Window.chartcolors = {    ' rgb (255,) ',    ' RGB (255, 159, +) ',    ' rgb (255, 205 , (+)'    ,' RGB (192, 192)    ', ' RGB (162, 235) '    , ' RGB (153, 102, 255) '  ,    ' RGB (201, 203, 207) '};

Results such as:


The value of the type in JS is changed to doughnut, and the result is as follows:


See the official documentation for more information: http://chartjs.cn/docs/#line-chart-introduction

Application of Chart.js in Laravel project

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.