dcleao/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This example shows a way to show target lines in a bar chart, by use of its second plot, of type point.
In the second plot, the dot's shape is changed to bar, and then it is rotated, making it look like target lines.

  
## chart.js
new pvc.BarChart({
    canvas: "cccExample",
    width:  600,
    height: 400,
    title: "Bar chart with target lines",
    animate:    true,
    selectable: true,
    hoverable:  true,
    legend:     true,

    plot2: true,
    plot2Series: ['Paris', 'London'],
    plot2LinesVisible: false,

    barSizeMax: 20,
    orthoAxisOffset: 0.01,
    extensionPoints: {
        plot2Dot_shape: 'bar',
        plot2Dot_shapeSize: function() {
            // Need to provide a default for when bar series are hidden
            var diam = this.chart.plotPanels.bar.barWidth ||
                       this.chart.options.barSizeMax;

            // "finished(.)" prevents that, when hovered,
            // the size of the target lines increase
            return this.finished(diam);
        },
        plot2Dot_shapeAngle: function() {
            return this.chart.isOrientationHorizontal() ? 0 : -Math.PI/2;
        },
        legend2Dot_shapeAngle: function() { // not being inherited?
            return this.chart.isOrientationHorizontal() ? 0 : -Math.PI/2;
        }
    }
})
.setData(relational_01, { crosstabMode: false })
.render();

## data.js
var relational_01 = {
    "resultset": [
        ["London", "2011-06-05", 72],
        ["London", "2011-06-12", 50],
        ["London", "2011-06-19", 20],
        ["London", "2011-06-26", 23],
        ["London", "2011-07-03", 72],
        ["London", "2011-07-10", 80],
        ["London", "2011-07-26", 23],
        ["London", "2011-07-31", 72],
        ["London", "2011-08-07", 50],
        ["London", "2011-08-14", 20],
        ["London", "2011-08-28", 20],
        ["Paris",  "2011-06-05", 27],
        ["Paris",  "2011-06-26", 32],
        ["Paris",  "2011-07-03", 24],
        ["Paris",  "2011-07-10", 80],
        ["Paris",  "2011-07-17", 90],
        ["Paris",  "2011-07-24", 53],
        ["Paris",  "2011-07-31", 17],
        ["Paris",  "2011-08-07", 20],
        ["Paris",  "2011-08-21", 43],
        ["Lisbon", "2011-06-12", 30],
        ["Lisbon", "2011-07-03", 60],
        ["Lisbon", "2011-07-10", 80],
        ["Lisbon", "2011-07-17", 15]
    ],
    "metadata": [{
        "colIndex": 0,
        "colType": "String",
        "colName": "City"
    }, {
        "colIndex": 1,
        "colType": "String",
        "colName": "Date"
    }, {
        "colIndex": 2,
        "colType": "Numeric",
        "colName": "Quantity"
    }]
};

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Bar chart with Target Lines Series</title>
  <meta charset=utf-8 />

  <!-- BEG CCC2 Includes -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <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>
  <link   href="http://www.webdetails.pt/ctools/charts/lib/tipsy.css" rel="stylesheet" />

  <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>
  <!-- END CCC2 Includes -->
</head>
<body>
  <div id="cccExample" />
  <script src="data.js"></script>
  <script src="chart.js"></script>
</body>
</html>
	new pvc.BarChart({
	canvas: "cccExample",
	width: 600,
	height: 400,
	title: "Bar chart with target lines",
	animate: true,
	selectable: true,
	hoverable: true,
	legend: true,

	plot2: true,
	plot2Series: ['Paris', 'London'],
	plot2LinesVisible: false,

	barSizeMax: 20,
	orthoAxisOffset: 0.01,
	extensionPoints: {
	plot2Dot_shape: 'bar',
	plot2Dot_shapeSize: function() {
	// Need to provide a default for when bar series are hidden
	var diam = this.chart.plotPanels.bar.barWidth \|\|
	this.chart.options.barSizeMax;

	// "finished(.)" prevents that, when hovered,
	// the size of the target lines increase
	return this.finished(diam);
	},
	plot2Dot_shapeAngle: function() {
	return this.chart.isOrientationHorizontal() ? 0 : -Math.PI/2;
	},
	legend2Dot_shapeAngle: function() { // not being inherited?
	return this.chart.isOrientationHorizontal() ? 0 : -Math.PI/2;
	}
	}
	})
	.setData(relational_01, { crosstabMode: false })
	.render();
	var relational_01 = {
	"resultset": [
	["London", "2011-06-05", 72],
	["London", "2011-06-12", 50],
	["London", "2011-06-19", 20],
	["London", "2011-06-26", 23],
	["London", "2011-07-03", 72],
	["London", "2011-07-10", 80],
	["London", "2011-07-26", 23],
	["London", "2011-07-31", 72],
	["London", "2011-08-07", 50],
	["London", "2011-08-14", 20],
	["London", "2011-08-28", 20],
	["Paris", "2011-06-05", 27],
	["Paris", "2011-06-26", 32],
	["Paris", "2011-07-03", 24],
	["Paris", "2011-07-10", 80],
	["Paris", "2011-07-17", 90],
	["Paris", "2011-07-24", 53],
	["Paris", "2011-07-31", 17],
	["Paris", "2011-08-07", 20],
	["Paris", "2011-08-21", 43],
	["Lisbon", "2011-06-12", 30],
	["Lisbon", "2011-07-03", 60],
	["Lisbon", "2011-07-10", 80],
	["Lisbon", "2011-07-17", 15]
	],
	"metadata": [{
	"colIndex": 0,
	"colType": "String",
	"colName": "City"
	}, {
	"colIndex": 1,
	"colType": "String",
	"colName": "Date"
	}, {
	"colIndex": 2,
	"colType": "Numeric",
	"colName": "Quantity"
	}]
	};
	<!DOCTYPE html>
	<html>
	<head>
	<title>Bar chart with Target Lines Series</title>
	<meta charset=utf-8 />

	<!-- BEG CCC2 Includes -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<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>
	<link href="http://www.webdetails.pt/ctools/charts/lib/tipsy.css" rel="stylesheet" />

	<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>
	<!-- END CCC2 Includes -->
	</head>
	<body>
	<div id="cccExample" />
	<script src="data.js"></script>
	<script src="chart.js"></script>
	</body>
	</html>