Skip to content

Chart examples

zhifeng edited this page May 10, 2022 · 4 revisions

Dataview Plugin Integration

Folder Count

#-----------------#
#- chart data    -#
#-----------------#
data: |
  dataviewjs:
  return dv.pages()
           .groupBy(p => p.file.folder)
		   .map(p => ({folder: p.key || "ROOT", count: p.rows.length}))
		   .array();

image

Year Count

#-----------------#
#- chart data    -#
#-----------------#
data: |
  dataviewjs:
  return dv.pages()
           .groupBy(p => p.file.cday.toFormat("yyyy/MM"))
           .map(p => ({cdate: p.key, count: p.rows.length}))
           .array();
image

Day and Night Count

#-----------------#
#- chart data    -#
#-----------------#
data: |
  dataviewjs:
  return dv.pages()
           .groupBy(p => p.file.ctime.hour >= 8 && p.file.ctime.hour <= 18 ? 'Day' : 'Night')
		   .map(p => ({cdate: p.key, count: p.rows.length}))
		   .array();

image

Hour Count

#-----------------#
#- chart data    -#
#-----------------#
data: |
  dataviewjs:
  return dv.pages()
           .groupBy(p => p.file.ctime.toFormat("HH"))
		   .map(p => ({cdate: p.key, count: p.rows.length}))
		   .array();

image

Date Count

#-----------------#
#- chart data    -#
#-----------------#
data: |
  dataviewjs:
  return dv.pages()
           .groupBy(p => p.file.cday.toFormat("yyyy/MM"))
		   .map(p => ({cdate: p.key, count: p.rows.length}))
		   .array();

image

Task Count

#-----------------#
#- chart type    -#
#-----------------#
type: Column

#-----------------#
#- chart data    -#
#-----------------#
data: |
  dataviewjs:
  return dv.pages()
           .flatMap(page => page.file.tasks)
           .groupBy(task => ({completion: task.completion?? task.created.toFormat("yyyy/MM/dd"), status: task.completed ? 'Done' : 'Undone'}))
           .map(group => ({cdate: group.key.completion, status: group.key.status, count: group.rows.length}))
           .array();

#-----------------#
#- chart options -#
#-----------------#
options:
  isStack: true
  xField: "cdate"
  yField: "count"
  seriesField: 'status'
  label:
    position: "middle"
  xAxis:
    label:
      autoHide: false
      autoRotate: true
image

Tag Cloud

#-----------------#
#- chart type    -#
#-----------------#
type: WordCloud

#-----------------#
#- chart data    -#
#-----------------#
data: |
  dataviewjs:
  return dv.pages()
           .flatMap(p => p.file.etags)
           .groupBy(p => p)
           .map(p => ({tag: p.key, count: p.rows.length}))
           .array();

#-----------------#
#- chart options -#
#-----------------#
options:
  wordField: "tag"
  weightField: "count"
  colorField: "count"
  wordStyle:
    rotation: 30
  enableSearchInteraction:
    operator: tag