Skip to content

ChartScatter

Description

Display a charts by not reduced the data for specific axis point.It means allow multiple data points for specific axis label for specific user = [one user multiple data points].

Attributes

  • tile=chartScatter
  • title: Title of chart component
  • connect: [Array of objects]Provide a Data connection objects
  • chart: Any configuration related to chart
    • timeSeries: expression; middle should be YYYY-MM-DD (if time series)
    • groupBy: metric or $user
    • title
    • type: category. It's used for grouping the data either two of one category || timeseries
    • c3:[object] Provide a chart options based on requirements for that follow this one https://c3js.org/reference.html
      • data.type: scatter | bar | line
      • axis.x.tick.format: Any format specifier
      • axis.y2.show: Want to show the y2 axis or not
      • axis.y2.show: Want to show the y2 axis or not
      • tooltip.format: [Object of title and value]
        • value: format like "decimalToTime", any many more etc..
        • title:
      • etc..

ScatterChart Example With Time Series

{
  "tile": "chartScatter",
  "title": "Attack Graph",
  "display": {
    "span": "12",
    "dSpan": 6
  },
  "chart": {
    "timeSeries": "YYYY-MM-DD; YYYY-MM-DD; P1D; day",
    "title": "Attack Data",
    "c3": {
      "data.type": "scatter",
      "size.height": 250,
      "xxxdata.labels": true,
      "axis.x.tick.format": "%b-%d",
      "point.show": true,
      "grid.x.show": "true",
      "grid.y.show": "true",
      "legend.show": "true",
      "axis.y.min": 1,
      "axis.y.max": 22,
      "xxxcolor.pattern": [
        "#1e90ff"
      ]
    }
  },
  "connect": [
    {
      "title": "発作",
      "source": "general-attack",
      "pick": "values.time",
      "format": "0,0",
      "condition": "values.time exists",
      "tableData": {
        "id": 0
      }
    }
  ]
}

ScatterChart Example With Group data

 {
      "tile": "chartScatter",
      "title": "Attack Graph",
      "display": {
        "span": "12",
        "dSpan": 6
      },
      "chart": {
        "timeSeries": "YYYY-MM-DD; YYYY-MM-DD; P1D; day",
        "title": "Attack Data",
        "groupBy": "$user",
        "c3": {
          "data.type": "scatter",
          "size.height": 250,
          "xxxdata.labels": true,
          "axis.x.tick.format": "%b-%d",
          "point.show": true,
          "grid.x.show": "true",
          "grid.y.show": "true",
          "legend.show": "true",
          "axis.y.min": 1,
          "axis.y.max": 22,
          "xxxcolor.pattern": [
            "#1e90ff"
          ]
        }
      },
      "connect": [
        {
          "title": "発作",
          "source": "general-attack-all",
          "pick": "values.time",
          "format": "0,0",
          "condition": "values.time exists",
          "tableData": {
            "id": 0
          }
        }
      ]
}