Charts

Design

Colour Palette

Requirments

To be user friendly, the ACE charts colour palette has the following requirements:

1. A colour set large enough to accomodate multiple data series
2. It must be easy to differentiate between the colours, including the following:
   • Easy to differentiate when printed in greyscale
   • Easier to differentiate for colour blindness
   • Distinct from the main ACE colour palette.
     It needs to stand out from the page structure and avoid confusion with the semantics of ACE colours, p.ace-particularly from the success and error semantics.

Colour palette theory

The colour palette chosen is based on the cubehelix colour system.
This system accomodates for the different perception of colours in human vision compared to common computed colour scales, p.ace-particularly in percieving the weight of colour saturation and brightness. It is designed to be monotonically increasing in terms of its perceived brightness. In this way, cubhelix contrasts the interpolation methods of RGB, HSL and HCL which do not accomodate specfically for greyscale printing or vision impairment.

Cubehelix has the following unique features:

• Each colour is distinct in greyscale printing. (see Cubehelix, or How I Learned to Love Black & White Printers)
• Colour blindness is less affected (including protanopia, deutanopia, and tritanopia). (see above link)
• A cubehelix scale produces a more balanced and brigher "perceptual rainbow" than other methods. (see A Less-Angry Rainbow)
• It was designed specfically for human readable charting. (see Cambridge paper)

Colours

The spefic palette chosen accomodates up to twelve data series. (see cubehelix3_16)

1. #00443C
2. #005083
3. #034BCA
4. #483CFC
5. #9C2BFF
6. #EB24F4
7. #FF2DC2
8. #FF4986
9. #FF7356
10. #FFA443
11. #EBD155
12. #D3F187

Code

                                                            <div id="line-chart" class="ace-chart">
                                                              <div class="ace-chart-container">
                                                                <svg></svg>
                                                              </div>
                                                            </div>

                                                            <script>
                                                              ACE.Chart
                                                                .Line(  '#line-chart svg'
                                                                      , lineData    // Array
                                                                      , { xAxisLabel : 'Time (s)'
                                                                        , yAxisLabel : 'Chocolate (g)'
                                                                        }
                                                                );
                                                              
                                                            </script>

                                                            <div id="line-chart-user" class="ace-chart">
                                                              <div class="ace-chart-container">
                                                                <svg></svg>
                                                              </div>
                                                            </div>

                                                            <script>
                                                              ACE.Chart
                                                                .Line(  '#line-chart-user svg'
                                                                      , lineDataGalaxy    // Array
                                                                      , { xAxisLabel : 'Time'
                                                                        , yAxisLabel : 'Importance'
                                                                        , showLegend : true
                                                                        , manualColour : true
                                                                        , guidelines : true
                                                                        }
                                                                );
                                                              
                                                            </script>

                                                            <div id="pie-chart" class="ace-chart">
                                                              <div class="ace-chart-container">
                                                                <svg></svg>
                                                              </div>
                                                            </div>

                                                            <script>
                                                              ACE.Chart
                                                                .Pie( '#pie-chart svg'
                                                                    , pieData /* Array */
                                                                );
                                                              
                                                            </script>

                                                            <div id="doughnut-chart" class="ace-chart">
                                                              <div class="ace-chart-container">
                                                                <svg></svg>
                                                              </div>
                                                            </div>

                                                            <script>
                                                              ACE.Chart
                                                                .Doughnut( '#doughnut-chart svg'
                                                                    , doughnutData /* Array */
                                                                    , { insideText: 'Tasty'
                                                                      , colourOffset : 7
                                                                      , showLegend: true
                                                                      , legendPosition : 'top'
                                                                      }
                                                                );
                                                              
                                                            </script>

Usage

Include ace-charts-with-dependencies.css after ace.css

                                    <link rel="stylesheet" href="dist/ace.css" media="all">
                                    <link href="dist/extensions/ace-charts-with-dependencies.css" rel="stylesheet">

Include ace-charts-with-dependencies.js after ace.js

                                    <script src="dist/ace.js"></script>
                                    <script src="dist/extensions/ace-charts-with-dependencies.js"></script>

Call the chart library using this format:

                                    ACE.Chart
                                    .<chart-name>( <svg-selector-string>
                                                 , <data-array>
                                                 , <configuration-object>
                                    );
                                    

e.g.

                                    <script>
                                        ACE.Chart
                                          .Doughnut( '#my-chart svg'
                                              , [ { "label": "Hello", "value" : 12 }
                                                , { "label": "There", "value" : 34 }
                                                , { "label": "World", "value" : 56 }
                                                ]
                                              , { showLegend : true }
                                          );
                                    </script>
                                    

Chart Attributes

All charts

Line chart

Pie chart

Doughnut chart