Larapex Charts is not limited to just bar charts. Now if you navigate to localhost:8000/expenses in your browser, the bar chart should be visible: At the bottom of the page, add the package’s CDN and script files: The chart can now be rendered in your view using $chart->container(). Then create a route /expenses, which triggers the index function in the ExpensesController class and returns the appropriate view file: name('expenses.index') To ensure that the index function is invoked when the view page is accessed, we need to create a route for it in routes/web.php.įirst, import your controller ExpensesController. In the code above, we passed the chart object to expenses.index, which is an file in an Expenses folder. The chart can then be passed to a view: $chart->build()]) In the index function, create an object of ExpensesChart and use the build() function in the ExpensesChart class to create your chart. Navigate to app/HTTP/Controller/ExpensesController and import the ExpensesChart class you created. You should see a message confirming that the controller was created successfully: Next, create a controller to help build and render the chart: php artisan make: controller ExpensesController –r >setSubtitle('Weekly expenses in july.') Public function build(): \ArielMejiaDev\LarapexCharts\BarChart Set the title of your chart using setTitle, your chart data using addData, and the values on the x axis using setXAxis: chart = $chart You can customize the chart by giving values to its properties. Let’s create a bar chart first:Ī chart class will be created in app/Charts/ExpensesChart. We’ll need to create an instance of this class, which I’ll name ExpensesChart for this example: php artisan make:chart ExpensesChartĪfter running the above command, you will be prompted to select the type of chart you want to create. The Larapex Charts package provides a chart class. Using Larapex Charts to create a bar chart Now you can use Larapex Charts in your project. Once you see DONE in green text as shown in the image below, you will have successfully set up Larapex Charts: Next, publish Larapex’s config files to make them accessible to your application: php artisan vendor:publish –tag=larapex-charts-config To make use of the Larapex Charts library in your project, install it with composer: composer require arielmejiadev/larapex-chartsĪfter installing this library with the command above, you should see the below: This package provides us with pie charts, donut charts, area charts, line charts, and others. With the help of this package, we can easily create and render charts in our Laravel application without writing any JavaScript code. Larapex Charts is a Laravel wrapper around ApexCharts. Using ConsoleTVs/Charts to create a pie chart.Using Larapex Charts to create a bar chart.I chose these three libraries specifically for their seamless integration into projects and the very few lines of code they require to spin up a full-fledged chart. The Laravel chart libraries we’ll be covering are: We’ll use these libraries to create line charts, bar charts, and pie charts. In this article, we’ll take a look at the best chart libraries in Laravel and how you can use them in your projects. Since charts have become a common feature in websites, it makes sense to use chart libraries that enable the creation of these visualizations without writing hundreds of lines of code or building from scratch. It is common for developers to use database information to create visualizations that are easy for users to comprehend. This need makes charts increasingly valuable as a tool that helps people simplify complicated data and communicate information quickly and effectively. Exploring the best Laravel chart librariesĪs companies become more data-driven, the need to collect and analyze data efficiently continues to rise. I'm skilled in HTML, CSS, JavaScript, Ionic, React, PHP, Laravel, and Flutter. I love creating applications with responsive, beautiful, intuitive, state-of-the-art designs. Samson Omojola Follow I'm an experienced software engineer.
0 Comments
Leave a Reply. |