Skip to content

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
    • 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 ( %).