Charts

Visual charts to help display data content

Overview

We use charts to visually display data. There are a range of chart types and colour palettes to choose from.

Example

Bar chart

Pie chart

Donut chart

Stacked bar chart

WCMS use

In Sitecore, you need 3 items to create a chart:

• CSV file
• Chart data item (to hold the CSV file) – sits in the Media Library
• Chart item (for chart settings) – sits in Common content

CSV files

The layout of a CSV file depends on the type of chart you want to create.

Don't put commas inside numbers in the CSV file. Your chart won't be rendered on screen.

Bar charts

CSV files for bar charts should have 2 columns as shown below. The first column contains the labels that appear on the horizontal axis of the chart. The second column holds the values. The first row holds a label that will appear in the key which is displayed underneath the chart. This label sits in the second column.

Pie charts and donut charts

Pie charts and donut charts both use the same CSV layout. The CSV file should have two columns – labels in the first column and values in the second. The labels are displayed in the key which is displayed to the right of the chart.

Stacked bar charts

CSV files for stacked bar charts have at least 3 columns. The first column contains the labels that appear on the horizontal axis of the chart. The second and following columns contain the values of the individual elements that make up each bar on the chart. The first row contains the labels for the different types of element that make up the bars in the chart.

Don’t put apostrophes in label names. Your chart won't display properly.

Creating a chart

1. Prepare the CSV file that contains your chart data. If using MS Excel, save the file as a Microsoft CSV file (comma delimited) file. Other formats won't work in Sitecore. The exact layout of your CSV file depends on the type of chart you want to create (see below).
2. In the Media Library, navigate to the Chart Data folder.
3. Duplicate an existing chart data item. Rename it and place it in an appropriate sub folder.
4. In the Media section of the new chart data item, browse to your CSV file and save
5. Create a chart item to point to your data item. Go to Common-content > Charts. Duplicate an existing chart item
6. Select the type of chart you want to create from the list provided
7. Add in a caption – this will appear as a sub heading above the chart
8. Prefix and suffix values can be added if required, eg a prefix of ‘£’ can be used for money related data, or a suffix of ‘miles’ for distances
9. In the Data field, browse to the chart data item you just created
10. Select a colour palette from the list provided which can be selected
11. Set a width and height for your chart and save

Adding a chart to a web page

1. In Experience Editor, select the required rendering slot and click + Add here
2. Browse to the chart data rendering by going to Renderings > Building Blocks > Data Visualisation > Chart. Click Select
3. You will be taken to a list of all chart items in Sitecore. Select your chart item and click Ok. Save

MVC.net use

 

Code

HTML of above bar chart

<dd class="selectables">
                
                        <figure class="row">
            <figcaption class="twelve columns add-bottom">Young casualties</figcaption>
            <div class="">
                <canvas class="chart"
                        id="chart_9c36cf3a-26d2-43b4-9997-cae8efa09b4b"
                        width="400"
                        height="400"
                        data-value-chart-type="bar"
                        data-value-pre=""
                        data-value-post=""
                        data-chart-values="'labels':['Basingstoke','East Hants','Eastleigh','Fareham','Gosport','Hart','Havant','New Forest','Rushmoor','Test Valley','Winchester'],'datasets':[{'data':[40,47,47,35,20,34,35,56,32,40,45],'fillColor':'#BDCA77','highlightFill':'#c59dc3','label':'Casualties'}]"></canvas>
            </div>
        </figure>

Version and status

• 1
• current version

• Concept
• Alpha
• Beta
• Release