Custom Chart Widget


The Custom Chart widget allows you to graph data from either a spreadsheet or JSON data.

Graphing CSV

If you're not sure whether to use CSV or JSON, we'd recommend trying CSV. There are a few technical steps, but it's really not that bad.

First, open a spreadsheet app like Excel or Numbers and type in the data you want to graph.

The first column is the title for the datapoint. In this example it's a date, but it doesn't have to be. You can put whatever you want here and we'll display that on the X-Axis. We graph things in the order they're listed in the spreadsheet, so for this example I've made sure that the dates are increasing down the spreadsheet.

The other columns are the different series that you want to graph. It's totally fine to have missing values in your data, so feel free to leave blank cells.

Next, you want to save this data as CSV. Depending on what spreadsheet program you're using, this is usually as simple as either clicking "File > Save As..." or "File > Export...", and then selecting CSV.

Now you need to get your CSV file to the internet so that Dash can see it. If you've got a web server, by all means, use that! For most people, though, Dropbox is a great solution. Just move your file to your dropbox folder, right click, and select "Share Dropbox Link".

That copies a link to the file that Dash can see, so then you just have to paste that link into the widget's Data URL box.

You're done!

Graphing JSON

If you want to graph JSON data, it should follow this API:
  "graph" : {
    "title": "Body measurements",
    "datasequences" : [
        "title" : "Chest Measurements",
        "datapoints" : [
          { "title" : "1-3-2012", "value" : 45.5 },
          { "title" : "1-10-2012", "value" : 45.5 },
          { "title" : "1-17-2012" },
          { "title" : "1-24-2012", "value" : 44.5 }
        "title" : "Narrowest waist point",
        "datapoints" : [
          { "title" : "1-3-2012", "value" : 38.6 },
          { "title" : "1-10-2012", "value" : 38.1 },
          { "title" : "1-17-2012", "value" : 38 },
          { "title" : "1-24-2012", "value" : 38 }
There are a couple of things to note with the JSON data format. First, the datapoints should be in the order that you want them graphed. Second, all series need to have all datapoints. If you don't want to graph a datapoint for a series, include the datapoint but don't include a value (as seen above).

Maximum Data Size

Regardless of whether you use JSON or CSV data, we cap the size of the data you're trying to graph at 100kb.

Update Frequency

We grab new data from your URL every 60 seconds. (We may decide to change this later.)


If you have any suggestions about how we can make the Custom Chart widget better, be sure to let us know!

Feedback and Knowledge Base