Reading JSON file & visualising data

[metawops]

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):

[blacksmithgu]

Nice! I didn't know Obsidian Chart exposed so much functionality. Looks great!