Repo: https://github.com/everestate/chartjs-plugin-waterfall
Remember to replace the script import with a path from your own directory
Last active
September 30, 2020 16:16
-
-
Save EdwinChua/0a5d66dc561fe7d3866021b18a320585 to your computer and use it in GitHub Desktop.
ChartJs minimum chart reproduction
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> | |
| <script src="../node_modules/chartjs-plugin-waterfall/dist/chartjs-plugin-waterfall.min.js"></script> <!--UPDATE THIS--> | |
| </head> | |
| <body style="width:100%; height:100%"> | |
| <div style="position: relative; width: 50%; height:30%"> | |
| <canvas id="myChart" width="400px" height="400px"></canvas> | |
| </div> | |
| <script> | |
| var ctx = document.getElementById("myChart").getContext('2d'); | |
| const dat = { | |
| datasets: [ | |
| { | |
| label: 'Closing Costs', | |
| data: [50], | |
| backgroundColor: '#e8cdd7', | |
| stack: 'stack 1', | |
| }, | |
| { | |
| label: 'Purchase Price', | |
| data: [700], | |
| backgroundColor: '#d29baf', | |
| stack: 'stack 1', | |
| }, | |
| { | |
| data: [200], | |
| waterfall: { | |
| dummyStack: true, | |
| }, | |
| stack: 'stack 2', | |
| }, | |
| { | |
| label: 'Opening Loan Balance', | |
| data: [550], | |
| backgroundColor: '#bb6987', | |
| stack: 'stack 2', | |
| }, | |
| { | |
| label: 'Initial Cash Investment', | |
| data: [200], | |
| backgroundColor: '#a53860', | |
| stack: 'stack 3', | |
| }, | |
| ], | |
| }; | |
| var chart = new Chart(ctx, { | |
| type:'bar', | |
| plugins: [chartjsPluginWaterfall], | |
| data: dat | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Thank you, Martin Dawson, for sharing the waterfall plugin and thank you, EdwinChua, for providing the example.
Unfortunately, I'm not able to get in running (on Google Chrome).
I created a HTML-file in a local directory with the above content (including MartinDawsons corrections).
This gives me the error: "Uncaught ReferenceError: module is not defined at index.js:2369" for the lodash commands.
My header looks like this:
I would be extremely grateful for your help!
Erik
I just tried it - and I get an Error :
at n (drawStepLines.js:78)
at Object.afterDraw (index.js:64)
at Object.notify (Chart.bundle.min.js:10)
at t.draw (Chart.bundle.min.js:10)
at index.js:54```
It seems to display though!
The error relates to this
`export default (chart) => {
const context = chart.ctx;
const datasets = chart.data.datasets;
const options = chart.options.plugins.waterFallPlugin.stepLines;
const stackedDatasets = groupBy(datasets, 'stack'); <--- Error in this group
const newDatasets = [];
`
I tried this several ways, and it doesn't seem to work. I was never able to get this running in vanilla JavaScript.
Script files, in header:
<script src="https://cdn.jsdelivr.net/npm/lodash.groupby@4.6.0/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash.merge@4.6.1/index.min.js"></script>
<script src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-waterfall@1.0.3/lib/chartjs-plugin-waterfall.min.js"></script>
1.) As provided (lodash, chart.js, waterfall-plugin)
Errors:
-- chartjs-plugin-waterfall.js:5 - Uncaught ReferenceError: require is not defined
-- waterfall.html - Uncaught ReferenceError: chartjsPluginWaterfall is not defined
2.) As Stated by MartinDawson (lodash.groupby, lodash.merge, Chart.js, waterfall-plugin)
Errors:
-- lodash.grouby/index.js:2369 - Uncaught ReferenceError: module is not defined
-- lodash.merge/index.js:1963 - Uncaught ReferenceError: module is not defined
-- chartjs-plugin-waterfall.js:1 - Uncaught ReferenceError: require is not defined
-- waterfall.html:56 - Uncaught ReferenceError: chartjsPluginWaterfall is not defined
3.) Changed lodash.groupby and lodash.merge to type="module"
Errors: [same as #2]
4.) Added require.js, with lodash.groupby and lodash.merge
Errors:
-- require.js:5 - Uncaught Error: Module name "lodash.merge" has not been loaded yet for context: _. Use require([]) ... at chartjs-plugin-waterfall.js:1 (http://requirejs.org/docs/errors.html#notloaded)
-- -- lodash.grouby/index.js:2369 - Uncaught ReferenceError: module is not defined
-- lodash.merge/index.js:1963 - Uncaught ReferenceError: module is not defined
-- waterfall.html:54 - Uncaught ReferenceError: Chart is not defined
here solution:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-waterfall@1.0.3/dist/chartjs-plugin-waterfall.min.js"></script>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
CDN for lodash should be these instead: