Metric-Line chart

This example mostly shows the configuration of the metric-line chart for a specific data set.

HTML

<script src="http://www.webdetails.pt/ctools/charts/lib/jquery.tipsy.js"></script>
<script src="http://www.webdetails.pt/ctools/charts/lib/protovis.js"></script>
<script src="http://www.webdetails.pt/ctools/charts/lib/protovis-msie.js"></script>
<script src="http://www.webdetails.pt/ctools/charts/lib/tipsy.js"></script>
<script src="http://www.webdetails.pt/ctools/charts/lib/def.js"></script>
<script src="http://www.webdetails.pt/ctools/charts/lib/pvc-r2.0.js"></script>
<script src="http://www.webdetails.pt/ctools/charts/lib/q01-01.js"></script>
<script src="http://www.webdetails.pt/ctools/charts/lib/bp.js"></script>
<link rel="stylesheet" href="http://www.webdetails.pt/ctools/charts/lib/tipsy.css">
<a>lala</a>
<div id="cccExample"></div>

JavaScript

new pvc.MetricLineChart({
    canvas: "cccExample",
    width:  400,
    height: 400,
    
    crosstabMode: false,
    
    // NOTE: discrete columns are placed before continuous columns
    // in the "virtual row".
    // Other than that, being in relational format, 
    // it's the same layout as the source data.
    readers: [
        'type, age, value, ID'
    ],
    
    dimensions: {
        // The color role is continous by default in this chart
        // type, so we have to force the dimension bound to
        // it to be discrete to get a discrete color scale.
        "type":   {valueType: String}, // => isDiscrete
        
        // This dimension is not relevant to the user.
        "series": {isHidden: true} // hide from the tooltip
    },
    
    calculations: [
        {
            names: 'series',
            calculation: function(datum, out) {
                var type = datum.atoms.type.value;
                out.series = type != null 
                    ? type
                    : datum.atoms.ID.value;
            }
        }
    ],
    
    visualRoles: {
        x: 'age',
        y: 'value',
        series: 'series',
        color:  'type'
    },
    
    colorMap: {
        '':       'black',
        'mean':   'red',
        'median': 'green'
    },
    
    dotsVisible: true,
    
    baseAxisTitle:  'Age',
    orthoAxisTitle: 'Value',
    
    legend: true,
    legendPosition: "right"
})
.setData({
    "resultset": [
        [0.25,  'mean',   2375,    null],
        [0.30,  'median', 2783.5,  null],
        [0.35,  null,     899.4,   4298],
        [0.40,  null,     1750.3,  1132],
        [0.5,   'mean',   2375,    null],
        [0.5,   'median', 282.6,   null],
        [0.5,   null,     1940.5,  928 ],
        [0.5,   null,     2260,    3172],
    ],
    "metadata": [{
            "colType": "Numeric",
            "colName": "Age"
        }, {
            "colType": "String",
            "colName": "Type"
        }, {
           ...