A Simple Dashboard Chart in Laravel Nova using Chart JS

Overview

Nova ChartJS - Laravel Nova Package

A Laravel Nova Dashboard with Chart JS | See ๐Ÿ“˜ Documentation Page

Continues Integration Latest Version on Packagist Total Downloads License State Status License

Listed in Awesome ChartJS License

This Nova Chart JS Integration requires Nova 2.0 or higher.

Chart JS Integration in Action

Installation & Documentation

๐ŸŽ“ For better experiences, we moved documentation to : https://coroo.github.io/nova-chartjs/

ChangeLog

Please see CHANGELOG for more information on what has changed recently.

License

The MIT License (MIT). Please see License File for more information.

Comments
  • How to stack bars over each other

    How to stack bars over each other

    By default a stacked bar chart adds all values. According to the documentation to overlap the values a configuration like this is needed:

    var stackedBar = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: {
            scales: {
                xAxes: [{
                    stacked: true
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        }
    });
    

    How would I enter this config into nova-chartjs?

    opened by michaelw85 12
  • [BUG] Chart renders out of card

    [BUG] Chart renders out of card

    Hello,

    Sorry if I am violating any rules or made any obvious mistakes, I'm an intern and this is my first bug report, so please bear with me.

    Whenever I try to display any charts from the package in Nova, the charts are rendered outside of the cards. The problem ensues even with the hardcoded example code from the documentation. I haven't changed anything from the code. I thought that it might be me, but apparently the other developers have had similar experiences where the interface is not working properly.

    chartJSIssue

    We are working with

    • Laravel version 8.18.1
    • Nova version 3.16.3
    • Nova-ChartJS version 0.3.2

    I'm opening my Nova CMS on

    • OS: Windows 10
    • Browser firefox 83.0

    Do note that I'm on a virtual machine and I am using Homestead, though I don't think this should be a problem since my coworkers are not using Homestead and are experiencing the same issue.

    I hope I've provided the appropriate information so people can help me. I love how the charts look and the many options it procides. Hopefully this issue is solvable so the package can be integrated within the project.

    bug 
    opened by Hieu401 9
  • Error work Postgres

    Error work Postgres

    I have error SQLSTATE[42703]: Undefined column: 7 ERROR: column "%b %Y" does not exist LINE 1: select DATE_FORMAT(transactions.created_at, "%b %Y") AS cat

    Laravel Database - Postgres

    opened by pblaravel 9
  • Adds Nova 4.x Support

    Adds Nova 4.x Support

    This adds Nova 4.0 only support and has breaking changes and would, therefore, be a major release.

    • [x] Upgraded to Nova 4.x (Nova 3 support removed) ๐Ÿ‘‹
    • [x] Upgraded Vue Chart.js to 4.x (Vue 3 compatibility) which forces update Chart.js 3.x
    • [x] Upgraded to Chart.js 3.x (Chart.js 2 support removed) ๐Ÿ‘‹
    • [x] Supports Nova 4 Light/Dark/System toggle ๐ŸŒ‘ ๐ŸŒž
    • [x] Supports Nova 4 brand colour ๐Ÿ–Œ๏ธ (only on charts using models) ๐ŸŸฅ ๐ŸŸฆ ๐ŸŸฉ
    • [x] YTD, QTD and MTD filters have been changed to perform the same query as Trends & Metrics in Nova 4.x ๐Ÿ”
    • [x] Charts using the built-in model data api will now show the classic Nova loading indicator when it is fetching data โฒ๏ธ

    Closes #128

    I have kept all the package specific options the same, however, with the Chart.js update some will likely have to tweak their chart options as needed and follow this guide:

    https://www.chartjs.org/docs/latest/getting-started/v3-migration.html

    Click here for demo video
    opened by dmason30 8
  • Week number is out

    Week number is out

    Noticed the week numbers start at 0, Week number should start at 1 (I noticed my stats for week 50 was actually week 49)

    E.g W0 2020 should be W1 2020. https://www.epochconverter.com/weeks/2019

    screenshot_3962 bug enhancement 
    opened by gmill20 8
  • Refresh button for custom chart.

    Refresh button for custom chart.

    How can I use the refresh button for a custom chart? It seems like work with only Laravel Data Model chart.

    I cache my chart data. It would be great if the refresh button can fire an event to delete cache or something else.

    Thank you so much!

    enhancement 
    opened by phuclh 7
  • How to set options attribute of chartjs

    How to set options attribute of chartjs

    Thank you for this great package. I tried to hide the legend or call a callback function to format the label of yaxis. I did follow the instruction in Chartjs document, something like that:

    (new BarChart())
        ->title('Expense')
        ->animations([
            'enabled' => true,
            'easing'  => 'easeinout',
        ])
        ->series(array([
            //'barPercentage'   => 1,
            'label'           => 'Average Sales 2',
            'backgroundColor' => '#F87900',
            'data'            => $chartData,
        ]))
        ->options([
            'xaxis'  => [
                'categories' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            ],
            'legend' => [
                'display' => false
            ]
        ])
        ->width('2/3'),
    

    But it didn't hide the legend. So does this great package follow the chartjs document or it has a different way to pass value to option attribute?

    bug 
    opened by phuclh 6
  • Problems getting charts to display.

    Problems getting charts to display.

    I'm using Nova 2.12 and nova-chartjs v 0.2.4. I'm getting js errors. image used composer to install, and pasted the code for the chart from the example into the return of the cards method of the NovaServiceProvider Class.

    bug 
    opened by tgrantmartin 5
  • Tooltip Custom Feature

    Tooltip Custom Feature

    Hello I am trying to hide the legend for my graph, looks like it not working? this is in the doc image this is what I have in my code image and this is what the nova-chartjs produce with legend attached image

    enhancement 
    opened by Danny-Tran 5
  • Error after update to v0.0.9

    Error after update to v0.0.9

    • Updating coroowicaksono/chart-js-integration (v0.0.6 => v0.0.9): Downloading (100%)

    Receive undefined property: stdClass::$fill

    p.s is there anyway to get the charts to show weekly stats as opposed top monthly?

    bug 
    opened by gmill20 5
  • Unable to set fill for linechart

    Unable to set fill for linechart

    Fill is always set to false in code here

    I can understand that you would like to default this to false but I would not forcefully overwrite when a developer sets the option to true.

    enhancement 
    opened by michaelw85 4
  • Adjustable height

    Adjustable height

    I found https://github.com/coroo/nova-chartjs/issues/64 but it is from 2 years ago. Trying to adjust height via the card does not appear to work.

    There's this: https://github.com/coroo/nova-chartjs/blob/f6603f5767d3deeb531340e71995cdc732d97b2f/resources/js/stripe-chart.vue#L15-L20

    but it's not passed from https://github.com/coroo/nova-chartjs/blob/master/resources/js/components/StripeChart.vue unless I'm missing something here. Some guidance would be greatly appreciated.

    bug 
    opened by zeroxs 0
  • [Feature Request] Ability to add css classes or a custom id

    [Feature Request] Ability to add css classes or a custom id

    I would like to be able to target the charts via CSS so I just need a way to assign unique selectors. This could be a custom ID or a custom class that I can then use in Nova's global css file to target selectors. Is there any way to do that, or could this be added please?

    Many thanks!

    enhancement 
    opened by vesper8 0
  • โฌ†๏ธ Bump loader-utils from 1.4.0 to 1.4.2

    โฌ†๏ธ Bump loader-utils from 1.4.0 to 1.4.2

    Bumps loader-utils from 1.4.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Moment.js time series adapter

    Moment.js time series adapter

    Add moment.js adapter, to allow for time series charts. Otherwise, it will throw an error:

    Error: This method is not implemented: Check that a complete date adapter is provided.

    opened by SteveEdson 0
  • Support for soft deleted models

    Support for soft deleted models

    As far as I can see, it is not possible (when using Laravel Models) to filter on soft deletes.

    For example, one month can have 10 new users created, but also have 3 users deleted. Then it would be useful to be able to somehow get a total of 10-3=7. Currently total would show up as 10, which can be both right or wrong, depending on your goal.

    options([
      'withTrashed' => true, // Adds soft deleted rows to the result
      'onlyTrashed' => true, // Only soft deleted rows
      'calculateTotalAsNet' => true, // Subtracts soft deleted rows from total
    ])
    

    Is this currently possible? Otherwise, it would make sense to add it to add some new options as displayed above. I can make a PR on it if anyone else needs it too.

    enhancement 
    opened by miloandco 0
Releases(v0.4.0)
Owner
Kuncoro Wicaksono
I'm up for charges, challenges and opportunities that could help me help society become a better place to live.
Kuncoro Wicaksono
Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.

PlainAdmin - Free Bootstrap 5 Dashboard Template PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all e

PlainAdmin 238 Dec 31, 2022
Simple package to facilitate and automate the use of charts in Laravel 5.x using Chartjs v2 library

laravel-chartjs - Chart.js v2 wrapper for Laravel 5.x Simple package to facilitate and automate the use of charts in Laravel 5.x using the Chart.js v2

Felix Costa 473 Dec 15, 2022
Chart.js plugin to defer initial chart updates

Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a

Chart.js 97 Nov 9, 2022
Bar Funnel Chart extension for Chart.js

Chart.BarFunnel.js Provides a Bar Funnel Chart for use with Chart.js Documentation To create a Bar Funnel Chart, include Chart.BarFunnel.js after Char

Chart.js 58 Nov 24, 2022
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 24 Dec 12, 2022
A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.

freeboard freeยทboard (noun) *\หˆfrฤ“-หŒbศฏrd* the distance between the waterline and the main deck or weather deck of a ship or between the level of the w

freeboard 6.3k Dec 28, 2022
Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.

Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users levera

Redash 22.4k Dec 30, 2022
TChart.js - simple and configurable Bar and Line Chart library in Javascript

TChart.js Simple and configurable Bar and Line Chart library in Javascript Description TChart.js is a canvas-based simple Javascript Bar and Line Char

null 4 Mar 3, 2021
Automatic chart generator from user input using CharGPT.

Chart GPT A platorm for generate chart with ChatGPT ??๏ธ ChatGPT Generator is under development. Features Light/dark mode toggle Live previews Fullscre

Ehsan Ghaffar 6 May 5, 2023
Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

recharts 19.4k Jan 2, 2023
:bar_chart: A D3-based reusable chart library

c3 c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications. Follow the link for more information: http

C3.js 9.2k Jan 2, 2023
GPL version of Javascript Gantt Chart

dhtmlxGantt Getting started | Features | Follow us | License | Useful links dhtmlxGantt is an open source JavaScript Gantt chart that helps you illust

null 952 Dec 29, 2022
๐Ÿž๐Ÿ“Š Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 2, 2023
:bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js

billboard.js is a re-usable, easy interface JavaScript chart library, based on D3 v4+. The name "billboard" comes from the famous billboard chart whic

NAVER 5.4k Jan 1, 2023
:bar_chart: A library of modular chart components built on D3

Plottable Plottable is a library of chart components for creating flexible, custom charts for websites. It is built on top of D3.js and provides highe

Palantir Technologies 2.9k Dec 31, 2022
Chart image and QR code web API

QuickChart QuickChart is a service that generates images of charts from a URL. Because these charts are simple images, they are very easy to embed in

Ian Webster 1.3k Dec 25, 2022
๐Ÿ“ˆ A small, fast chart for time series, lines, areas, ohlc & bars

?? ฮผPlot A small (~35 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed) Introduction ฮผPlot is a fast, memory-efficient Can

Leon Sorokin 7.5k Jan 7, 2023
๐Ÿž๐Ÿ“Š Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 6, 2023
The power of Chart.js in Jupyter !

The power of Chart.js in Jupyter Notebooks Installation You can install ipychart from your terminal using pip or conda: # using pip $ pip install ipyc

Nicolas H 68 Dec 8, 2022