Webdetails.CCC Chart Example

Bar charts are used for plotting data which has discrete values. The lengths of the bars are proportional to the values that they represent.

new pvc.BarChart({
    canvas: 'cccBarExample4',
    width:  600,
    height: 400,

// Data source
    crosstabMode: false,

// Main plot
    stacked: true,
    barStackedMargin: 3,
    valuesVisible: true,
    valuesOptimizeLegibility: true,
    valuesFont: 'lighter 11px "Open Sans"',
    plotFrameVisible: false,

// Cartesian axes
    axisGrid:   true,
    axisOffset: 0,
    axisGrid_strokeStyle: '#F7F8F9',
    axisLabel_font: 'normal 10px "Open Sans"',
    orthoAxisFixedMax: 130,
    baseAxisTicks: true,
    baseAxisTooltipAutoContent: 'summary',
    axisRule_strokeStyle: '#DDDDDD',

// Panels
    legend: true,
    legendFont: 'normal 11px "Open Sans"',

// Rubber-band
    rubberBand_strokeStyle: 'rgb(0,0,240)',
    rubberBand_fillStyle:   'rgba(0,0,255, 0.5)',
    rubberBand_lineWidth:   2.5,

// Chart/Interaction
    animate:    false,
    selectable: true,
    hoverable:  true,

// Color axes
    colors: [
        '#005CA7', '#FFC20F', '#333333'
    ]
})
.setData(relational_01)
.render();

NEGATIVE VALUES STACKED BAR

copy link

HORIZONTAL STACKED BAR

copy link

NORMALIZED STACKED BAR

copy link

NORMALIZED GROUPED BAR

copy link

ALL IN ONE BAR

copy link

new pvc.BarChart({
    canvas: 'cccBarExample9',
    width:  600,
    height: 400,

// Data source
    crosstabMode: false,

// Main plot
    stacked: true,

// Second plot
    plot2: true,
    plot2Series: ['Paris'],
    plot2OrthoAxis: 2,
    plot2NullInterpolationMode: 'linear',
    plot2Line_lineWidth: 2,
    plot2Dot_shapeSize:  7,

// Trend plot
    trendType: 'moving-average',
    trendAreasVisible: true,
    trendColorAxis: 3,
    trendLine_interpolate: 'cardinal',
    trendArea_interpolate: 'cardinal',

// Cartesian axes
    axisGrid: true,
    axisGrid_strokeStyle: '#F7F8F9',
    axisLabel_font: 'normal 9px "Open Sans"',
    orthoAxisOffset: 0.1,
    continuousAxisTicks_strokeStyle: '#999999',

// Color axes
    colors: ['#005CA7', '#333333'],
    color2AxisColors: ['#FFC20F'],
    color3AxisTransform: function(c) { return c.darker(); },

// Panels
    title: "All-in-one Bar Chart",
    titleFont: 'lighter 20px "Open Sans"',

legend: true,
    legendFont: 'normal 11px "Open Sans"',

// Chart/Interaction
    animate:    true,
    selectable: true,
    hoverable:  true
})
.setData(relational_01_neg)
.render();

PAIRED BAR-LINE MEASURES

copy link

new pvc.BarChart({
    canvas: 'cccBarExample10',
    width:  600,
    height: 400,

// Data source
    crosstabMode: true,
    dataCategoriesCount: 2,
    readers: 'measure, series, category, value',

// Data
    dimensions: {
        // Explicitly define the "measure" dimension
        // (change the defaults that would otherwise take effect)
        measure: {
            // Hide "measure" from the tooltip
            isHidden: true,

// Fine tune the labels
            formatter: function(v) {
                switch(v) {
                    case 'Count':      return "Count";
                    case 'AvgLatency': return "Avg. Latency";
                }
                return v + '';
            }
        }
    },

calculations: [{
        // Split rows into != data parts,
        // depending on the "measure" dimension's value.
        names: 'dataPart',
        calculation: function(datum, atoms) {
            atoms.dataPart =
                datum.atoms.measure.value === 'Count' ?
                '0' :  // main plot:   bars
                '1' ;  // second plot: lines
        }
    }],

// Second plot - lines
    plot2: true,
    plot2OrthoAxis: 2,

// If you have nulls on the AvgLatency,
    // this might look interesting
    plot2NullInterpolationMode: 'linear',

// Cartesian axes
    axisGrid_strokeStyle: '#F7F8F9',
    axisLabel_font: 'normal 10px "Open Sans"',
    axisTitleLabel_font: 'normal 12px "Open Sans"',

orthoAxisTitle:  "Count",
    orthoAxisOffset: 0.03,
    orthoAxisGrid:   true,
    ortho2AxisTitle: "Avg. Latency",

// Panels
    //  Extend legend item scenes
    legend: {
        scenes: {
           item: {
                value: function() {
                    var valueVar = this.base();
                    // Add the measure label to
                    // the "value" variable's label
                    valueVar.label += " / " + this.firstAtoms.measure;
                    return valueVar;
                }
            }
        }
    },
    legendFont: 'normal 11px "Open Sans"',

// Chart/Interaction
    animate:    true,
    selectable: true,
    hoverable:  true,

// Color axes
    colors: [
        '#333333', '#FFC20F', '#005CA7'
    ]
})
.setData(testMeasureDiscrim)
.render();

REALLY PAIRED BAR-LINE MEASURES

copy link

new pvc.BarChart({
    canvas: "cccBarExample11",
    width:  600,
    height: 400,

// Data source
    crosstabMode: false,

//  map logical table columns -> dimensions
    readers: 'city, period, count, avgLatency',

// Data
    dimensions: {
        count:      {format: "#,0"  },
        avgLatency: {format: "#,0.0"}
    },

// Plots
    plots: [
        {
            name: 'main',
            visualRoles: {
                value:    'count',
                series:   'city',
                category: 'period'
            }
        },
        {
            type: 'point',
            linesVisible: true,
            dotsVisible:  true,
            orthoAxis: 2,
            colorAxis: 2,
            nullInterpolationMode: 'linear',
            visualRoles: {
                value: 'avgLatency',
                color: {legend: {visible: false}}
            }
        }
    ],

// Cartesian axes
    axisGrid_strokeStyle: '#F7F8F9',
    axisLabel_font: 'normal 10px "Open Sans"',
    axisTitleLabel_font: 'normal 12px "Open Sans"',

baseAxisTooltipAutoContent: 'summary',
    axisBandSizeRatio: 0.6,

orthoAxisTitle:  "Count",
    orthoAxisOffset: 0.02,
    orthoAxisGrid:   true,

ortho2AxisTitle: "Avg. Latency",

// Color axes
    colors: [
        '#005CA7', '#FFC20F', '#333333'
    ],
    color2AxisTransform: function(c) { return c.brighter(0.5); },

// Panels
    legend: true,
    legendFont: 'normal 11px "Open Sans"',

// Chart/Interaction
    animate:    true,
    selectable: true,
    hoverable:  true,
    tooltipClassName: 'light',
    tooltipOpacity: 1
})
.setData(testMeasureDiscrim)
.render();

SMALL MULTIPLE BARS

copy link

BAR WITH 5-NUMBER-STATISTICS

copy link

// This restores the unmodified scale color
//  and makes it final.
var box11_strokeColor = pvc.finished(function(s) {
    return this.sign.scaleColor(s);
});

new pvc.BarChart({
    canvas: "cccBarExample13",
    width:  600,
    height: 500,

// Plots
    plots: [
        // Main plot - bars
        {
            name: 'main',
            barSizeMax:      15,
            barSizeRatio:    0.8,
            bar_lineWidth:   pvc.finished(1),
            bar_strokeStyle: pvc.finished()
        },
        // Second plot - boxes
        {
            type: 'box',
            visualRoles: {
                // Comment the ones you don't want represented
                median:       'value',
                lowerQuartil: 'value2',
                upperQuartil: 'value3',
                minimum:      'value4',
                maximum:      'value5'
            },

// Within the same category, 
            // boxes of different series are spread along
            // the category band
            layoutMode: 'grouped',

// These two must be the same as barSizeMax and barSizeRatio,
            // for grouped boxes to align with corresponding bars
            boxSizeMax:   15,
            boxSizeRatio: 0.8,

// Styling boxes
            colorAxis: 2,

// Make the box/category panel smaller, 
            // so that boxes are narrower than bars
            panel_width: function() { return this.delegate() * 0.4; },

boxBar_fillStyle:           'rgba(250,250,250,0.5)',
            boxBar_strokeStyle:         box11_strokeColor,
            boxRuleMax_strokeStyle:     box11_strokeColor,
            boxRuleMedian_strokeStyle:  box11_strokeColor,
            boxRuleMedian_lineWidth:    3,
            boxRuleMin_strokeStyle:     box11_strokeColor,
            boxRuleWhisker_strokeStyle: box11_strokeColor
            //,boxRuleWhisker_strokeDasharray: '- '
        }
    ],

// Cartesian axes
    baseAxisGrid:   true,
    axisLabel_font: 'normal 10px "Open Sans"',
    axisGrid_strokeStyle: '#F7F8F9',
    panelSizeRatio: 0.8,

// Color axes
    colors: [
        '#005CA7', '#FFC20F', '#333333'
    ],
    color2AxisTransform: function(c) { return c.darker(0.7); },
    color2AxisLegendVisible: false,

// Panels
    legend: true,
    legendFont: 'normal 11px "Open Sans"',

// Chart/Interaction
    animate:    false,
    selectable: true,
    hoverable:  true
})
.setData(relational_04c, {crosstabMode: false})
.render();

BAR WITH MEASURES AS SERIES

copy link

TOP-BOTTOM BAR-LINE

copy link

new pvc.BarChart({
    canvas: "cccBarExample14",
    width:  600,
    height: 350,

// Data Source
    readers: ["city", "date", "costs", "sales"],
    crosstabMode: false,

// Chart-level visual roles
    visualRoles: {
        multiChart: "valueRole.dim"
    },

// Plots
    plots: [
        // Main plot - bars
        {
            name: "main",
            stacked: true,
            visualRoles: {
                series: "city",
                category: "date",
                value: "sales"
            }
        },

// Second plot - lines
        {
            type: "point",
            stacked: true,
            visualRoles: {
                value: "costs"
            }
        }
    ],

// Cartesian Axes
    orthoAxisDomainScope: "cell",

// Color axes
    colors: [
        '#005CA7', '#FFC20F', '#333333'
    ],

// Panels
    legend: true,
    legendPosition: "right",
    legendFont: 'normal 11px "Open Sans"',

// Chart/General
    multiChartColumnsMax: 1,

// Chart/Interaction
    animate:    false,
    selectable: true,
    hoverable:  true
})
.setData(relational_01_2measures_costs_sales_pos)
.render();

CHART OPTIONS

copy link

Axes > Base Axis

baseAxisBandSize // number
baseAxisBandSizeMax // number
baseAxisBandSizeMin // number
baseAxisBandSizeRatio // number
baseAxisBandSpacing // number
baseAxisBandSpacingMax // number
baseAxisBandSpacingMin // number
baseAxisClickAction // function
baseAxisDoubleClickAction // function
baseAxisFont // string
baseAxisGrid : false
baseAxisLabelDesiredAngles // number | string | list(number | string)
baseAxisLabelRotationDirection : 'clockwise' // ['counterclockwise']
baseAxisLabelSpacingMin // number
baseAxisOffset : 0
baseAxisOverlappedLabelsMode : 'hide' // ['leave', 'rotate', 'rotatethenhide']
baseAxisPosition // ['left', 'right', 'top', 'bottom']
baseAxisSize // number | string
baseAxisSizeMax // number | string
baseAxisTickFormatter // function
baseAxisTicks : true
baseAxisTooltipAutoContent : 'value' // ['summary']
baseAxisTooltipEnabled : true
baseAxisTooltipFormat // function
baseAxisVisible : true

Axes > Base Axis > Title

baseAxisTitle // string
baseAxisTitleAlign // ['left', 'center', 'right', 'top', 'middle', 'bottom']
baseAxisTitleFont : '12px sans-serif'
baseAxisTitleMargins : 0 // string
baseAxisTitleSize // number | string
baseAxisTitleSizeMax // number | string
baseAxisTitleVisible // boolean

Axes > Color

colorMap
colorPreserveMap : false
colors // string | pv.Color | list(string | pv.Color) | function
colorTransform // function
colorUnbound // string | pv.Color
legendClickMode : 'toggleVisible' // ['none', 'toggleSelected']
legendDrawLine // boolean
legendDrawMarker // boolean
legendShape // ['circle', 'square', 'triangle', 'diamond', 'cross', 'tick', 'bar']
legendVisible : true