Summary_code
title: DVJS40_sum_number_or_list_and_bar_chart => 1.Require obsidian-charts v3.6.2 2.To sum up one field such as exercise(type: a number or a list) 3.non-groupBy data 4.To display it as a bar chart
collapse: open
icon:
color:
```dataviewjs
// M11. define pages: gather all relevant pages
// #####################################################################
let pages = dv
.pages('"100_Project/02_dataview/Q01_Sum/20220725_dv_Sum_02/Q01_test_data"')
.where((page) => dv.func.contains(page.file.name, "dic_"))
.where((page) => page.file.name !== dv.current().file.name)
.where((page) => page.exercise !== null)
.sort((page) => page.file.name, "asc");
// M21. define s_label_of_chart for the chart: excel chart title
// #######################################################
let s_label_of_chart = "M41.Exercise Report in 2022";
// M23. define a_labels_of_chart for the chart: excel Category X-axis
// use .array() to transform a dataview array into a JS array
// dv_array.array() = dv_array.values = dv_array["values"]
// #######################################################
// ["N", "File", "file.name", "sum_exercise", "exercise"],
let a_labels_of_chart = pages.file.day
.map((e) => e.toFormat("yyyy-MM-dd"))
.array();
// #######################################################
// #######################################################
// M21.DEB10 Debug Output: a_labels_of_chart
// #######################################################
// #######################################################
// M21.DEB12 Debug Output: a_labels_of_chart: before using `.array()`
// #######################################################
// {
// "values": [
// "2022-02-02",
// "2022-02-07",
// "2022-03-02",
// "2022-03-07"
// ],
// "settings": {
// "renderNullAs": "\-",
// "taskCompletionTracking": false,
// "taskCompletionText": "completion",
// "warnOnEmptyResult": true,
// "refreshEnabled": true,
// "refreshInterval": 250,
// "defaultDateFormat": "MMMM dd, yyyy",
// "defaultDateTimeFormat": "HH:mm:ss - MMMM dd, yyyy",
// "maxRecursiveRenderDepth": 6,
// "tableIdColumnName": "File",
// "tableGroupColumnName": "Group",
// "allowHtml": true,
// "inlineQueryPrefix": "=",
// "inlineJsQueryPrefix": "$=",
// "inlineQueriesInCodeblocks": true,
// "enableDataviewJs": true,
// "enableInlineDataviewJs": true,
// "prettyRenderInlineFields": true,
// "taskLinkLocation": "end",
// "taskLinkText": "🔗",
// "schemaVersion": 1
// },
// "length": 4
// }
// M21.DEB14 Debug Output: a_labels_of_chart: after using `.array()`
// #######################################################
// The following is the content of the a_labels_of_chart.
// [
// "2022-02-02",
// "2022-02-07",
// "2022-03-02",
// "2022-03-07"
// ]
// M25.define a_data_of_chart for the chart: excel data series
// use .array() to transform a dataview array into a JS array
// dv_array.array() = dv_array.values = dv_array["values"]
// #######################################################
let a_data_of_chart = pages.map((page) => dv.func.sum(page.exercise)).array();
// #######################################################
// #######################################################
// M25.DEB10 Debug Output: a_data_of_chart
// #######################################################
// #######################################################
// M25.DEB13 Debug Output: a_data_of_chart: before using `.array()`
// #######################################################
// {
// "values": [
// 60,
// 120,
// 95,
// 78
// ],
// "settings": {
// "renderNullAs": "\-",
// "taskCompletionTracking": false,
// "taskCompletionText": "completion",
// "warnOnEmptyResult": true,
// "refreshEnabled": true,
// "refreshInterval": 250,
// "defaultDateFormat": "MMMM dd, yyyy",
// "defaultDateTimeFormat": "HH:mm:ss - MMMM dd, yyyy",
// "maxRecursiveRenderDepth": 6,
// "tableIdColumnName": "File",
// "tableGroupColumnName": "Group",
// "allowHtml": true,
// "inlineQueryPrefix": "=",
// "inlineJsQueryPrefix": "$=",
// "inlineQueriesInCodeblocks": true,
// "enableDataviewJs": true,
// "enableInlineDataviewJs": true,
// "prettyRenderInlineFields": true,
// "taskLinkLocation": "end",
// "taskLinkText": "🔗",
// "schemaVersion": 1
// },
// "length": 4
// }
// M25.DEB15 Debug Output: a_data_of_chart: after using `.array()`
// #######################################################
// [
// 60,
// 120,
// 95,
// 78
// ]
// M41.setup the data for the chart: No modification required
// Use PicPick:Color Picker to get rgb: [Color Picker](https://picpick.app/en/)
// #######################################################
const chartData = {
labels: a_labels_of_chart,
datasets: [
{
label: s_label_of_chart,
data: a_data_of_chart,
backgroundColor: [
"rgba(230, 142, 147, 0.786)", //01:orange
"rgba(123, 194, 200, 0.786)", //02:pink greenish
"rgba(202, 145, 212, 0.786)", //03:pink purple
"rgba(116, 171, 219, 0.786)", //04:pink blue
"rgba(229, 168, 116, 0.786)", //05:pink orange
"rgba(192, 0, 128, 0.382)", //91:red
"rgba(128, 192, 32, 0.382)", //92:green
"rgba(32, 0, 192, 0.382)", //93:blue
],
borderColor: [
"rgba(230, 142, 147, 1.0)", //01:orange
"rgba(123, 194, 200, 1.0)", //02:pink greenish
"rgba(202, 145, 212, 1.0)", //03:pink purple
"rgba(116, 171, 219, 1.0)", //04:pink blue
"rgba(229, 168, 116, 1.0)", //05:pink orange
"rgba(192, 0, 128, 1.0)", //91:red
"rgba(128, 192, 32, 1.0)", //92:green
"rgba(32, 0, 192, 1.0)", //93:blue
],
borderWidth: 2,
},
],
};
// M43. configure the chart: No modification required
// #######################################################
const config = {
type: "bar",
data: chartData,
};
// M45. render the chart: No modification required
// #######################################################
window.renderChart(config, this.container);
// M91.TABLE : pages
// #####################################################################
dv.header(2, "M91.Exercise Report in 2022");
dv.table(
["N", "File", "file.name", "sum_exercise", "exercise"],
pages.map((page, index) => [
index + 1,
page.file.link ,
page.file.name,
dv.func.sum(page.exercise),
page.exercise,
])
);
```
