Develop Reference

Sum of results filtered by month in a chart [LARAVEL]

I am currently trying to do a chart with chart.js, and I would like to get the total number of sales over a year in 1 month increments. I'm currently wondering how to break down the number of sales I make every month knowing that I have the "created_at" column for each order. I know how to do the total for each month with a foreach loop, but to cut out the sales and put the total in a table, I don't see how I could do it.
This is what my table looks like:
This is what my chart looks like:
moment().locale('fr');
var canvas = document.getElementById("bellegaiaChart");
var ctx = canvas.getContext('2d');
// Global Options:
Chart.defaults.global.defaultFontColor = 'black';
Chart.defaults.global.defaultFontSize = 16;
var data = {
labels: ["Jan", "Fev", "Mar", "Avr", "Mai", "Juin", "Jui", "Aoû", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Ventes",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(225,0,0,0.4)",
borderColor: "red", // The main line color
borderCapStyle: 'square',
borderDash: [], // try [5, 15] for instance
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "black",
pointBackgroundColor: "white",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
// notice the gap in the data and the spanGaps: true
data: [65, 59, 80, 81, 56, 110, 40 ,60,55,30,78],
spanGaps: false,
}, {
label: "Nouveaux Clients",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(167,105,0,0.4)",
borderColor: "rgb(167, 105, 0)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "white",
pointBackgroundColor: "black",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "brown",
pointHoverBorderColor: "yellow",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
// notice the gap in the data and the spanGaps: false
data: [10, 20, 60, 95, 64, 78, 90,70,40,70,89, 73],
spanGaps: false,
}
]
};
// Notice the scaleLabel at the same level as Ticks
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Moola',
fontSize: 20
}
}]
}
};
// Chart declaration:
var myBarChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
This chart is currently integrated in my blade view.
The goal would be to have a table containing all the sales totals per month (so 12 entries in the table) in order to be able to specify it in the data of my chart.

Why did my graphs from chart.js lost its animation?

I am making charts from chart.js. At first I can see the animation in my line graph and pie chart but now the line graph doesn't show it's animation but my pie chart works fine.
line graph/chart:
<div class="middle">
<div class="lineGraph">
<canvas id="lineChart"></canvas>
<script>
const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART, {
type: 'line',
data: {
labels: ["January", "Feburary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
datasets: [
{
label: "Sales Trend",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75, 192, 192, 0.4)",
borderColor: "rgba(75, 192, 192, 1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffSet: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75, 192, 192, 1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRaduis: 5,
pointHoverBackgroundColor: "rgba(75, 192, 192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRaduis: 1,
pointHitRaduis: 10,
data: [65, 59, 80, 81, 56, 55, 40, 36, 77, 21, 44, 60]
}
]
},
options:{
scales:{
yAxes:[{
ticks:{
beginAtZero: true
}
}]
},
animation:{
duration: 4000,
easing: "linear"
}
}
});
</script>
</div>
<div class="pieGraph">
<canvas id="pieChart"></canvas>
<script>
const chrt = document.getElementById("pieChart");
Chart.defaults.scale.ticks.beginAtZero = true;
console.log(chrt);
let pieChart = new Chart(chrt,{
type: 'pie',
data: {
labels: ['Male', 'Female'],
datasets: [
{
label: 'Points',
backgroundColor:['#2980b9', '#ff4d4d'],
data: [70, 30]
}
]
},
options:{
animation: {
animateScale: true
}
}
});
</script>
</div>
At first it didn't have the animation options but still I can the animation. So, I thought it was default. But apparently it doesn't show its animation anymore that is why I added the animation option but there is still no animation being seen.

Chart.JS Multiline Chart with unknown numbers of Lines from JSON

I try do to a Multi - Linechart with chart.js. I have a json dataset from a database. The number of dataset can be different. Here is a example (x can be more) with JSON Data.
[{"name":"name1","jan":4067.5,"feb":1647,
"mrz":1375,"apr":10191,"mai":0,"jun":28679,"jul":59502},
{"name":"name2","jan":47548,"feb":63280.5,
"mrz":51640.26,"apr":75029,"mai":41137,"jun":89114.26,"jul":77332},
{"name":"name3","jan":38099,"feb":55023.5,
"mrz":62668,"apr":39482,"mai":44193.3,"jun":52826.5,"jul":77072},
{"name":"namex","jan":34930.5,"feb":36831.5,
"mrz":24391,"apr":35051,"mai":38038,"jun":12700,"jul":51080}]
I have abbreviated the example, in reality it is until December.
I try to do a chart with a line for every name. The X-axis should be the months of January to December and the Y-axis sales.
34/5000

From what I understand, your dataset will get dynamically updated.
You can just change your dataset then call the update() function.
For example:
First initialize your chart with all the data using:
var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "name 1",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(225,0,0,0.4)",
borderColor: "red",
borderCapStyle: 'square',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "black",
pointBackgroundColor: "white",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40, ,60,55,30,78]
}, {
label: "name 2",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(167,105,0,0.4)",
borderColor: "rgb(167, 105, 0)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "white",
pointBackgroundColor: "black",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "brown",
pointHoverBorderColor: "yellow",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [10, 20, 60, 95, 64, 78, 90,,70,40,70,89]
}
]
};
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Moola',
fontSize: 20
}
}]
}
};
// Chart declaration:
var myBarChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
Then if you later want to update your data, you can just:
myBarChart.data.datasets = [{
label: "name 3",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(167,105,0,0.4)",
borderColor: "rgb(167, 105, 0)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "white",
pointBackgroundColor: "black",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "brown",
pointHoverBorderColor: "yellow",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [10, 20, 60, 95, 64, 78, 90,,70,40,70,89]
},
...............
];
myBarChart.update();
Also, you will need to format your data in a way that can be used with the charts.
Format your data so that you can create a proper dataset.

Chartjs real time graph x axis movement

I want to display a chart with Chartjs which displays real time data and slowly scrolls along the x axis, I have tried it here with js fiddle and it just jumps like crazy up and down: https://jsfiddle.net/rsnufpq7/
The graph should just move to the left side with the old points out of view without this animation like in the second example here: https://bost.ocks.org/mike/path/
var canvas = document.getElementById('myChart');
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.0,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: [65, 59, 80, 0, 56, 55, 40],
}
]
};
var zero = 7;
function adddata(){
var value = Math.floor((Math.random() * 10) + 1);;
myLineChart.data.labels.push(zero);
myLineChart.data.labels.splice(0, 1);
myLineChart.data.datasets[0].data.splice(0, 1);
myLineChart.data.datasets[0].data.push(value);
myLineChart.update();
zero++;
}
setInterval(function(){
adddata();
},1000);
var option = {
showLines: true
};
var myLineChart = Chart.Line(canvas,{
data:data,
options:option
});

Your code works as expected, only thing that you are missing is your y axis does not have range defined and it is being dynamically adjusted.
In order to achieve this I have extended your options to look like this.
var option = {
showLines: true,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero:true,
min: 0,
max: 100
}
}]
}
};
I have defined min and max value for y axis and it is not jumping anymore.
Here is a working fiddle

How to call back one js file from another js file?

I have two javascript files baseChart.js and chart.min.js. I don't want to include my chart.min.js into index.html file. I just want to include baseChart.js in my index.html.
`var s = document.createElement("script");
s.setAttribute("src","js/Chart.min.js");
document.head.appendChild(s);
class BaseChart{
constructor(area, settings) {
this.area = area;
this.settings = settings;
}
a() {
new Chart(this.area, this.settings);
console.log("BaseChart");
}
}
class BarChart extends BaseChart {
constructor(area, settings) {
super(area, settings);
}
/* constructor(ctx) {
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
},
{
label: "Second",
data: [12, 56, 45, 23, 78, 23, 90],
}
]
};
var lineChart = new Chart(ctx, {
type: 'line',
data: data
});
} */
b() {
super.a();
}
}`
Currently, this is the baseChart.js file and when I am trying to run this code, I am getting error "Chart is not defined because I used 'new Chart(this.area, this.settings);' and chart.min.js is not initialized before I call this method.". I want to initialize chart.min.js before this classes and method are initialized. I used chart.js library. So, what should I do?

I suggest you install chart.js via npm
npm install chart.js --save
and then import it like that:
// ES6
import Chart from 'chart.js';
I'm assuming that you're using some kind of bundler like webpack to make code above works. If not you have to include chart.min.js in your index file before baseChart.js