Skip to content
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

Mixed chart #5134

Closed
wants to merge 18 commits into from
Closed

Mixed chart #5134

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
619d1f6
Better mixed graph support
loicbourgois Jan 10, 2018
ee8e195
Set back lineEnabled()
loicbourgois Jan 11, 2018
76b13d1
Move bar scale default value check to getIndexScale()
loicbourgois Jan 11, 2018
cd75f9b
Improved mixed charts with support for empty main type
loicbourgois Jan 12, 2018
1a32e89
Add example for mixed charts
loicbourgois Jan 12, 2018
7cdd680
Add example for mixed charts
loicbourgois Jan 12, 2018
a01f580
Rollback controller.bar.js
loicbourgois Jan 12, 2018
042920e
Update mixed chart example
loicbourgois Jan 12, 2018
05669ed
Add more samples + Remove duplicated code
loicbourgois Jan 13, 2018
2f9727b
Always merge child options to parent
loicbourgois Jan 13, 2018
6e84627
Merge branch 'master' of https://github.com/chartjs/Chart.js into mixed
loicbourgois Jan 14, 2018
de80075
Add test + Generalize controller and sample
loicbourgois Jan 14, 2018
f24d979
Add test + Generalize controller and sample
loicbourgois Jan 14, 2018
8ea9ee6
Make sure the all the chart options are taken into account
loicbourgois Jan 14, 2018
32f14aa
Update example
loicbourgois Jan 14, 2018
892dc15
Simplify merging
loicbourgois Jan 14, 2018
25119d4
Revert changes for scatter and line controllers
loicbourgois Jan 14, 2018
780f4eb
Add check for type
loicbourgois Jan 15, 2018
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
210 changes: 210 additions & 0 deletions samples/charts/mixed-chart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
<!doctype html>
<html>

<head>
<title>Mixed Chart</title>
<script src="../../dist/Chart.bundle.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
div {
display: flex;
flex-wrap: wrap;
}
div div {
flex-grow: 1;
width: 30%;
margin: 0.5em;
height: 20em;
min-width: 25em;
}
</style>
</head>

<body>
<button id="randomizeData">Randomize Data</button>
<div id="container">
</div>
<script>
var parents = ['scatter', 'line', 'bubble', 'bar', 'horizontalBar', undefined];
var childs = [
{type:'scatter', color:'#f844'},
{type:'scatter', color:'#f844'},
{type:'line', color:'#4f84', fill:false},
{type:'bubble', color:'#8f44'},
{type:'line', color:'#f484'},
{type:'bar', color:'#48f4'},
{type:'bar', color:'#84f4'},
//{type:'horizontalBar', color:'#84f4'} // not supported yet
]
var size = 8;
var charts = [];
parents.forEach(function(parent) {
var datasets = [];
var c = -1;
var labels = [];
childs.forEach(function(child) {
c++;
var data = [];
for(var i = 0 ; i < size ; i++) {
if(child.type === 'bubble') {
data.push({x:randomScalingFactor(), y:randomScalingFactor(),r:Math.max(randomScalingFactor()/2, 20)});
} else {
data.push(randomScalingFactor());
}
if(!c) {
labels.push('label '+(i+1));
}
}
datasets.push({
type: child.type,
label: child.type,
borderColor: child.color,
backgroundColor: child.color,
data: data,
});
if(child.fill !== undefined) {
datasets[datasets.length-1].fill = child.fill;
}
});
var div = document.createElement("div");
var canvas = document.createElement("canvas");
canvas.id = parent;
div.appendChild(canvas);
document.getElementById("container").appendChild(div);
var str = '';
childs.forEach(function(child) {
str += child.type + ', ';
})
str = str.slice(0,-2);
charts.push(new Chart(canvas.getContext("2d"), {
type: parent,
data: {
labels: labels,
datasets: datasets,
},
options: {
responsive: true,
title: {
display: true,
text: 'Main type : ' + parent + ' | Childs : ' + str,
},
tooltips: {
mode: 'index',
intersect: true
}
}
}));
});
console.log(charts);
document.getElementById('randomizeData').addEventListener('click', function() {

charts.forEach(function(chart) {
chart.data.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function(a) {
if(a.r) {
return {x:randomScalingFactor(),y:randomScalingFactor(),r:Math.max(randomScalingFactor()/3, 10)};
}
return randomScalingFactor();
});
});
chart.update();
});
console.log(charts);
});
</script>
<script>
var parents = ['scatter', 'line', 'bubble', 'bar', 'horizontalBar', undefined];
var childs = [
{type:'scatter', color:'#f844'},
{type:'scatter', color:'#f844'},
{type:'line', color:'#4f84', fill:false},
{type:'bubble', color:'#8f44'},
{type:'line', color:'#f484'},
//{type:'bar', color:'#48f4'},
//{type:'bar', color:'#84f4'},
//{type:'horizontalBar', color:'#84f4'} // not supported yet
]
var size = 8;
var charts = [];
parents.forEach(function(parent) {
var datasets = [];
var c = -1;
var labels = [];
childs.forEach(function(child) {
c++;
var data = [];
for(var i = 0 ; i < size ; i++) {
benmccann marked this conversation as resolved.
Show resolved Hide resolved
if(child.type === 'bubble') {
data.push({x:randomScalingFactor(), y:randomScalingFactor(),r:Math.max(randomScalingFactor()/2, 20)});
} else {
data.push(randomScalingFactor());
}
if(!c) {
labels.push('label '+(i+1));
}
}
datasets.push({
type: child.type,
label: child.type,
borderColor: child.color,
backgroundColor: child.color,
data: data,
});
if(child.fill !== undefined) {
datasets[datasets.length-1].fill = child.fill;
}
});
var div = document.createElement("div");
var canvas = document.createElement("canvas");
canvas.id = parent;
div.appendChild(canvas);
document.getElementById("container").appendChild(div);
var str = '';
childs.forEach(function(child) {
str += child.type + ', ';
})
str = str.slice(0,-2);
charts.push(new Chart(canvas.getContext("2d"), {
type: parent,
data: {
labels: labels,
datasets: datasets,
},
options: {
responsive: true,
title: {
display: true,
text: 'Main type : ' + parent + ' | Childs : ' + str,
},
tooltips: {
mode: 'index',
intersect: true
}
}
}));
});
console.log(charts);
document.getElementById('randomizeData').addEventListener('click', function() {

charts.forEach(function(chart) {
chart.data.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function(a) {
if(a.r) {
return {x:randomScalingFactor(),y:randomScalingFactor(),r:Math.max(randomScalingFactor()/3, 10)};
}
return randomScalingFactor();
});
});
chart.update();
});
console.log(charts);
});
</script>
</body>

</html>
3 changes: 3 additions & 0 deletions samples/samples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,9 @@
}, {
title: 'Combo bar/line',
path: 'charts/combo-bar-line.html'
}, {
title: 'Mixed',
path: 'charts/mixed-chart.html'
}]
}, {
title: 'Linear scale',
Expand Down
11 changes: 8 additions & 3 deletions src/controllers/controller.line.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ module.exports = function(Chart) {
var scale = me.getScaleForId(meta.yAxisID);
var i, ilen, custom;
var dataset = me.getDataset();
var showLine = lineEnabled(dataset, options);
var showLine = this.lineEnabled(dataset, options);

// Update Line
if (showLine) {
Expand Down Expand Up @@ -287,7 +287,7 @@ module.exports = function(Chart) {

helpers.canvas.clipArea(chart.ctx, area);

if (lineEnabled(me.getDataset(), chart.options)) {
if (this.lineEnabled(me.getDataset(), chart.options)) {
meta.dataset.draw();
}

Expand Down Expand Up @@ -328,6 +328,11 @@ module.exports = function(Chart) {
model.backgroundColor = me.getPointBackgroundColor(point, index);
model.borderColor = me.getPointBorderColor(point, index);
model.borderWidth = me.getPointBorderWidth(point, index);
}
},

lineEnabled: function(dataset, options) {
return lineEnabled(dataset, options);
},

});
};
6 changes: 5 additions & 1 deletion src/controllers/controller.scatter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@ defaults._set('scatter', {
module.exports = function(Chart) {

// Scatter charts use line controllers
Chart.controllers.scatter = Chart.controllers.line;
Chart.controllers.scatter = Chart.controllers.line.extend({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the reason for overriding and returning false here? Shouldn't that have already happened?

Copy link
Contributor Author

@loicbourgois loicbourgois Jan 12, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From what i understand, with mixed chart, the default style applied is the style of the 'main' chart.
And for now, only bar or line are valid main types.
So the option showLines is never set to false. You'd have to do it manually in the child chart.
You can try commenting the line n°8187 and n°19040 in this codepen
And you can check the console for Chart.config.data.datasets[0].showLine.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But now that I think about it, is being able to show lines in a scatter chart a wanted feature ?
If so, then this overriding would break it.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think lines on a scatter chart is something that should be possible and its currently the default behaviour

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So does that mean a test should be added via another PR to make sure it stays that way in the future ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would think adding a test to ensure that a scatter chart can optionally use a line or not is a good idea. @simonbrunel thoughts?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see why scatter charts couldn't display lines, so yes these lineEnabled changes should be reverted. We could add a test indeed, but in a different PR.

lineEnabled: function() {
return false;
},
});

};
66 changes: 65 additions & 1 deletion src/core/core.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,74 @@ module.exports = function(Chart) {
data.datasets = data.datasets || [];
data.labels = data.labels || [];

config.options = helpers.configMerge(

// Merge options for mixed charts
// [1] Does not work if axes are stacked
// [2] Only triggered if there are at least 2 different types
benmccann marked this conversation as resolved.
Show resolved Hide resolved
// [3] If there is at least one 'bar' chart, main type is set to 'bar'
// [4] If the main chart has no type and there's no 'bar' child chart,
// we set the main chart to 'line'
// This way, users can use a mixed chart without having to set a main type
var isStacked = false;
var optionstmp = helpers.configMerge(
benmccann marked this conversation as resolved.
Show resolved Hide resolved
defaults.global,
defaults[config.type],
config.options || {});
if (optionstmp && optionstmp.scales && optionstmp.scales.xAxes && optionstmp.scales.yAxes) {
optionstmp.scales.xAxes.forEach(function(axe) {
if (axe.stacked === true) {
isStacked = true; // [1]
}
});
optionstmp.scales.yAxes.forEach(function(axe) {
if (axe.stacked === true) {
isStacked = true; // [1]
}
});
}

var alreadyMerged = false;
if (!isStacked && data && data.datasets && data.datasets.length >= 2) { // [2]
var type = null;
var isMixed = false;
var hasBarType = false;
data.datasets.forEach(function(dataset) {
if (type && dataset.type && type !== dataset.type) {
isMixed = true; // [2]
} else if (dataset.type) {
type = dataset.type;
}
if (dataset.type === 'bar') {
hasBarType = true;
}
});
if (isMixed) {
if (hasBarType) { // [3]
benmccann marked this conversation as resolved.
Show resolved Hide resolved
config.options = helpers.configMerge(
defaults.global,
defaults.bar,
config.options || {});
} else {
config.options = helpers.configMerge(
defaults.global,
defaults[config.type || 'line'], // [4]
config.options || {});
}

data.datasets.forEach(function(dataset) {
config.options = helpers.configMerge(defaults[dataset.type], config.options || {});
});
alreadyMerged = true;
}
}

// Merge
if (!alreadyMerged) {
config.options = helpers.configMerge(
defaults.global,
defaults[config.type],
config.options || {});
}

return config;
}
Expand Down
3 changes: 3 additions & 0 deletions src/core/core.scale.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,9 @@ module.exports = function(Chart) {
// Any function can be extended by the scale type

mergeTicksOptions: function() {
if (!this.options.ticks) {
return;
}
var ticks = this.options.ticks;
if (ticks.minor === false) {
ticks.minor = {
Expand Down