Displaying line chart for multiple months using chart.js - javascript

I have to display a line chart with two different datasets in one single chart. After execution of the query I got the plan_plan and actual_plan of the following form.
plan_plan = 0: {label: "Feb-20", plan_hrs: "20"}
1: {label: "Oct-20", plan_hrs: "94"}
actual_plan = 0: {label: "Mar-20", actual_hrs: "1"}
javacript code:
function show_Graph()
{
{
var plandata = <?php echo json_encode($plan_plan); ?>;
var actualdata = <?php echo json_encode($actual_plan); ?>;
var labels = [];
for (var i in plandata) {
labels.push(plandata[i].label);
}
for (var j in actualdata) {
labels.push(actualdata[j].label);
}
new Chart("scurve_chart", {
type: 'line',
data: {
labels: Array.from(labels),
datasets: [{
label: "Planned Hours",
fill: false,
borderColor: "rgba(255, 0, 0, 1)",
pointHoverBackgroundColor: "rgba(255, 0, 0, 1)",
data: plandata.map(o => ({ x: Number(o.label), y: Number(o.plan_hrs)}))
},
{
label: "Actual Hours",
fill: false,
backgroundColor: "rgba(0, 255, 0, 0.75)",
borderColor: "rgba(0, 255, 0, 1)",
pointHoverBackgroundColor: "rgba(0, 255, 0, 1)",
pointHoverBorderColor: "rgba(0, 255, 0, 1)",
data: actualdata.map(o => ({x: Number(o.label), y: Number(o.actual_hrs)}))
}
]
},
options: {
tooltips: {
callbacks: {
title: (tooltipItem, data) => "Month " + data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].x
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Hours'
}
}],
xAxes: [{
ticks: {
min: 0,
max: 53,
stepSize: 1
},
scaleLabel: {
display: true,
labelString: 'Month'
}
}]
}
}
});
}}
I want to get the month in the format (Jan-20) in x-axis and then plan_hrs and actual_hrs data in y-axis which can be shown as a line chart. And also should show a single point entry even when there are no data points to be connected. I have used the script tags:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
But it is not showing graph when I am including the following script for bootstrap:
<script src="build/js/custom.min.js">

I can help for parsing and displaying the dates on the xAxis but unfortunately I don't know Bootstrap.
Define your xAxis as follows:
xAxes: [{
type: 'time',
time: {
parser: 'MMM-YY',
unit: 'month',
displayFormats: {
month: 'MMM-YY'
}
}
}]
Chart.js internally uses Moment.js, hence you can use the following date/time formats for parsing and displaying the date. In your case, this is 'MMM-YYD'.
const plan_plan = [{label: "Feb-20", plan_hrs: "20"}, {label: "Oct-20", plan_hrs: "94"}];
const actual_plan = [{label: "Mar-20", actual_hrs: "1"}];
new Chart("scurve_chart", {
type: 'line',
data: {
datasets: [{
label: "Planned Hours",
fill: false,
borderColor: "rgba(255, 0, 0, 1)",
data: plan_plan.map(o => ({ x: o.label, y: Number(o.plan_hrs)}))
},
{
label: "Actual Hours",
fill: false,
borderColor: "rgba(0, 255, 0, 1)",
data: actual_plan.map(o => ({x: o.label, y: Number(o.actual_hrs)}))
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
type: 'time',
time: {
parser: 'MMM-YY',
unit: 'month',
displayFormats: {
month: 'MMM-YY'
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="scurve_chart" height="90"></canvas>

Related

How do I edit the label and x-axis of a laravel/chart.js boxplot?

Chart.js translation for plotting on frontend side in Laravel. There is a yield of 3 months dates and their datas. How should I fit charjs that overlap and not all dates are written at the end of x? (texts are overlapping, i dont want it, and I want all the dates to be on the x-axis, I think chartjs skipped it because couldn't fit it.) it is important can you contact with me
var myChart1 = new Chart(ctx1, {
type: 'bar',
data: {
labels: dates,
datasets: [{
label: 'BACKLOG ON HOLD INCIDENTS AVG PERFORMANCE- BURSA',
data: results,
backgroundColor: [
'rgba(76, 196, 23, 0.6)'
],
borderColor: [
'rgba(219, 249, 219, 1)',
],
borderWidth: 1,
}]
},
plugins: [ChartDataLabels],
options: {
plugins:{
legend:{
display:true
},
datalabels:{
color:'blue',
anchor:'end',
font:{
weight:'bold',
size:8
}
}
},
scales: {
y: {
beginAtZero: true
},
x: {
ticks: {
maxRotation: 90,
minRotation: 90,
font: {
size: 8,
}
}
}
},
animation: {
duration: 0
}
}
});

Chartjs year markings

When I make a Chartjs table the background is a plain square pattern. What I would like is to be able to mark the transition from one year to the next with a bolder vertical line at every new year.
In the below example chart, I have 12 quarters. I would like to have a line appear between the Q1s and Q4s. Is this possible?
chart_code = new Chart(ctx, {
type: 'line',
data: {
labels: ['Q1 15','Q2 15','Q3 15','Q4 15','Q1 16','Q2 16','Q3 16','Q4 16','Q1 17','Q2 17','Q3 17','Q4 17'],
datasets: [{
label: 'Teststatistic',
data: [50,40,30,20,50,20,10,10,10,40,30,80],
backgroundColor: ['rgba(0, 105, 146, 1)'],
borderColor: ['rgba(0, 105, 146, 1)'],
borderWidth: 3,
fill: false,
pointStyle: 'rect',
pointRadius: 5
}]
},
options: {
responsive: false,
plugins: {
legend: {
display: false,
boxWidth: 80,
boxHeight: 80
}
},
scales: {
x: {
ticks: {
maxRotation: 0,
minRotation: 0
}
}
}
}

Chartjs bar min, max and avarage value

Hi I have a chart with chartjs, which inserts between min, max, average values, with a bar type chart.
So far, everything is fine, the values are entered, what I want to do is that the bars of the graph are positioned starting from their min on the y axis up to the maximum on the y axis, I do not want the bar to start from the value 0.
dataset = {
labels: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
datasets: [{
label: 'min',
borderWidth: 4,
borderColor: "#ef4931",
backgroundColor: "#ef4931",
borderJoinStyle: 'miter',
pointHitRadius: 10,
data: data[1],
fill: false,
},
{
label: 'avg',
borderWidth: 4,
borderColor: "#ef4931",
backgroundColor: "#ef4931",
borderJoinStyle: 'miter',
pointHitRadius: 10,
data: data[0],
fill: "-1",
},
{
label: 'max',
borderWidth: 4,
borderColor: "#ef4931",
backgroundColor: "#ef4931",
borderJoinStyle: 'miter',
pointHitRadius: 10,
data: data[2],
fill: "-1",
}
]
};
options = {
legend: {
display: false,
},
title: {
display: true,
position: 'bottom',
fontSize: 14
},
tooltips: {
mode: 'index',
intersect: false,
titleFontStyle: "bold",
titleFontColor: "rgba(255, 255, 255, 1)",
bodyFontStyle: "normal",
bodyFontColor: "rgba(255, 255, 255, 1)",
backgroundColor: "rgba(102, 102, 102, 1)",
borderWidth: 1,
bodySpacing: 5,
xPadding: 15,
yPadding: 15,
displayColors: false,
callbacks: {
title: function(item, data) {
var title = "";
title += item[0].xLabel;
return title;
}
}
},
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked: true,
barThickness: 10,
}],
yAxes: [{
stacked: true,
display: true,
scaleLabel: {
display: true,
fontSize: 14,
fontStyle: "bold",
},
ticks: {
callback: function(value, index, values) {
return parseInt(value) + " bpm";
},
}
}]
},
animation: {
duration: 1000,
easing: "easeInOutQuad"
}
};
myChart.config.data = dataset;
myChart.options = options;
myChart.config.type = "bar";
myChart.update();
in your y axes config you can add the prop suggestedMin or min between the stacked and display prop. With this the scale will start at that number, here you can put in the value of the lowest bar.
SuggestedMin will go lower if there is a bar with a lower value, if you use min if will use that as a final so if you have a bar with a lower value it wont get shown.
You can combine "floating bars" and "stacked bar chart". See https://codepen.io/fantasyzer/pen/KKaqgoM for an example. Note that the data of each bar is given as an array [Ybegin,Yend]. If you set stackable to false for the y scale the values are to be given as absolute:
datasets: [
{
data: [
[10,12],
[20,25],
[15,25],
[25,28],
...
Ref:
https://www.chartjs.org/docs/latest/samples/bar/floating.html, https://www.chartjs.org/docs/latest/samples/bar/stacked.html

Displaying line chart for multiple datasets using chart.js

I have to display a line chart with two different datasets in one single chart. After execution of query I got the plan_plan and actual_plan of the following form.
plan_plan = 0: {week: "46", planned_del: "20"}
1: {week: "53", planned_del: "94"}
actual_plan = 0: {week: "8", actual_del: "1"}
javascript part:
function show_Graph()
{
{
var plandata = <?php echo json_encode($plan_plan); ?>;
var actualdata = <?php echo json_encode($actual_plan); ?>;
console.log(plandata);
var labels = [];
var plandel = [];
var actualdel = [];
for (var i in plandata) {
labels.push(plandata[i].week);
plandel.push(plandata[i]);
}
for (var j in actualdata) {
labels.push(actualdata[j].week);
actualdel.push(actualdata[j]);
}
var chartdata = {
labels: labels,
datasets: [
{
label: "Planned Deliverables",
fill: false,
borderColor: "rgba(255, 0, 0, 1)",
pointHoverBackgroundColor: "rgba(255, 0, 0, 1)",
data: plandel
},
{
label: "Actual Deliverables",
fill: false,
backgroundColor: "rgba(0, 255, 0, 0.75)",
borderColor: "rgba(0, 255, 0, 1)",
pointHoverBackgroundColor: "rgba(0, 255, 0, 1)",
pointHoverBorderColor: "rgba(0, 255, 0, 1)",
data: actualdel
}
]
};
var graphTarget = $("#scurve_chart");
var barGraph = new Chart(graphTarget, {
type: 'line',
data: chartdata,
options: {
elements: {
point:{
radius: 1,
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
barValueSpacing: 2,
barPercentage: 0.2
}]
}
}
});
}}
I want to get the week in x axis and then planned_del and actual_del data in y axis which can be shown as line chart. And also should show a single point entry even when there is no data points to be connected.
One way for achieving this, would be to defined data.labels as an array of numbers from 0 to 53.
labels: [0, 1, 2, ... 53]
The data inside the two datasets would then only contain the definitions of individual points.
data: [{ x: 46, y: 20 }, { x: 53, y: 94 }] // plandata
...
data: [{ x: 8, y: 1}] // actualdata
Here's the JavaScript part that illustrates how the desired result can be obtained.
var plandata = [{ week: "46", planned_del: "20" }, { week: "53", planned_del: "94" }];
var actualdata = [{ week: "8", actual_del: "1" }];
new Chart("scurve_chart", {
type: 'line',
data: {
labels: Array.from(new Array(54), (x, i) => i),
datasets: [{
label: "Planned Deliverables",
fill: false,
borderColor: "rgba(255, 0, 0, 1)",
pointHoverBackgroundColor: "rgba(255, 0, 0, 1)",
data: plandata.map(o => ({ x: Number(o.week), y: Number(o.planned_del)}))
},
{
label: "Actual Deliverables",
fill: false,
backgroundColor: "rgba(0, 255, 0, 0.75)",
borderColor: "rgba(0, 255, 0, 1)",
pointHoverBackgroundColor: "rgba(0, 255, 0, 1)",
pointHoverBorderColor: "rgba(0, 255, 0, 1)",
data: actualdata.map(o => ({x: Number(o.week), y: Number(o.actual_del)}))
}
]
},
options: {
tooltips: {
callbacks: {
title: (tooltipItem, data) => "Week " + data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].x
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
min: 0,
max: 53,
stepSize: 1
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="scurve_chart" height="90"></canvas>

chart js how to fill legend box with colour

I'm using Chart.js for line charts and I have the legend as below.
The problem is that the legend only has an outline color, I want the legend box to have the whole thing colored. I haven't found anything in the documentation to see why mine only has the border. I'm at a bit of a loss, here's an example of my setup:
var LinuxDistributionsCombined = document.getElementById('LinuxDistributionsCombined');
var myChart = new Chart.Line(LinuxDistributionsCombined, {
type: 'line',
data: {
labels: ['Jul-2016', 'Sep-2016', 'Oct-2016', 'Dec-2016', 'Jan-2017', 'Feb-2017', 'Mar-2017', 'Apr-2017', 'May-2017', 'Jun-2017', 'Jul-2017', 'Aug-2017', 'Sep-2017', 'Oct-2017'],
datasets: [{
label: 'Ubuntu-based',
fill: true,
data: [0, 0, 0, 0, 51.37, 51.04, 50.64, 50.29, 49.6, 48.32, 47.95, 47.03, 46.42, 46.21],
borderColor: '#a6cee3',
borderWidth: 1
}, {
label: 'Arch-based',
fill: true,
data: [0, 0, 0, 0, 28.52, 28.53, 28.75, 29.02, 29.16, 30.42, 30.65, 31.29, 31.53, 31.93],
borderColor: '#1f78b4',
borderWidth: 1
}, {
label: 'Solus',
fill: true,
data: [0, 0, 0, 0, 0.42, 0.45, 0.61, 0.64, 0.92, 1.12, 1.08, 1.21, 1.23, 1.46],
borderColor: '#6a3d9a',
borderWidth: 1
}]
},
options: {
legend: {
display: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Percentage of users'
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var label = data.datasets[tooltipItem.datasetIndex].label;
return label + ' ' + value + '%';
}
},
},
}
});
You have to set the backgroundColor property for each of your datasets as well, as that is correspondent to legend box­'s fill color.
...
datasets: [{
label: 'Ubuntu-based',
fill: true,
data: [0, 0, 0, 0, 51.37, 51.04, 50.64, 50.29, 49.6, 48.32, 47.95, 47.03, 46.42, 46.21],
backgroundColor: '#a6cee3',
borderColor: '#a6cee3',
borderWidth: 1
}, {
label: 'Arch-based',
fill: true,
data: [0, 0, 0, 0, 28.52, 28.53, 28.75, 29.02, 29.16, 30.42, 30.65, 31.29, 31.53, 31.93],
backgroundColor: '#1f78b4',
borderColor: '#1f78b4',
borderWidth: 1
}, {
label: 'Solus',
fill: true,
data: [0, 0, 0, 0, 0.42, 0.45, 0.61, 0.64, 0.92, 1.12, 1.08, 1.21, 1.23, 1.46],
backgroundColor: '#6a3d9a',
borderColor: '#6a3d9a',
borderWidth: 1
}]
...
var ct = document.getElementById('myChart').getContext('2d');
var Chart = new Chart(ct, {
type: 'line',
data: {
datasets: [{
label: 'test',
data:[1,10],
backgroundColor: "rgb(0, 0, 0, 0)",
borderColor: "rgb(0, 0, 255)",
pointBackgroundColor: "rgb(0, 0, 255)",
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
},
yAxes: [{
scaleLabel: {
display: true,
labelString: 'test'
}
}]
}
},
plugins: [{
beforeDraw: function(c) {
var legends = c.legend.legendItems;
legends.forEach(function(e) {
e.fillStyle = 'red';
});
}
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="300"></canvas>

Categories