In-Depth Toolkit

Chart Training

If you're new to working with data, or unsure about the best way to represent your data on a BBC story, here is a quick guide to best practice.

If you're familiar with producing data visualisations or working with graphs and charts, make sure you've been added to the IDT user list - to get on the list go to iSite and submit an access request.

The toolkit is not designed to work with huge datasets. If your data has many hundreds of lines, it will probably break.

Note: Currently Google AMP, Facebook Instant Articles and syndicated feeds strip out includes from CPS stories, so the current advice is that you export charts as PNG files and add them to the stories as images, instead of using includes. Using the IDT Image generator will give a high quality PNG, which won't be compressed when published in CPS. Please use this rather than your own screen capture tools

Step By Step Guide

Watch the video and/or follow the steps below.

  • Step 1: Log into iSite, and click on 'Create New->Datasets and Charts' (top-right): Create New Dataset
  • Step 2: Add a name for your chart/dataset: Add a name
  • Step 3: Click ‘Launch' within the ‘Upload your data’ section: Add or import data
  • Step 4: Click 'Import Data' and choose a .csv file, or add the labels and data yourself. Save & Close when ready.
  • Pie Chart Example: For pie charts, labels will be created from Column A: Enter pie chart data pie chart example
  • Line/bar Chart Example: For line and bar charts, labels will be created from Row 1. Column A will be your x-axis. Enter line/bar chart data Enter pie chart data Enter pie chart data
  • Step 5: Click ‘Launch' within the ‘Build your chart’ section: Launch Chart Builder
  • Step 6: Customise your chart as needed, click refresh to review the animation. Edit chart
  • Step 7: When ready, click 'Save & Close' (top-right) to return to the iSite form. Save chart
  • Step 8: Now, in iSite, click 'Save' and 'Preview' to view your chart in a responsive format. If you are happy, click 'Publish'. Preview and publish chart
  • Step 9: Click ‘Launch' within the ‘Generate an image’ section. Generate an image
  • Step 10: Select the size of image that you wish to download (if you are creating an image for the app – leave as default and go to step 12): Select image size
  • Step 11: Download your image: download your image

You can now use this image in your content on CPS, Vivo or social media. The name of image file will end "-nc.png". This is important "-nc" means no compression: it ensures that the image remains crisp! Please do not add anything after the -nc (eg -nc2.png or -nc2thisisthefinalversion.png). When adding the PNG image in CPS, make sure you click the Cancel button if the image editor pops up.


If you still want to add this content as an include on your story please add text to the top of the page that says something like: “If you can’t see any of the images/charts below, please go to [hyperlink to the url of the CPS story you are publishing]”.

This will enable people who get to the story through the Google AMP url to go to the story where includes will work.

  • Includes Step1: Copy the include path from iSite, and add it to your CPS story as an 'include'. Note: If you use the News or Sport include, it will automatically be converted to an image on the mobile app to ensure it can be viewed. download your image

    Now, add an 'Include File' to your page in CPS: download your image

    Then paste the include path from iSite into the 'Web' field, and a name in 'Title': download your image

  • Sanity check on small screens: Have a look at the chart on mobile as well as desktop, to make sure it looks OK.

Using data in a story

More and more data is available to journalists: Health data, schools data, spending data, sports data, data on pretty much anything. Often a simple graph is all you need in a story to really give the numbers some context. If a billion pounds was spent on a project this year, is that more or less than in previous years? What percentage is it of the department's total budget? How does that compare a similar in Denmark or France?

The IDT Charts tool allows journalists to enter or upload a simple dataset and generate line-graphs, bar-charts and pie-charts.


Some example charts are shown below, with some information on their ideal usage.

Vertical Bar Charts

These are good for showing trends over time, and for grouping mulitple data sets:

Vertical Bar Chart

Horizontal Bar Charts

Use these if you need many or long labels, or don't need to track data over time:

Horizontal Bar Chart

Line Charts

Use these for larger data sets, with many data points:

WARNING: This toolkit is not designed to work with huge datasets. If your data has many hundreds of lines, it will probably break.

Line Chart

Pie/Doughnut Charts

These help to visualise/compare proportions or percentages. Use fewer than 5 groups:

Pie/Doughnut Chart