Chart

Description

Display a different type of time series charts based on requirements.

Attributes

tile=chartSparse | chart
title: Title of chart component
connect: [Array of objects]Provide a Data connection objects
display: Display charts according to the Screen size
- span: mobile view
- dspan: desktop view
- tspan: tablet view
chart: Any configuration related to chart
- timeSeries: expression; middle should be YYYY-MM-DD (if time series)
- single: true (if single value)
- groupBy: metric or $user
- title
- bounds: [Objects]
  - lowerDec: [number] Provide any number to decrement a value from min value. default is data min value
  - upperInc: [number] Provide any number to increment a value from min value. default is data max value
- c3:[object] Provide a chart options based on requirements for that follow this one https://c3js.org/reference.html
  - data.type: bar | line | spline
  - axis.x.tick.format: Any format specifier
  - axis.y2.show: Want to show the y2 axis or not
  - etc..

Example1

{
  "tile": "chart",
  "title": "Wellness Test",
  "display": {
    "span": "12"
  },
  "chart": {
    "timeSeries": "YYYY-MM-DD; YYYY-MM-DD; P1D",
    "title": "time by day",
    "c3": {
      "data.type": "bar",
      "size.height": 400,
      "axis.y.show": true,
      "axis.x.tick.format": "%d",
      "legend.show": true,
      "color.pattern": [
        "#1e90ff"
      ]
    }
  },
  "connect": [
    {
      "title": "Wellness Connect",
      "source": "wellness",
      "pick": "values.sleep",
      "apply": "sum(ls)",
      "format": "0,0"
    }
  ]
}

Example2

{
  "tile": "chartSparse",
  "title": "Wellness Test",
  "display": {
    "span": "12"
  },
  "chart": {
    "timeSeries": "GGGG-ww; YYYY-MM-DD; P1W",
    "title": "time by day",
    "c3": {
      "data.type": "line",
      "size.height": 250,
      "axis.y.show": true,
      "xxxdata.labels": true,
      "axis.x.tick.format": "%b-%d",
      "alias.axis.y.tick.format": "0",
      "grid.y.lines[0].value": "100",
      "grid.y.lines[1].value": "160",
      "grid.y.lines[2].value": "40",
      "grid.x.show": "true",
      "legend.show": true,
      "xxxcolor.pattern": [
        "#1e90ff"
      ]
    }
  },
  "connect": [
    {
      "title": "Wellness Connect",
      "source": "wellness",
      "pick": "values.sleep",
      "apply": "mean(ls)",
      "format": "0,0"
    }
  ]
}

Support more than one type of charts in single graph

Example

 {
  "tile": "chart",
  "title": "Total",
  "display": {
    "span": "12"
  },
  "chart": {
    "timeSeries": "GGGG-ww; YYYY-MM-DD; P1W",
    "title": "time by week",
    "c3": {
      "size.height": 200,
      "data.types.d0": "bar",
      "data.types.d1": "line",
      "axis.x.tick.format": "%b-%d",
      "data.labels.format": ".1n",
      "data.axes.d0": "y",
      "data.axes.d1": "y2",
      "axis.y2.show": true
    }
  },
  "connect": [
    {
      "title": "Wellness Connect 1",
      "source": "wellness",
      "pick": "values.sleep",
      "apply": "mean(ls)",
      "format": "0,0"
    },
    {
      "title": "Wellness Connect 2",
      "source": "wellness",
      "pick": "values.sleep",
      "apply": "sum(ls)",
      "format": "0,0"
    }
  ]
}

Example2

{
    "tile": "chart",
    "display": {
      "span": "12",
      "dSpan": 6
    },
    "chart": {
      "timeSeries": "YYYY-MM-DD; YYYY-MM-DD; P1D; day",
      "title": "evaluation data",
      "c3": {
        "data.types": {
          "d0": "line",
          "d1": "line",
          "d2": "line",
          "d3": "line",
          "d4": "line",
          "d5": "bar",
          "d6": "bar"
        },
        "data.axes": {
          "d0": "y",
          "d1": "y",
          "d2": "y",
          "d3": "y",
          "d4": "y",
          "d5": "y2",
          "d6": "y2"
        },
        "size.height": 250,
        "axis.y.show": true,
        "xxxdata.labels": true,
        "axis.x.tick.format": "%b-%d",
        "alias.axis.y.tick.format": "0,0",
         "alias.axis.y2.tick.format": "0,0",
        "grid.y.lines[0].value": "100",
        "grid.y.lines[1].value": "200",
        "grid.y.lines[2].value": "300",
        "axis.y2.show": true,
        "grid.x.show": "true",
        "legend.show": true,
        "xxxcolor.pattern": [
          "#1e90ff"
        ]
      }
    },
    "connect": [{}]
}

Another variation Added a default type and allow take rest of data that specified type.Here rest of charts take bar variant and d0 and d1 is type of line chart.

Example3

{
  "c3": {
    "data.type": "bar",
    "data.types": {
      "d0": "line",
      "d1": "line"
    }
  }
}

Date format

Uses d3 date formatting.

Returns a new formatter for the given string specifier. The specifier string may contain the following directives:

%a - abbreviated weekday name.*
%A - full weekday name.*
%b - abbreviated month name.*
%B - full month name.*
%c - the locale’s date and time, such as %x, %X.*
%d - zero-padded day of the month as a decimal number [01,31].
%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
%f - microseconds as a decimal number [000000, 999999].
%g - ISO 8601 week-based year without century as a decimal number [00,99].
%G - ISO 8601 week-based year with century as a decimal number.
%H - hour (24-hour clock) as a decimal number [00,23].
%I - hour (12-hour clock) as a decimal number [01,12].
%j - day of the year as a decimal number [001,366].
%m - month as a decimal number [01,12].
%M - minute as a decimal number [00,59].
%L - milliseconds as a decimal number [000, 999].
%p - either AM or PM.*
%q - quarter of the year as a decimal number [1,4].
%Q - milliseconds since UNIX epoch.
%s - seconds since UNIX epoch.
%S - second as a decimal number [00,61].
%u - Monday-based (ISO 8601) weekday as a decimal number [1,7].
%U - Sunday-based week of the year as a decimal number [00,53].
%V - ISO 8601 week of the year as a decimal number [01, 53].
%w - Sunday-based weekday as a decimal number [0,6].
%W - Monday-based week of the year as a decimal number [00,53].
%x - the locale’s date, such as * %-m/ %-d/ %Y.*
%X - the locale’s time, such as * %-I: %M: %S * %p.*
%y - year without century as a decimal number [00,99].
%Y - year with century as a decimal number, such as 1999.
%Z - time zone offset, such as -0700, -07:00, -07, or Z.
% % - a literal percent sign ( %).