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

Jump to bottom

Add examples of scriptable charts #6042

Merged
merged 6 commits into from Feb 14, 2019
Merged

Add examples of scriptable charts #6042

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c203e93
Add example of scriptable pie chart
janelledement Feb 2, 2019
4ba34b4
minor changes
janelledement Feb 5, 2019
7987571
Add pie chart to samples.js
janelledement Feb 7, 2019
cc3829b
Add scriptable line chart doc
janelledement Feb 7, 2019
b500b6d
Add example of scriptable polar area chart
janelledement Feb 8, 2019
a0bdfbd
Adds scriptable radar example
janelledement Feb 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 12 additions & 0 deletions samples/samples.js
View file
Open in desktop
Expand Up @@ -181,6 +181,18 @@
}, {
title: 'Bubble Chart',
path: 'scriptable/bubble.html'
}, {
title: 'Pie Chart',
path: 'scriptable/pie.html'
}, {
title: 'Line Chart',
path: 'scriptable/line.html'
}, {
title: 'Polar Area Chart',
path: 'scriptable/polar.html'
}, {
title: 'Radar Chart',
path: 'scriptable/radar.html'
}]
}, {
title: 'Advanced',
Expand Down
115 changes: 115 additions & 0 deletions samples/scriptable/line.html
View file
Open in desktop
@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scriptable > Line | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
<div class="content">
<div class="wrapper"><canvas id="chart-0"></canvas></div>
<div class="toolbar">
<button onclick="randomize(this)">Randomize</button>
<button onclick="addDataset(this)">Add Dataset</button>
<button onclick="removeDataset(this)">Remove Dataset</button>
</div>
</div>

<script>
var DATA_COUNT = 12;

var utils = Samples.utils;

utils.srand(110);
simonbrunel marked this conversation as resolved.
Show resolved Hide resolved

function alternatePointStyles(ctx) {
var index = ctx.dataIndex;
return index % 2 === 0 ? 'circle' : 'rect';
}

function makeHalfAsOpaque(ctx) {
var c = ctx.dataset.backgroundColor;
return utils.transparentize(c);
}

function adjustRadiusBasedOnData(ctx) {
var v = ctx.dataset.data[ctx.dataIndex];
return v < 10 ? 5
: v < 25 ? 7
: v < 50 ? 9
: v < 75 ? 11
: 15;
}

function generateData() {
return utils.numbers({
count: DATA_COUNT,
min: 0,
max: 100
});
}

var data = {
labels: utils.months({count: DATA_COUNT}),
datasets: [{
data: generateData(),
backgroundColor: '#4dc9f6',
borderColor: '#4dc9f6',
Copy link
Member

Choose a reason for hiding this comment

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

I was about to ask to make these two options scriptable but realized it's not yet scriptable for the line element. Once implemented, we should be able to do something like (as part of a different PR):

borderColor: function(context) {
    // make the line and point border color the 
    // same while different for each dataset.
    return utils.color(context.datasetIndex);
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@simonbrunel Maybe this is a consideration for radar chart as well? Adding scriptable line backgroundColor and borderColor?

Copy link
Member

Choose a reason for hiding this comment

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

Yes, you right, line and radar controllers are very similar (currently trying to refactor them).

}]
};

var options = {
legend: false,
tooltips: true,
elements: {
line: {
fill: false,
},
point: {
hoverBackgroundColor: makeHalfAsOpaque,
radius: adjustRadiusBasedOnData,
pointStyle: alternatePointStyles,
hoverRadius: 15,
}
}
};

var chart = new Chart('chart-0', {
type: 'line',
data: data,
options: options
});


// eslint-disable-next-line no-unused-vars
function addDataset() {
var newColor = utils.color(chart.data.datasets.length);

chart.data.datasets.push({
data: generateData(),
backgroundColor: newColor,
borderColor: newColor
});
chart.update();
}

// eslint-disable-next-line no-unused-vars
function randomize() {
chart.data.datasets.forEach(function(dataset) {
dataset.data = generateData();
});
chart.update();
}

// eslint-disable-next-line no-unused-vars
function removeDataset() {
chart.data.datasets.shift();
chart.update();
}
</script>
</body>
</html>
110 changes: 110 additions & 0 deletions samples/scriptable/pie.html
View file
Open in desktop
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scriptable > Pie | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
<div class="content">
<div class="wrapper"><canvas id="chart-0"></canvas></div>
<div class="toolbar">
<button onclick="randomize()">Randomize</button>
<button onclick="addDataset()">Add Dataset</button>
<button onclick="removeDataset()">Remove Dataset</button>
<button onclick="togglePieDoughnut()">Toggle Doughnut View</button>
</div>
</div>
<script>
var DATA_COUNT = 5;

var utils = Samples.utils;

utils.srand(110);

function colorize(opaque, hover, ctx) {
var v = ctx.dataset.data[ctx.dataIndex];
var c = v < -50 ? '#D60000'
: v < 0 ? '#F46300'
: v < 50 ? '#0358B6'
: '#44DE28';

var opacity = hover ? 1 - Math.abs(v / 150) - 0.2 : 1 - Math.abs(v / 150);

return opaque ? c : utils.transparentize(c, opacity);
}

function hoverColorize(ctx) {
return colorize(false, true, ctx);
}

function generateData() {
return utils.numbers({
count: DATA_COUNT,
min: -100,
max: 100
});
}

var data = {
datasets: [{
data: generateData(),
}]
};

var options = {
legend: false,
tooltips: false,
elements: {
arc: {
backgroundColor: colorize.bind(null, false, false),
hoverBackgroundColor: hoverColorize
}
}
};

var chart = new Chart('chart-0', {
type: 'pie',
data: data,
options: options
});

// eslint-disable-next-line no-unused-vars
function randomize() {
simonbrunel marked this conversation as resolved.
Show resolved Hide resolved
chart.data.datasets.forEach(function(dataset) {
dataset.data = generateData();
});
chart.update();
}

// eslint-disable-next-line no-unused-vars
function addDataset() {
chart.data.datasets.push({
data: generateData()
});
chart.update();
}

// eslint-disable-next-line no-unused-vars
function removeDataset() {
chart.data.datasets.shift();
chart.update();
}

// eslint-disable-next-line no-unused-vars
function togglePieDoughnut() {
if (chart.options.cutoutPercentage) {
chart.options.cutoutPercentage = 0;
} else {
chart.options.cutoutPercentage = 50;
}
chart.update();
}

</script>
</body>
</html>
98 changes: 98 additions & 0 deletions samples/scriptable/polar.html
View file
Open in desktop
@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scriptable > Polar Area | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
<div class="content">
<div class="wrapper"><canvas id="chart-0"></canvas></div>
<div class="toolbar">
<button onclick="randomize()">Randomize</button>
<button onclick="addData()">Add Data</button>
<button onclick="removeData()">Remove Data</button>
</div>
</div>
<script>
var DATA_COUNT = 7;

var utils = Samples.utils;

utils.srand(110);

function colorize(opaque, hover, ctx) {
var v = ctx.dataset.data[ctx.dataIndex];
var c = v < 35 ? '#D60000'
: v < 55 ? '#F46300'
: v < 75 ? '#0358B6'
: '#44DE28';

var opacity = hover ? 1 - Math.abs(v / 150) - 0.2 : 1 - Math.abs(v / 150);

return opaque ? c : utils.transparentize(c, opacity);
}

function hoverColorize(ctx) {
return colorize(false, true, ctx);
}

function generateData() {
return utils.numbers({
count: DATA_COUNT,
min: 0,
max: 100
});
}

var data = {
datasets: [{
data: generateData(),
}]
};

var options = {
legend: false,
tooltips: false,
elements: {
arc: {
backgroundColor: colorize.bind(null, false, false),
hoverBackgroundColor: hoverColorize
}
}
};

var chart = new Chart('chart-0', {
type: 'polarArea',
data: data,
options: options
});

// eslint-disable-next-line no-unused-vars
function randomize() {
chart.data.datasets.forEach(function(dataset) {
dataset.data = generateData();
});
chart.update();
}

// eslint-disable-next-line no-unused-vars
var addData = function() {
var newData = Math.round(Math.random() * 100);
chart.data.datasets[0].data.push(newData);
chart.update();
};

// eslint-disable-next-line no-unused-vars
function removeData() {
chart.data.datasets[0].data.pop();
chart.update();
}

</script>
</body>
</html>