Related
I am new to development and trying to do a project where I creating a webpage which have price range filter and there is a chart linked to that price range filter. What I am trying to do is change the background color of my labels of chartJs according to ranger filter. I want only labels in given range to show orange color and other labels should show light pink color, but here when I change background color after giving a condition all the labels' color get changed but i want only labels falling under filter range change the color.
trying to achieve range filter in this
let canvasElement = document.getElementById("productChart");
const dataPoints = [21, 0, 19, 3, 5, 0, 2, 3, 10, 4, 6, 7, 2, 0, 0, 0, 24, 30, 32, 45, 44, 22,
21, 10, 7, 5, 4, 3, 1, 0, 0];
const labels = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
27, 28, 29, 30, 31]
const backgroundColor = 'rgba(255, 99, 71, 0.3)';
const newBackgroundColor = 'rgba(255, 99, 71, 1)';
let config =
{
type: 'bar',
data: {
labels: labels,
datasets: [{
barPercentage: 0.5,
barThickness: 5,
maxBarThickness: 12,
minBarLength: 2,
// label: 'Number of Phones',
data: dataPoints, //price
backgroundColor: backgroundColor,
borderColor: [
'rgba(255, 99, 71, 0.2)',
],
borderWidth: 1,
borderRadius: 5,
// borderSkipped: false,
}]
},
options: {
responsive: true,
scales: {
x: {
ticks: {
display: false, //this will remove only the label
},
grid: {
display:false,
borderColor: 'black', // <-- this line is answer to initial question
borderWidth:2,
}
},
y: {
display: false, //this will remove only the label
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
displayColors: false,
padding: 10,
yAlign: 'top',
},
},
}
}
let productChart = new Chart(canvasElement, config)
const start = document.getElementById('start')
const end = document.getElementById('end')
function updateMin(range) {
const minValue = labels.slice(range.value - 1, end.value);
let newLabels = productChart.config.data.labels
for(let i = 0; i < newLabels.length; i++){
value = newLabels[i];
if (minValue.includes(value)){
productChart.config.data.datasets[0].backgroundColor=newBackgroundColor;
}
}
end.min = range.value
productChart.update();
}
You could use a scriptable options for backgroundColor options. Based on the argument, context.index (see here the doc: https://www.chartjs.org/docs/latest/general/options.html#scriptable-options) you can decide at runtime which color to use.
In the below snippet, changing the stepper values, the chart will change the background colors.
I have used part of your code. Instead of using the stepper, you can use your slider or what you are using.
const dataPoints = [21, 0, 19, 3, 5, 0, 2, 3, 10, 4, 6, 7, 2, 0, 0, 0, 24, 30, 32, 45, 44, 22,
21, 10, 7, 5, 4, 3, 1, 0, 0];
const labels = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
27, 28, 29, 30, 31]
const backgroundColor = 'rgba(255, 99, 71, 0.3)';
const newBackgroundColor = 'rgba(255, 99, 71, 1)';
const from = document.getElementById("from");
const to = document.getElementById("to");
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
//barPercentage: 0.5,
//barThickness: 5,
//maxBarThickness: 12,
//minBarLength: 2,
data: dataPoints,
backgroundColor(ctx) {
const fromValue = parseFloat(from.value);
const toValue = parseFloat(to.value);
const value = ctx.index + 1;
if (value >= fromValue && value <= toValue) {
return newBackgroundColor;
}
return backgroundColor;
},
borderColor: 'rgba(255, 99, 71, 0.2)',
borderWidth: 1,
borderRadius: 5,
}]
},
options: {
responsive: true,
scales: {
x: {
ticks: {
display: false,
},
grid: {
display:false,
}
},
y: {
display: false,
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
},
},
}
});
from.addEventListener('click', function() {
myChart.update();
});
to.addEventListener('click', function() {
myChart.update();
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
From:
<input type="number" id="from" min="1" max="31" value="1"/>
To:
<input type="number" id="to" min="1" max="31" value="31"/>
</body>
</html>
I'm trying to write a chart.js (v.2.7) plugin to show errorbars on my scatter / line plots.
I managed to get the pixel positions from the chart and draw the errorbars on the canvas, but i cannot get the timing to look right. I want them to appear after the lines animate, then stay attached (& move with) if the datasets are hidden->shown.
I've tried:
The afterDraw / afterDataset(s)Draw / beforeDraw hooks: the error bars are already on the plot before the lines animate (as in example). When hidden->shown, the error bars are in place.
afterRender / afterEvent hook: draws them after the animation finishes, but then redraws them everytime the datasets are hidden->shown (after a pause)
beforeRender / any earlier hooks: gives no errorbars
setTimout() on the draw function, or at various places inside it: does nothing
sleep() before the draw function or other places: slows down the whole animation but the errorsbars are unaffected.
I couldn't find a way to invoke plugin functions after animation or get to then via the options.animation.onComplete
Is there a way to get the errorbars to behave as in the example, but the initial appearance occurs after the line animation (with a plugin?)
var errorbarPlugin = {
calcPoints: function(chartInstance, dataList){
var ds = chartInstance.data.datasets
var meta = chartInstance.getDatasetMeta(0)
var yScale = chartInstance.scales[meta.yAxisID];
var xScale = chartInstance.scales[meta.xAxisID];
var yList = []; var xList = [];
for(var i = 0; i < dataList.length; i++){
var yValue = dataList[i].y
var yPixel = yScale.getPixelForValue(yValue)
yList.push(yPixel)
var xValue = dataList[i].x
var xPixel = xScale.getPixelForValue(xValue)
xList.push(xPixel)
}
return {yList: yList, xList: xList}
},
calcErrorbars: function(chartInstance, ds_num){
var ds = chartInstance.data.datasets
var data_list = ds[ds_num].data
var isHidden = ds[ds_num]._meta[Object.keys(chartInstance.data.datasets[ds_num]._meta)[0]].hidden;
var yList = this.calcPoints(chartInstance, data_list).yList
var xList = this.calcPoints(chartInstance, data_list).xList
if(ds[ds_num].errors){
var errors = ds[ds_num].errors
} else {errors = 0}
return [xList, yList, errors, isHidden]
},
drawErrorbars: function(chartInstance){
var ctx = chartInstance.chart.ctx
var ds = chartInstance.data.datasets
for(var ds_num = 0; ds_num < ds.length; ds_num++){
var errCalc = this.calcErrorbars(chartInstance, ds_num)
var isHidden = errCalc[3]
var yList = errCalc[1]
var xList = errCalc[0]
var errors = errCalc[2]
var errWidth = 3
var capLen = 5
if(!isHidden){
for(var k = 0; k < xList.length; k++){
ctx.strokeStyle = "red"
ctx.beginPath();
ctx.moveTo(xList[k], yList[k]-errors[k]);
ctx.lineTo(xList[k], yList[k]+errors[k]);
ctx.moveTo(xList[k]-capLen, yList[k]+errors[k]);
ctx.lineTo(xList[k]+capLen, yList[k]+errors[k]);
ctx.moveTo(xList[k]-capLen, yList[k]-errors[k]);
ctx.lineTo(xList[k]+capLen, yList[k]-errors[k]);
ctx.stroke()
}
}
}
},
afterDatasetsDraw: function(chartInstance) {
this.drawErrorbars(chartInstance)
},
}
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script type="text/javascript" src="{% static 'js/charts/errorbarPlugin3.js' %}"></script>
<div id="canvas-holder" class="col-sm-3">
<canvas id="chart-gamma" width="200" height="200"/></canvas>
</div>
<script defer>
var gammaChartData = {
datasets: [
{
label: 'Red',
data: [{x: 15, y: 30}, {x: 35, y: 17}, {x: 55, y: 37}, {x: 72, y: 45},],
borderColor: "red",
errors: [10, 28, 30, 34],
},
]
}
var ctx_gamma = document.getElementById("chart-gamma").getContext("2d");
window.onload = function() {
var gamma_chart = new Chart(ctx_gamma, {
type: 'scatter',
data: gammaChartData,
plugins: [errorbarPlugin],
options: {showLines: true},
});
};
</script>
</body>
</html>
Edit: shortened snippet by removing formatting and default options
Here's what I came up with (snippet below)
The errorbars can either be fixed to the data or shown independantly, and animate in / are hidden / revealed with the data.
The plugin can add x or y axis errors, repesented as bars (with/without caps) or ovals / circles (filled or transparent).
"use strict";
var errorbarPlugin = {
afterDraw: function (chart) {
var type = chart.config.type;
var plugConfig = chart.config.options.errorbarPlugin;
if (plugConfig) {
if (plugConfig.showErrors) {
var showErrors = plugConfig.showErrors;
}
}
else
showErrors = true;
if (showErrors !== false) {
if (["line", "scatter"].includes(type)) {
errorbarPlugin.scatterErrorbars(chart);
}
else if (type == "bar") {
console.log("Bar charts not supported yet");
}
}
},
scatterErrorbars: function (chart) {
var ctx = chart.ctx;
var plugConfig = chart.config.options.errorbarPlugin;
chart.data.datasets.forEach(function (dataset, i) {
var ds = dataset;
var meta = chart.getDatasetMeta(i);
var showErrors;
(ds.showErrors === false) ? showErrors = false : showErrors = true;
var errWidth;
(ds.errWidth) ? errWidth = ds.errWidth : errWidth = 1;
var showCap;
(ds.showCap) ? showCap = ds.showCap : showCap = true;
var capLen;
(ds.capLen) ? capLen = ds.capLen : capLen = 3;
var errStyle;
(ds.errStyle) ? errStyle = ds.errStyle : errStyle = "T";
var errFillColor;
(ds.errFillColor) ? errFillColor = ds.errFillColor : errFillColor = "rgba(0,0,0,0)";
if (!meta.hidden && showErrors) {
meta.data.forEach(function (element, index) {
var x_point = element._model.x;
var y_point = element._model.y;
var errColor;
(ds.errColor) ? errColor = ds.errColor : errColor = element._view.borderColor;
var dataPoint = ds.data[index];
var yError;
var xError;
if (typeof (dataPoint) === "object" && 'r' in dataPoint) {
yError = dataPoint.r;
}
else if (ds.errors) {
yError = ds.errors[index];
}
else {
yError = null;
}
if (typeof (dataPoint) === "object" && dataPoint.e) {
xError = dataPoint.e;
}
else if (ds.xErrors) {
xError = ds.xErrors[index];
}
else {
xError = null;
}
var position = element.tooltipPosition();
if (errStyle == "circle") {
ctx.beginPath();
ctx.arc(position.x, position.y, yError, 0, 2 * Math.PI, false);
if (ds.hidden === true && meta.hidden === null) {
ctx.strokeStyle = "rgba(0,0,0,0)";
ctx.fillStyle = "rgba(0,0,0,0)";
}
else {
ctx.strokeStyle = errColor;
ctx.fillStyle = errFillColor;
}
console.log(meta.hidden);
ctx.fill();
ctx.stroke();
}
else if (errStyle == "oval" || errStyle == "ellipse") {
if (xError) {
var scaleFac = (xError) / yError;
}
else
scaleFac = 10 / yError;
ctx.beginPath();
ctx.save();
ctx.scale(scaleFac, 1);
ctx.arc(position.x / scaleFac, position.y, yError, 0, 2 * Math.PI, false);
ctx.restore();
if (ds.hidden === true && meta.hidden === null) {
ctx.strokeStyle = "rgba(0,0,0,0)";
}
else {
ctx.strokeStyle = errColor;
}
ctx.stroke();
}
else {
ctx.beginPath();
ctx.moveTo(position.x, position.y - yError);
ctx.lineTo(position.x, position.y + yError);
if (xError) {
ctx.moveTo(position.x - xError, position.y);
ctx.lineTo(position.x + xError, position.y);
}
if (ds.hidden === true && meta.hidden === null) {
ctx.strokeStyle = "rgba(0,0,0,0)";
}
else {
ctx.strokeStyle = errColor;
}
ctx.stroke();
if (showCap) {
ctx.beginPath();
ctx.moveTo(position.x - capLen, position.y - yError);
ctx.lineTo(position.x + capLen, position.y - yError);
ctx.moveTo(position.x - capLen, position.y + yError);
ctx.lineTo(position.x + capLen, position.y + yError);
if (xError) {
ctx.moveTo(position.x - xError, position.y - capLen);
ctx.lineTo(position.x - xError, position.y + capLen);
ctx.moveTo(position.x + xError, position.y - capLen);
ctx.lineTo(position.x + xError, position.y + capLen);
}
ctx.stroke();
}
}
});
}
});
}
};
<!DOCTYPE html>
<!--DOCTYPE html -->
<html>
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js'></script>
<body>
<div style = "position:relative;
width:60%;" >
<div id="canvas-holder" class="col-sm-6">
<canvas id="chart-gamma" width="500" height="500"/></canvas>
</div>
<div id="canvas-holderbf2" class="col-sm-6">
<canvas id="chart-humid" width="500" height="500"/></canvas>
</div>
<script defer>
Chart.defaults.global.legend.display = true
Chart.defaults.global.legend.position = 'right'
// Chart.defaults.global.legend.onHover = function(){}
// Chart.defaults.global.legend.onClick = function(){}
Chart.defaults.global.legend.labels.usePointStyle = true
Chart.defaults.global.legend.labels.fontsize = 12
Chart.defaults.global.legend.labels.padding = 10
var gammaChartData = {
datasets: [
{
label: 'Eu',
data: [{x: 5, y: 45}, {x: 10, y: 100}, {x: 25, y: 120}, {x: 50, y: 125}, {x: 100, y: 150}, {x: 120, y: 250},],
borderColor: "red",
//fillColor: "pink",
errors: [15, 20, 30, 12, 10, 10],
xErrors: [3, 7, 16, 12, 12, 30, 10],
//hidden: true,
errColor: "blue",
errStyle: "circle",
errFillColor: "pink",
hidden: true,
errWidth: 2,
showCap: true,
capLen: 3,
showErrors: true,
},
{
label: 'Am',
data: [{x: 15, y: 85, r: 14}, {x: 25, y: 37, r: 8}, {x: 62, y: 135, r: 44},],
borderColor: "blue",
errColor: "red",
errStyle: "circle",
showErrors: true,
},
]
}
var options_gamma = {
animation: {
duration: 1000,
},
errorbarPlugin: {
showErrors: true,
marginsOfError: [100, 50, 10],
},
elements: {
line: { fill: false,
borderWidth: 1,
},
point: { radius: 0,
pointStyle: 'circle',
borderWidth: 1,
hitRadius: 18, //size if should hover
// hoverBorderWidth: 13,
hoverRadius: 10, //size when hovered
},
},
annotation: {
annotations: [{
id: 'h-line-01', // optional
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '125',
borderColor: 'red',
borderDash: [2, 2],
borderWidth: 2,
label: {
enabled: true,
backgroundColor: 'rgba(255,255,255,1)', // Background color of label, default below
//fontFamily: "sans-serif", // Font family of text, inherits from global
fontStyle: "normal", // Font style of text, default "bold"
fontSize: 12, // Font size of text, inherits from global
fontColor: "red",// Font color of text, default below
xPadding: 5,// Padding of label to add top/bottom, default below
yPadding: 5,// Radius of label rectangle, default below
cornerRadius: 10, // Anchor position of label on line, can be one of: top, bottom, left, right, center. Default below.
position: "left", // Adjustment along x-axis (left-right) of label relative to above number (can be negative)
// For horizontal lines positioned left or right, negative values move the label toward the edge, and negative values toward the center.
xAdjust: 290, // Adjustment along y-axis (top-bottom) of label relative to above number (can be negative)
// For vertical lines positioned top or bottom, negative values move the label toward the edge, and negative values toward the center.
yAdjust: 0, // Whether the label is enabled and should be displayed
// Text to display in label - default is null
content: "Max"
},
onClick: function(e) { // Fires when the user clicks this annotation on the chart (be sure to enable the event in the events array below).
}
}],
},
responsive: true,
showLines: true,
hoverMode: 'single', // should always use single for a scatter chart
legend: {},
scales: {
yAxes: [{
display: true,
position: 'left',
id: 'y-axis-0',
ticks: {min: 0, //beginAtZero:true,
max: 200,
//display: true,
//fontColor: "black"
},
scaleLabel: {display: true, labelString: 'Number'},
gridLines: {color: "black",
//display: true,
drawOnChartArea: false,
zeroLineColor: "black",
//drawTicks: true,
},
}],
xAxes: [{
display: true,
type: 'linear',
id: 'x-axis-0',
position: 'bottom',
ticks: {min: 0,
max: 100,
//display: true,
//fontColor: "black",
},
scaleLabel: {display: true, labelString: 'Volume'},
gridLines: {color: "black",
zeroLineColor: "black",
drawOnChartArea: false,
},
}],
},
}
var ctx_gamma = document.getElementById("chart-gamma").getContext("2d");
var humidChartData = {
datasets: [
{
label: 'B errors',
data: [{x: 5, y: 45}, {x: 10, y: 100}, {x: 25, y: 120}, {x: 50, y: 125}, {x: 100, y: 150}, {x: 120, y: 250},],
borderColor: "green",
errors: [15, 20, 30, 12, 10, 10],
xErrors: [3, 7, 16, 12, 12, 30, 10],
errStyle: "oval",
showLine: false,
errColor: "border",
//pointBackgroundColor: "white",
//pointBordercolor: "white",
backgroundColor: "rgba(0,0,0,0)",
hidden: true,
errWidth: 2,
showCap: true,
capLen: 3,
radius: 0,
showErrors: true,
},
{
label: 'B trend',
data: [{x: 5, y: 45}, {x: 10, y: 100}, {x: 25, y: 120}, {x: 50, y: 125}, {x: 100, y: 150}, {x: 120, y: 250},],
borderColor: "green",
errors: [15, 20, 30, 12, 10, 10],
xErrors: [3, 7, 16, 12, 12, 30, 10],
pointStyle: "line",
showErrors: false,
radius: 0,
},
{
label: 'B data',
data: [{x: 5, y: 45}, {x: 10, y: 100}, {x: 25, y: 120}, {x: 50, y: 125}, {x: 100, y: 150}, {x: 120, y: 250},],
borderColor: "green",
backgroundColor: "green",
errors: [15, 20, 30, 12, 10, 10],
xErrors: [3, 7, 16, 12, 12, 30, 10],
showErrors: false,
showLine: false,
},
{
label: '',
data: [],
borderColor: "rgba(0,0,0,0)",
backgroundColor: "rgba(0,0,0,0)",
},
{
label: 'C data',
data: [{x: 15, y: 85, r: 14}, {x: 25, y: 37, r: 8}, {x: 62, y: 135, r: 44},],
borderColor: "blue",
backgroundColor: "rgba(0,0,0,0)",
xErrors: [3, 7, 16, 12, 12, 30, 10],
showLine: true,
showErrors: true,
},
]
}
var options_humid = {
hoverMode: 'single',
elements: {
line: { fill: false,
borderWidth: 2,
},
point: { radius: 3,
pointStyle: 'circle',
borderWidth: 1,
hitRadius: 0,
// hoverBorderWidth: 13,
hoverRadius: 9,
},
},
responsive: true,
showLines: true,
hoverMode: 'single', // should always use single for a scatter chart
legend: {
labels: {
usePointStyle: true,
// generateLabels: function() { }
}
},
scales: {
yAxes: [{
display: true,
position: 'left',
id: 'y-axis-0',
ticks: {min: 0, //beginAtZero:true,
max: 300 },
scaleLabel: {display: true, labelString: 'Number'},
gridLines: {zeroLineColor: "black", },
}],
xAxes: [{
display: true,
type: 'linear',
id: 'x-axis-0',
position: 'bottom',
ticks: {min: 0,
max: 200 },
scaleLabel: {display: true, labelString: 'Month'},
gridLines: {zeroLineColor: "black", },
}],
},
}
var ctx_humid = document.getElementById("chart-humid").getContext("2d");
window.onload = function() {
var humidChart = new Chart(ctx_humid, {
type: 'line',
data: humidChartData,
plugins: [errorbarPlugin],
options: options_humid,
});
var gamma_chart = new Chart(ctx_gamma, {
type: 'scatter',
data: gammaChartData,
plugins: [errorbarPlugin],
options: options_gamma,
});
};
</script>
</div>
</body>
</html>
I had a similar issue with rendered text in
plugins:[{
afterDatasetsDraw: function(chart, options) {
var ctx = chart.ctx;
ctx.font = Chart.defaults.global.defaultFontStyle;
ctx.fillStyle = "#666666";
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
chart.data.datasets.forEach(function(dataset, i) {
var meta = chart.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
ctx.fillText(Math.round(dataset.data[index]), bar._model.x, bar._model.y);
});
});
}
}]
To fix, inside the meta.data.forEach(function (bar, index) { ... } loop, simply use:
var position = bar.tooltipPosition();
ctx.fillText(Math.round(dataset.data[index]), position.x, position.y);
(This is in #Yobmod's post, but it seems the key is to use the bar.tooltipPosition() location for the location of whatever is rendered.)
So I'm using Chart.js to plot a graph on my web app,
What I'm trying to achieve is to control the starting point of the graph itself, so I could control where the scales are located
This is what I have so far:
Eventually, I'm trying to make the scale appear at the center of each "stripe".
I've seen in the documentation that you can extend scales and charts to customize it to your own needs but I tried fiddling with it with no success regarding what I need.
This is an example of what I'm trying to achieve:
Code:
var type = 'line';
var daysArray = new Array(30).join().split(',').map(function (item, index) { ++index; return (index % 5 == 0 || index == 1) ? index : '' })
var data = {
labels: this.daysArray,
datasets: [{
borderColor: "#707bbb",
showLine: false,
fill: false,
pointBackgroundColor: "#707bbb",
pointRadius: 3,
data: [65, 59, 80, 81, 56, 20, 32, 65, 59, 80, 81, 56, 20, 32]
},
{
borderColor: "#2972c5",
borderWidth: 1,
fill: false,
pointRadius: 0,
data: [102, 42, 36, 98, 15, 15, 19, 65, 59, 80, 81, 56, 20, 32]
}
]
};
var options = {
bezierCurve: false,
responsive: true,
maintainAspectRatio: false,
display: false,
scales: {
yAxes: [{
display: false
}],
xAxes: [{
gridLines: {
drawOnChartArea: true,
drawBorder: false
},
ticks: {
fontStyle: "normal",
maxRotation: 0,
labelOffset: 1
}
}]
},
legend: {
display: false
}
};
Chart.pluginService.register({
beforeDatasetsDraw: function (chart, easing) {
if (chart.chartArea) {
var noOfLabels = chart.chart.config.data.labels.length;
var helpers = Chart.helpers;
var ctx = chart.chart.ctx;
//
ctx.save();
var chartArea = chart.chartArea;
var chartWidth = chartArea.right - chartArea.left;
var chartHeight = Math.abs(chartArea.top - chartArea.bottom);
var stripWidth = chartWidth / noOfLabels;
var pattern = document.createElement('canvas');
pattern.width = stripWidth * 2;
pattern.height = chartHeight;
var pctx = pattern.getContext('2d');
pctx.fillStyle = "#f0f2f5";
pctx.fillRect(0, 0, stripWidth, chartHeight);
pctx.fillStyle = "#ffffff";
pctx.fillRect(stripWidth, 0, stripWidth, chartHeight);
var ptr = ctx.createPattern(pattern, "repeat");
ctx.fillStyle = ptr;
ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
ctx.restore();
ctx.save();
}
},
});
Chart.scaleService.getScaleConstructor("category").extend({
margins: {
left: 100
},
paddingLeft: 300
});
this.chart = new Chart(document.querySelector('canvas'), {
type: type,
data: data,
options: options
});
The code is a bit messy because I tried playing with some options and thought I would leave it just there
Anyone has an idea what to do?
I'm new to chart.js and I'm having trouble shading between 2 lines on a line graph. Below is an example of what id like to achieve:
This is an example of what im after
but the base functionality in chart.js version 2 seems to only shade between a line and 0 on the y-axis.
Here is the code for the graph I have so far. I would like to shade between the GTUpper and GTLower lines as these describe a range.
<html>
<div>
<canvas id="myChart"></canvas>
</div>
</html>
<script>
function GenGraph(y) {
// function to generate the graph with chart.js
$(document).ready(function(){
var roomCap = 220
var prediction = [62, 65, 135, 145, 140, 120, 135, 189, 180, 175, 100, 25]
var gndTruthUpper = [75, 100, 150, 175, 150, 150, 175, 200, 175, 150, 125, 100]
var gndTruthLower = [50, 50, 75, 50, 25, 50, 75, 100, 125, 150, 125, 100, 75]
var data = {
labels: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"],
datasets: [{
label: 'prediction',
fill: false,
pointRadius: 0,
borderColor: 'blue',
data: prediction
},{
label: 'GTUpper',
fill: true,
pointRadius: 0,
borderDash: [10, 10],
borderColor: 'black',
data: gndTruthUpper
},{
label: 'GTLower',
fill: false,
pointRadius: 0,
borderDash: [10, 10],
borderColor: 'black',
data: gndTruthLower
}]
};
var options = {
scales: {
yAxes: [{
ticks: {
min: 0,
max: roomCap
}
}]
}
};
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
});
};
</script>
My issue is that any similar stackoverflow posts refer to v1 and the syntax seems to have changed from v1 to v2. I'm a bit lost as to how I can extend the base functionality in this way myself. Any help would be greatly appreciated.
This should do the trick.
And Here is a fiddle of a plugin that will fill between any two datasets.
https://jsfiddle.net/ke5n5LnL/26/
Code:
<html>
<div>
<canvas id="myChart"></canvas>
</div>
</html>
<script>
var fillBetweenLinesPlugin = {
afterDatasetsDraw: function (chart) {
var ctx = chart.chart.ctx;
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
var datasets = chart.data.datasets;
ctx.save();
for (var d = 0; d < datasets.length; d++) {
var dataset = datasets[d];
if (dataset.fillBetweenSet == undefined) {
continue;
}
// get meta for both data sets
var meta1 = chart.getDatasetMeta(d);
var meta2 = chart.getDatasetMeta(dataset.fillBetweenSet);
ctx.beginPath();
// vars for tracing
var curr, prev;
// trace set1 line
for (var i = 0; i < meta1.data.length; i++) {
curr = meta1.data[i];
if (i === 0) {
ctx.moveTo(curr._view.x, curr._view.y);
ctx.lineTo(curr._view.x, curr._view.y);
prev = curr;
continue;
}
if (curr._view.steppedLine === true) {
ctx.lineTo(curr._view.x, prev._view.y);
ctx.lineTo(curr._view.x, curr._view.y);
prev = curr;
continue;
}
if (curr._view.tension === 0) {
ctx.lineTo(curr._view.x, curr._view.y);
prev = curr;
continue;
}
ctx.bezierCurveTo(
prev._view.controlPointNextX,
prev._view.controlPointNextY,
curr._view.controlPointPreviousX,
curr._view.controlPointPreviousY,
curr._view.x,
curr._view.y
);
prev = curr;
}
// connect set1 to set2 then BACKWORDS trace set2 line
for (var i = meta2.data.length - 1; i >= 0; i--) {
curr = meta2.data[i];
if (i === meta2.data.length - 1) {
ctx.lineTo(curr._view.x, curr._view.y);
prev = curr;
continue;
}
if (curr._view.steppedLine === true) {
ctx.lineTo(prev._view.x, curr._view.y);
ctx.lineTo(curr._view.x, curr._view.y);
prev = curr;
continue;
}
if (curr._view.tension === 0) {
ctx.lineTo(curr._view.x, curr._view.y);
prev = curr;
continue;
}
// reverse bezier
ctx.bezierCurveTo(
prev._view.controlPointPreviousX,
prev._view.controlPointPreviousY,
curr._view.controlPointNextX,
curr._view.controlPointNextY,
curr._view.x,
curr._view.y
);
prev = curr;
}
ctx.closePath();
ctx.fillStyle = dataset.fillBetweenColor || "rgba(0,0,0,0.1)";
ctx.fill();
}
} // end afterDatasetsDraw
}; // end fillBetweenLinesPlugin
Chart.pluginService.register(fillBetweenLinesPlugin);
function GenGraph(y) {
// function to generate the graph with chart.js
$(document).ready(function(){
var roomCap = 220
var prediction = [62, 65, 135, 145, 140, 120, 135, 189, 180, 175, 100, 25]
var gndTruthUpper = [75, 100, 150, 175, 150, 150, 175, 200, 175, 150, 125, 100]
var gndTruthLower = [50, 50, 75, 50, 25, 50, 75, 100, 125, 150, 125, 100, 75]
var data = {
labels: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"],
datasets: [{
label: 'prediction',
fill: false,
pointRadius: 0,
borderColor: 'blue',
data: prediction
},{
label: 'GTUpper',
fill: false,
pointRadius: 0,
borderDash: [10, 10],
borderColor: 'black',
data: gndTruthUpper,
fillBetweenSet: 2,
fillBetweenColor: 'rgba(0,0,0,0.1)'
},{
label: 'GTLower',
fill: false,
pointRadius: 0,
borderDash: [10, 10],
borderColor: 'black',
data: gndTruthLower
}]
};
var options = {
scales: {
yAxes: [{
ticks: {
min: 0,
max: roomCap
}
}]
}
};
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
});
};
GenGraph();
</script>
As can be seen, the 2nd,10th & 13th labels (tags in Raphael language) do not appear on mouseover of their respective graph points (at least not in the viewable area). The problem gets worse (ie more missing tags) when you add more points. Anyone know what the issue might be?
var r = Raphael("holder"),
txtattr = {
font: "12px sans-serif"
};
r.text(65, 25, "Basis Points").attr(txtattr);
lines = r.linechart(100, 40, 600, 260, [
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
], [
[12, 32, 23, 15, 17, 27, 22, 12, 32, 23, 15, 17, 27]
],
{
nostroke: false,
axis: "0 0 1 1",
symbol: "circle",
smooth: true
}).hoverColumn(function ()
{
this.tags = r.set();
for (var i = 0, ii = this.y.length; i < ii; i++)
{
this.tags.push(
r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this)
.attr([
{
fill: "#fff"
},
{
fill: this.symbols[i].attr("fill")
}]));
}
}, function ()
{
this.tags && this.tags.remove();
});
lines.symbols.attr(
{
r: 3
});
r.width = 650;
jsfiddle
Issue is due to hover column widths computed correctly, codefix is described in bug report below:
Linechart Column Width Bug