Custom Chart Widget

Overview


The Custom Chart widget shows line or bar charts from either CSV (spreadsheet) or JSON data.




Getting Data into Dash


There are two different ways to get data into Dash. The easiest way is for us to fetch it from a URL that you specify. Right now we grab new data for chart widgets every 60 seconds, but we may decide to change this later.

If you have a Pro or Business account, you also have the option of pushing your data to us. This requires a little more work to set up, but it also means your updates will show up instantly.

The data you provide can be in either CSV or JSON format (details below).

Graphing CSV


If you're not sure whether to use CSV or JSON, we'd recommend trying CSV. There are a few technical steps to creating a CSV file, 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. The first value for each column is the title for that series. 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.



That's it, you've created a CSV file with your data!

If you want, you can open your CSV file in a text editor to see what's inside. Notice the titles in the first row, and that there are commas separating the numbers (rather than semicolons).
Date,Chest,Belly Button,Narrowest waist point
1/3/12,45.5,40.5,38.6
1/10/12,45.5,39.7,38.1
1/17/12,45.5,39.5,38.0
1/24/12,45.2,39.5,38.0
2/28/12,44.5,39.0,37.5
3/6/12,44.5,38.4,37.2
3/13/12,44.5,38.4,36.9
3/20/12,44.5,37.8,36.5
3/27/12,45.0,37.8,36.5
4/3/12,45.0,37.8,36.3
4/10/12,45.0,38.0,36.4

The next step is to get this CSV data into Dash. We recommend that beginners fetch data from a URL, but pushing your data to us works great too.

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). This way we know the order for all of the datapoints on the graph.

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.

Suggestions


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