phibr0 / obsidian-charts

Charts - Obsidian Plugin | Create editable, interactive and animated Charts in Obsidian via Chart.js
https://charts.phib.ro/
GNU Affero General Public License v3.0
568 stars 26 forks source link

How would I change the scale of a chart? #63

Closed ReaderGuy42 closed 1 year ago

ReaderGuy42 commented 1 year ago

I'm using a Dataviewjs script to create a graph for the amount of time spent watching movies. My frontmatter variable is in minutes, but I'd like to have the graph show up as hours. How do I do this?

Charts aren't part of Dataview? Then I don't understand where the chart is coming from?

This is my Dataviewjs code for the chart:

``` dataviewjs
    var labels = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var colors = [['#ff6384'],['#36a2eb'],['#ffce56'],['#4bc0c0'],['#9966ff'],['#ff9f40']]
    var datasets = [];

    for(
        let results of dv.pages('"Movies"')
            .where(p => p.DateWatched && p.Duration)
            .sort(p => p.DateWatched, 'asc')
            .groupBy(p => (dv.date(p.DateWatched).toFormat("MMMM yyyy")))
            .sort(ym => ym.rows.DateWatched.first(), 'asc')
            .groupBy(ym => (dv.date(ym.rows.DateWatched.first()).year))
            .sort(y => y.key, 'asc') 
        ) {
            let lbl = "Hours watched in " + results.key;
            let backCol = colors[datasets.length%colors.length];
            let bordCol = colors[datasets.length%colors.length];
            let bWidth = 1;

            let innerArray = [0,0,0,0,0,0,0,0,0,0,0,0];
            results.rows.forEach(m => {
                let numMovies = dv.array(m.rows).Duration.array().reduce((s, r) => s + r, 0);

                innerArray[m.rows.DateWatched.first().month-1] = numMovies;
            })

            let da = {label: lbl, data: innerArray, backgroundColor: backCol,
                      borderColor: bordCol, borderWidth: bWidth};

            datasets.push(da)
        }

    const chartData = {
        type: 'line',
        data: {labels: labels, datasets: datasets},
        options: {scales: {yAxis: {suggestedMin: 0, ticks: {stepSize: 1}}}
    }}
    window.renderChart(chartData, this.container);

And this is the Frontmatter, in this case the movie "Interstellar" for example:

Director: Christopher Nolan
Screenplay: Christopher Nolan; Jonathan Nolan
Title: Interstellar
Actors: Matthew McConaughey, Anne Hathaway, Jessica Chastain, Bill Irwin, Ellen Burstyn, and Michael Caine.
Year: 2014
Medium: Movie
Duration: 169
Rating: 10
DateWatched: 2022-02-20 
Cover: https://upload.wikimedia.org/wikipedia/en/b/bc/Interstellar_film_poster.jpg
Tags: ScienceFiction
Country: US

Note that Duration here is in minutes. In the chart I'd like it to be in hours though.

ReaderGuy42 commented 1 year ago

Solved it over here: https://github.com/blacksmithgu/obsidian-dataview/discussions/1515#discussioncomment-3993068