Skip to content

Consistent option names pt1 #2314

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Apr 23, 2016
Merged

Consistent option names pt1 #2314

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b0c1e9c
"tension" is a property of the line, not of the point
jachstet-sea Apr 20, 2016
bc0f0f0
Rename dataset-specific option "tension" to "lineTension" and add a c…
jachstet-sea Apr 20, 2016
add9f8c
Add a testcase for the new option name "lineTension"
jachstet-sea Apr 21, 2016
c3c664b
Add the option to an example (there was no other example overwriting …
jachstet-sea Apr 21, 2016
4d4271e
Update the docs
jachstet-sea Apr 21, 2016
7567601
Add testcases for the consistent dataset-specific option names "point…
jachstet-sea Apr 21, 2016
0e61361
Rename dataset-specific options "radius" to "pointRadius" and "hitRad…
jachstet-sea Apr 21, 2016
1a26298
Add an example showcasing the different point size options
jachstet-sea Apr 21, 2016
b21d147
Update the docs
jachstet-sea Apr 21, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 27 additions & 20 deletions docs/02-Line-Chart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,16 @@ var data = {
label: "My First dataset",

// Boolean - if true fill the area under the line
fill: false,
fill: false,

// Tension - bezier curve tension of the line. Set to 0 to draw straight lines connecting points
// Used to be called "tension" but was renamed for consistency. The old option name continues to work for compatibility.
lineTension: 0.1,

// String - the color to fill the area under the line with if fill is true
backgroundColor: "rgba(220,220,220,0.2)",

// The properties below allow an array to be specified to change the value of the item at the given index
backgroundColor: "rgba(220,220,220,0.2)",

// String or array - Line color
// String - Line color
borderColor: "rgba(220,220,220,1)",

// String - cap style of the line. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap
Expand All @@ -57,34 +59,39 @@ var data = {
borderDashOffset: 0.0,

// String - line join style. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
borderJoinStyle: 'miter',
borderJoinStyle: 'miter',

// The properties below allow an array to be specified to change the value of the item at the given index

// String or array - Point stroke color
// String or Array - Point stroke color
pointBorderColor: "rgba(220,220,220,1)",

// String or array - Point fill color
// String or Array - Point fill color
pointBackgroundColor: "#fff",

// Number or array - Stroke width of point border
// Number or Array - Stroke width of point border
pointBorderWidth: 1,

// Number or array - Radius of point when hovered
// Number or Array - Radius of point when hovered
pointHoverRadius: 5,

// String or array - point background color when hovered
// String or Array - point background color when hovered
pointHoverBackgroundColor: "rgba(220,220,220,1)",

// Point border color when hovered
// String or Array - Point border color when hovered
pointHoverBorderColor: "rgba(220,220,220,1)",

// Number or array - border width of point when hovered
pointHoverBorderWidth: 2,

// Tension - bezier curve tension of the line. Set to 0 to draw straight Wlines connecting points
tension: 0.1,

// Number - the pixel size of the point shape. Can be set to 0 to not render a circle over the point
radius: 1,
// Number or Array - border width of point when hovered
pointHoverBorderWidth: 2,

// Number or Array - the pixel size of the point shape. Can be set to 0 to not render a circle over the point
// Used to be called "radius" but was renamed for consistency. The old option name continues to work for compatibility.
pointRadius: 1,

// Number or Array - the pixel size of the non-displayed point that reacts to mouse hover events
//
// Used to be called "hitRadius" but was renamed for consistency. The old option name continues to work for compatibility.
pointHitRadius: 10,

// The actual data
data: [65, 59, 80, 81, 56, 55, 40],
Expand Down
154 changes: 154 additions & 0 deletions samples/different-point-sizes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<!doctype html>
<html>

<head>
<title>Line Chart</title>
<script src="../dist/Chart.bundle.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>

<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>
<br>
<br>
<button id="randomizeData">Randomize Data</button>
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
<script>
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var randomScalingFactor = function() {
return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function(opacity) {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
};

var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "dataset - big points",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
fill: false,
borderDash: [5, 5],
pointRadius: 15,
pointHoverRadius: 10,
}, {
label: "dataset - individual point sizes",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
fill: false,
borderDash: [5, 5],
pointRadius: [2, 4, 6, 18, 0, 12, 20],
}, {
label: "dataset - large pointHoverRadius",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
fill: false,
pointHoverRadius: 30,
}, {
label: "dataset - large pointHitRadius",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
fill: false,
pointHitRadius: 20,
}]
},
options: {
responsive: true,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
},
title: {
display: true,
text: 'Chart.js Line Chart - Different point sizes'
}
}
};

$.each(config.data.datasets, function(i, dataset) {
var background = randomColor(0.5);
dataset.borderColor = background;
dataset.backgroundColor = background;
dataset.pointBorderColor = background;
dataset.pointBackgroundColor = background;
dataset.pointBorderWidth = 1;
});

window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};

$('#randomizeData').click(function() {
$.each(config.data.datasets, function(i, dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});

});

window.myLine.update();
});

$('#addData').click(function() {
if (config.data.datasets.length > 0) {
var month = MONTHS[config.data.labels.length % MONTHS.length];
config.data.labels.push(month);

$.each(config.data.datasets, function(i, dataset) {
dataset.data.push(randomScalingFactor());
if (Array.isArray(dataset.pointRadius)) {
dataset.pointRadius.push(Math.random() * 30);
}
});

window.myLine.update();
}
});

$('#removeData').click(function() {
config.data.labels.splice(-1, 1); // remove the label first

config.data.datasets.forEach(function(dataset, datasetIndex) {
dataset.data.pop();
if (Array.isArray(dataset.pointRadius)) {
dataset.pointRadius.pop();
}
});

window.myLine.update();
});
</script>
</body>

</html>
3 changes: 2 additions & 1 deletion samples/line-legend.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,9 @@
fill: false,
borderDash: [5, 5],
}, {
label: "My Third dataset",
label: "My Third dataset - No bezier",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
lineTension: 0,
fill: false,
}, {
label: "My Fourth dataset",
Expand Down
35 changes: 29 additions & 6 deletions src/controllers/controller.line.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,16 @@ module.exports = function(Chart) {
// Data
line._children = points;
// Model

// Compatibility: If the properties are defined with only the old name, use those values
if ((this.getDataset().tension !== undefined) && (this.getDataset().lineTension === undefined))
{
this.getDataset().lineTension = this.getDataset().tension;
}

line._model = {
// Appearance
tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().lineTension, this.chart.options.elements.line.tension),
backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
Expand Down Expand Up @@ -178,18 +185,28 @@ module.exports = function(Chart) {
point._index = index;

// Desired view properties

// Compatibility: If the properties are defined with only the old name, use those values
if ((this.getDataset().radius !== undefined) && (this.getDataset().pointRadius === undefined))
{
this.getDataset().pointRadius = this.getDataset().radius;
}
if ((this.getDataset().hitRadius !== undefined) && (this.getDataset().pointHitRadius === undefined))
{
this.getDataset().pointHitRadius = this.getDataset().hitRadius;
}

point._model = {
x: xScale.getPixelForValue(this.getDataset().data[index], index, this.index, this.chart.isCombo),
y: reset ? scaleBase : this.calculatePointY(this.getDataset().data[index], index, this.index, this.chart.isCombo),
// Appearance
tension: point.custom && point.custom.tension ? point.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius),
radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius),
pointStyle: point.custom && point.custom.pointStyle ? point.custom.pointStyle : helpers.getValueAtIndexOrDefault(this.getDataset().pointStyle, index, this.chart.options.elements.point.pointStyle),
backgroundColor: this.getPointBackgroundColor(point, index),
borderColor: this.getPointBorderColor(point, index),
borderWidth: this.getPointBorderWidth(point, index),
// Tooltip
hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius)
hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().pointHitRadius, index, this.chart.options.elements.point.hitRadius)
};

point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
Expand Down Expand Up @@ -233,7 +250,7 @@ module.exports = function(Chart) {
helpers.previousItem(this.getDataset().metaData, index)._model,
point._model,
helpers.nextItem(this.getDataset().metaData, index)._model,
point._model.tension
this.getDataset().metaDataset._model.tension
);

// Prevent the bezier going outside of the bounds of the graph
Expand Down Expand Up @@ -281,7 +298,13 @@ module.exports = function(Chart) {
var dataset = this.chart.data.datasets[point._datasetIndex];
var index = point._index;

point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius);
// Compatibility: If the properties are defined with only the old name, use those values
if ((this.getDataset().radius !== undefined) && (this.getDataset().pointRadius === undefined))
{
this.getDataset().pointRadius = this.getDataset().radius;
}

point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius);
point._model.backgroundColor = this.getPointBackgroundColor(point, index);
point._model.borderColor = this.getPointBorderColor(point, index);
point._model.borderWidth = this.getPointBorderWidth(point, index);
Expand Down
Loading