Charts

Brandaris uses Chart.js for rendering Charts. Because the JavaScript for charts is a bit fat you must only load it on the pages that have charts. You can do this by adding the following snippets:

With time axis

Load moment.js as well.

<script src='/brandaris/assets/scripts/moment.min.js'></script>
<script src='/brandaris/assets/scripts/chart.min.js'></script>

Without time axis

<script src='/brandaris/assets/scripts/chart.min.js'></script>

Default usage

A lot of different settings can be applied to the different charts (line, bar, radar, polar area, doughnut and pie and bubble).

<div class="chart-container" data-source="/brandaris/docs/assets/charts/chart.default.json">
  <canvas id="chart-default"></canvas>
</div>

Where chart.default.json contains the following:

{
  "type": "bar",
  "data": {
    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
    "datasets": [
      {
        "label": "Example data 1",
        "data": [65, 59, 20, 81, 56, 55, 40],
        "borderWidth": 2,
        "color": "primary"
      }, {
        "label": "Example data 2",
        "data": [20, 81, 65, 59, 32, 23, 80],
        "borderWidth": 2,
        "color": "secondary"
      }
    ]
  },
  "options": {
    "scales": {
      "yAxes": [
        {
          "gridLines": {
            "display": true
          }
        }
      ],
      "xAxes": [
        {
          "gridLines": {
            "display": false
          }
        }
      ]
    }
  }
}

Pay attention to the color option, as it’s different from the default Chart.js settings. It will insert all needed colors based on the set framework color.

Examples

Bubble

<div class="chart-container" data-source="/brandaris/docs/assets/charts/chart.example.bubble.json">
  <canvas id="chart-example-bubble"></canvas>
</div>

{
  "type": "bubble",
  "data": {
    "datasets": [
      {
        "label":"Bubble example data",
        "data": [
          {
            "x": 4,
            "y": 8,
            "r": 32
          }, {
            "x": -3,
            "y": -1,
            "r": 15
          }
        ],
        "color": "primary"
      }
    ]
  },
  "options": {
    "scales": {
      "yAxes": [
        {
          "gridLines": {
            "display": true
          },
          "ticks": {
            "suggestedMin": -5,
            "suggestedMax": 15
          }
        }
      ],
      "xAxes": [
        {
          "gridLines": {
            "display": true
          },
          "ticks": {
            "suggestedMin": -10,
            "suggestedMax": 10
          }
        }
      ]
    }
  }
}

Doughnut

<div class="chart-container" data-source="/brandaris/docs/assets/charts/chart.example.doughnut.json">
  <canvas id="chart-example-doughnut"></canvas>
</div>

{
  "type": "doughnut",
  "data": {
    "labels":["One","Two","Three"],
    "datasets": [
      {
        "data": [300,50,100],
        "color": [
          "primary",
          "secondary",
          "tertiary"
        ]
      }
    ]
  },
  "options": {}
}

Line

<div class="chart-container" data-source="/brandaris/docs/assets/charts/chart.example.line.json">
  <canvas id="chart-example-line"></canvas>
</div>

{
  "type": "line",
  "data": {
    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
    "datasets": [
      {
        "label": "Example data 1",
        "data": [65, 59, 20, 81, 56, 55, 40],
        "borderWidth": 2,
        "color": "primary"
      }, {
        "label": "Example data 2",
        "data": [20, 81, 65, 59, 32, 23, 80],
        "borderWidth": 2,
        "color": "secondary"
      }
    ]
  },
  "options": {}
}

Pie

<div class="chart-container" data-source="/brandaris/docs/assets/charts/chart.example.pie.json">
  <canvas id="chart-example-pie"></canvas>
</div>

{
  "type": "pie",
  "data": {
    "labels":["One","Two","Three","Four"],
    "datasets": [
      {
        "data": [200,100,100,200],
        "color": [
          "primary",
          "secondary",
          "tertiary",
          "quaternary"
        ]
      }
    ]
  },
  "options": {}
}

Polar

<div class="chart-container" data-source="/brandaris/docs/assets/charts/chart.example.polar.json">
  <canvas id="chart-example-polar"></canvas>
</div>

{
  "type": "polarArea",
  "data": {
    "labels":["One","Two","Three","Four"],
    "datasets": [
      {
        "data": [50,100,300,200],
        "color": [
          "primary",
          "secondary",
          "tertiary",
          "quaternary"
        ]
      }
    ]
  },
  "options": {}
}

Radar

<div class="chart-container" data-source="/brandaris/docs/assets/charts/chart.example.radar.json">
  <canvas id="chart-example-radar"></canvas>
</div>

{
  "type": "radar",
  "data": {
    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
    "datasets": [
      {
        "label": "Example data 1",
        "data": [65, 59, 20, 81, 56, 55, 40],
        "borderWidth": 2,
        "color": "primary"
      }, {
        "label": "Example data 2",
        "data": [20, 81, 65, 59, 32, 23, 80],
        "borderWidth": 2,
        "color": "secondary"
      }
    ]
  },
  "options": {}
}

On this page

Components