javascriptpythoncsvdygraphs

csv file causing Dygraph to throw Cannot read properties of undefined (reading 'push') error

I'm using dygraph to show data from various sqlite3 databases and because I don't know better, I am using Python to create a csv file from the database, which dygraph then uses. Using the exact same python code for a different database, the graph displays fine, but with this database in question (that stores data from a solar panel charge controller) I get the above "undefined" error. Googling implies this is because a certain variable is not declared when the dygraph script runs. The same JS that I am using works with a different csv file, so I can only assume its the csv file or the database. I've tested the csv file in Excel & Google Docs and it loads and looks fine visually.

So, any ideas?

Here is the Chrome console error message when the chart tries to load:

Uncaught TypeError: Cannot read properties of undefined (reading 'push')
    at Q.visibility (dygraph.min.js:4:26567)
    at Q.getPropertiesForSeries (dygraph.min.js:4:889)
    at o.generateLegendHTML (dygraph.min.js:5:13732)
    at o.deselect (dygraph.min.js:5:13159)
    at Q.cascadeEvents_ (dygraph.min.js:3:25191)
    at Q.clearSelection (dygraph.min.js:4:10470)
    at Q.mouseOut_ (dygraph.min.js:4:10406)
    at mouseOutHandler_ (dygraph.min.js:3:30272)

Here is the HTML / JS used to display the Dygraph (nrg_chart is a place holder to show a second chart once I get the first one working):

<html><head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" />
</head><body>
<div class="container" style="display: flex; height: 350px;">
    <div id="solar_chart" style="width: 50%; height:350px;">
    </div>
    <div id="nrg_chart" style="flex-grow: 1; height:350px;">
    </div>
</div>
<script type="text/javascript">
  solchart = new Dygraph(
    document.getElementById('solar_chart'),
    "solarpwr.csv", {
      title: ['Solar Generation'],
      visibility: [true],
      axes: {
        x: {
        },
        y: {
          drawGrid: false
        }
      }
    });
</script>
</body></html>

And then for reference this is my terrible python code I am using to create the csv file, but this works with another database, so I don't think this is the issue:

import csv
import sqlite3
import pandas as pd

conn = sqlite3.connect('/home/pi/restapi/database.db',detect_types=sqlite3.PARSE_DECLTYPES | sqlite3.PARSE_COLNAMES)
cursor = conn.cursor()
cursor.execute("select battery_percentage, load_current, load_power, pv_current, pv_power, date from solarnrg;")
with open('/var/www/html/solarpwr.csv', 'w',newline='') as csv_file:
    csv_writer = csv.writer(csv_file)
    csv_writer.writerow([i[0] for i in cursor.description])
    csv_writer.writerows(cursor)
conn.close()

csv_data = pd.read_csv('/var/www/html/solarpwr.csv', usecols=[0,1,2,3,4,5])
col = csv_data.pop("date")
csv_data.insert(0, col.name, col)
csv_data.to_csv('/var/www/html/solarpwr.csv', index = False)

And if you want to take a look at the database and csv files, here they are: Gofile links

Solution

  • The visibility option is an array of booleans, one boolean for each data series. Your CSV file has five series (six columns) but the visibility array only has one, which is why you're getting the error.

    solchart = new Dygraph(
  document.getElementById('solar_chart'),
  "solarpwr.csv", {
    title: 'Solar Generation',
    visibility: [true, false, false, false, false],
    axes: {
      x: {
      },
      y: {
        drawGrid: false
      }
    }
  });

    (The title option is supposed to be a string, not an array, but this seems to work OK.)