Frappe Hello World

frappe-hello-world.markdown

Frappe Hello World

A Pen by Jang Rush on CodePen.

License.

index.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/frappe-charts.min.iife.js"></script>
<div id="chart"></div>

script.js

const data = {
      labels: ["2 Feb", "3 Feb", "4 Feb", "5 Feb*", "6 Feb", "7 Feb", "8 Feb", "9 Feb*", "10 Feb*", "11 Feb", "12 Feb", "13 Feb", "14 Feb*", "15 Feb", "16 Feb", "17 Feb*", "18 Feb*", "19 Feb"],
      datasets: [
        {
          name: "quarantine", chartType: 'line',
          values: [34, 35, 33, 33, 33, 30, 29, 29, 29, 26, 10, 10, 10, 10, 10, 10, 10, 10]
        }
      ],
      yRegions: [
        { label: "Households",
          start: 0, end: 40,
          options: { labelPos: 'right' }
        }
      ]
}

const chart = new frappe.Chart( "#chart", {
    data: data,
    title: "Quarantine Chart （* means interpolation)",
    type: 'line',
    height: 300,
    colors: ['purple', '#ffa3ef']
});