How to "debug" CCC charts?

Document created by Duarte Leao Employee on Nov 14, 2017Last modified by Duarte Leao Employee on Nov 14, 2017
Version 2Show Document
  • View in full screen mode

More often than not, despite of all of its builtin "smartness", CCC charts don't behave like you'd expect.

Usually, the best way around these situations is to activate the debug mode, in one of the following ways:


Using the URL

Add the debug query parameter to the URL:


To fine tune the amount of information output to the console, add an additional parameter, debugLevel, with a value between 2 and 30:


This change can be done to the URL of the HTML page where a chart is being rendered. If the chart is rendered inside a frame, the URL of the top page can be changed instead (assuming the two pages are in the same domain). For example, this will work with the CDE urls, whether in edit or view mode.


Using Code

Sometimes, the URL is not easily changeable and it is best to activate the debug mode using code. Run the following, anytime before the chart is rendered:




In CDE, this can safely be placed in the preExecution handler of the chart component:


function() {


Logged information

The following describes the information that is logged by the Simple Pie example of the CCC playground.


1. An interactive list of the options actually received by the chart:


2. The first 15 rows of data, including the provided metadata:


3. The type of data source translator used (according to the crosstabMode option) and the structure of the logical table perceived by CCC and which is the reference layout for specifying the readers option:


4. A summary of the complex type, the object which holds the metadata of the internal data set object:


5. A summary of the visual map, which binds dimensions of the internal data set to chart and plot visual roles:


6. A summary of the distinct values read for each dimension of the data set:


7. Lastly, a summary of the scales used by the chart and of the extension points that were specified (indicating if these are "free", controlled or locked):



All of this information will help you debug issues related with data source translation and visual role mapping.


Box Layout cues

Specifying a debug level of 16 or more will render box layout cues which are very useful when debugging layout issues.

The following is the result of rendering the Negative Values Bar example of the CCC playground with a debug level of 20:




The information output in debug mode will help you diagnose many common problems of chart specifications.

Please look at it it before you ask for help!



CCC — Community Chart Components — FAQ