Skip to content

Instantly share code, notes, and snippets.

@dodikk

dodikk/PaymentsTrackingChart.html.md

Created April 13, 2023 12:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dodikk/cb6cca2b2d2f7437c41c157e5b00f7ef to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dodikk/cb6cca2b2d2f7437c41c157e5b00f7ef to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dodikk created this gist Apr 13, 2023.
    19 changes: 19 additions & 0 deletions PaymentsTrackingChart.html.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@

    ```html
    <html style="width:97%;height:100%;">
    <head><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script></head>
    <body style="width:100%;height:100%;">
    <div id="chart-container" style="width:100%;height:100%;">
    <canvas id="chart" />
    </div>
    <script>var config = {"type":"bar","data":{"datasets":[{"label":"Cancelled","data":[49.0,45.0,25.0,16.0,36.0,32.0,22.0],"backgroundColor":"#F859AC","stack":"Stack 0"},{"label":"Paid","data":[17.0,22.0,33.0,23.0,4.0,35.0,20.0],"backgroundColor":"#11BFBF","stack":"Stack 0"},{"label":"Timed Out","data":[42.0,20.0,7.0,33.0,22.0,14.0,18.0],"backgroundColor":"#1C60DD","stack":"Stack 0"}],"labels":["1","2","3","4","5","6","7"]},"options":{"responsive":true,"maintainAspectRatio":false,"legend":{"position":"top"},"animation":{"animateScale":true},"scales":{"x":{"stacked":true},"y":{"stacked":true}}}};
    window.onload = function() {
    var canvasContext = document.getElementById("chart").getContext("2d");
    new Chart(canvasContext, config);
    };</script>
    </body>
    </html>
    ```

    Based on https://blog.dangl.me/archive/building-hacky-but-free-graphs-and-charts-in-xamarinforms-with-chartjs/