I wanted to visualise some data from a JSON file (actually the number of downloads of my own Obsidian plugin Table to CSV Exporter) and was struggling on how to read a local file in JavaScript inside a dataviewjs
block.
Turns out that Dataview has a handy function dv.io.load()
that can load any text file. So I loaded the contents of the JSON file (which is located directly in my vault’s main folder) into a string and parsed that into a JSON object, easy-peasy.
Creating a table out of this was then easy.
And by integrating the “Obsidian Graph” plugin I was able to visualise my plugin downloads in a simple line graph, too.
Here’s the dataviewjs
code block:
const jsonString = await dv.io.load("plugin-stats.json");
const jsonObject = JSON.parse(jsonString);
dv.table(["Date", "Downloads"],
jsonObject.stats.map(data => [data.date, data.statsData.downloads]));
const chartData = {
type: 'line',
data: {
labels: jsonObject.stats.map(d => d.date),
datasets: [{
label: 'Downloads',
data: jsonObject.stats.map(d => d.statsData.downloads),
borderColor: [
'rgb(123, 108, 217)'
],
borderWidth: 3
}]
},
options: {
scales: {
y: { beginAtZero: true }
},
elements: {
point: {
pointStyle: 'rect',
radius: 7,
hoverRadius: 12,
hoverBorderWidth: 5,
backgroundColor: 'rgba(223, 158, 117, 1)'
},
line: {
stepped: false,
tension: 0.2,
capBezierPoints: true,
cubicInterpolationMode: 'default'
}
},
plugins: {
title: {
display: true,
text: 'Plugin Downloads'
}
}
}
}
window.renderChart(chartData, this.container)
And here’s the (shortened) JSON file for reference:
{
"stats": [
{
"date": "2022-06-24",
"statsData": {
"0.1.4": 24,
"0.1.3": 1,
"0.1.2": 3,
"downloads": 28
}
},
{
"date": "2022-06-25",
"statsData": {
"0.1.4": 38,
"0.1.3": 1,
"0.1.2": 3,
"downloads": 42
}
},
{
"date": "2022-06-26",
"statsData": {
"0.1.4": 55,
"0.1.3": 1,
"0.1.2": 3,
"downloads": 59
}
}
]
}
I wrote a little Python script that gets the latest download numbers once a day (cron job) via a HTTP request and appends them to this JSON file which is then copied into my vault.
This is the result from the preview (reading) pane in Obsidian (chart & table swapped):