visuals + news appsBaking Chart Data Into Your Page
Do you use our dailygraphics rig to create and deploy small charts? We’ve introduced a new feature: The latest version of copytext.py (0.1.8) allows users to inject serialized JSON from a Google Spreadsheet onto their page with one line of template code.
Benefits:
- Store your text and your data in the same Google Spreadsheet, making editing a little simpler.
- The data is baked right into your page, so there’s one fewer file to load.
(Thanks to Christopher Groskopf and Danny DeBelius for making this work.)
If you’re already using dailygraphics, pull the latest code from GitHub (we’ve updated libraries and made other bugfixes in recent weeks), and update requirements:
pip install -Ur requirements.txt
You can see this at work in a graphic published today on NPR.org.
Here’s How It Works
The following examples assume that you are using our dailygraphics rig. Both examples point to this Google Spreadsheet.
The spreadsheet has three tabs:
labels: Text information (headline, credits, etc.)data_bar: The data for the bar chart example belowdata_line: The data for the line chart example below
Note: Copytext works best when all values (even numeric ones) are cast as text/strings in the Google Spreadsheet, rather than numbers or dates. You can convert them to their proper types later in JavaScript.
Bar Chart (Source code on GitHub)
In child_template.html, add a <script></script> tag above all the other JavaScript embeds at the bottom of the page, and then declare the variable for your data.
<script type="text/javascript">
var GRAPHIC_DATA = {{ COPY.data_bar.json() }};
</script>
GRAPHIC_DATAis the variable name you’ll use to reference this dataCOPYrefers to the overall spreadsheetdata_baris the name of the specific sheet within the spreadsheet (in this case, the spreadsheet has three sheets)
The result looks like this, with the keys corresponding to the column headers in the table:
<script type="text/javascript">
var GRAPHIC_DATA = [{"label": "Alabama", "amt": "2"}, {"label": "Alaska", "amt": "4"}, {"label": "Arizona", "amt": "6"}, {"label": "Arkansas", "amt": "8"}, {"label": "California", "amt": "10"}, {"label": "Colorado", "amt": "12"}, {"label": "Connecticut", "amt": "14"}];
</script>
In js/graphic.js, don’t bother with declaring or importing GRAPHIC_DATA — just go straight to whatever additional processing you need to do (like, in this case, explicitly casting the numeric values as numbers).
GRAPHIC_DATA.forEach(function(d) {
d['amt'] = +d['amt'];
});
Line Chart (Source code on GitHub)
In child_template.html, add a <script></script> tag above all the other JavaScript embeds at the bottom of the page, and then declare the variable for your data.
<script type="text/javascript">
var GRAPHIC_DATA = {{ COPY.data_line.json() }};
</script>
GRAPHIC_DATAis the variable name you’ll use to reference this dataCOPYrefers to the overall spreadsheetdata_lineis the name of the specific sheet within the spreadsheet (in this case, the spreadsheet has three sheets)
The result looks like this, with the keys corresponding to the column headers in the table:
<script type="text/javascript">
var GRAPHIC_DATA = [{"date": "1/1/1989", "One": "1.84", "Two": "3.86", "Three": "5.80", "Four": "2.76"}, {"date": "4/1/1989", "One": "1.85", "Two": "3.89", "Three": "5.83", "Four": "2.78"}, {"date": "7/1/1989", "One": "1.87", "Two": "3.93", "Three": "5.89", "Four": "2.81"}, {"date": "10/1/1989", "One": "1.88", "Two": "3.95", "Three": "5.92", "Four": "2.82"} ... [and so on] ...;
</script>
In js/graphic.js, don’t bother with declaring or importing GRAPHIC_DATA — just go straight to whatever additional processing you need to do (like, in this case, explicitly casting the dates as dates).
GRAPHIC_DATA.forEach(function(d) {
d['date'] = d3.time.format('%m/%d/%Y').parse(d['date']);
});
