How to optimize chart data | ChartJS - javascript

My question is about chartJS.
I have Chart type line with 2 datasets the data is about members evrey 3 minutes in 24 hour.
The thing is that its a lot of data about 1500 rows of sql table.
The problem im getting with is that because there is alot of data the chart is looking awful.
My question is there is any way how can I optimize it so it will look better?
The chart is based on ChartJS
This is the code of the chart settings -
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: <?php echo json_encode($cnnlsTime) ?> ,
datasets: [
{
label: "CNNls Members",
lineTension: 0.1,
backgroundColor: "rgba(255,165,0,0.2)",
borderColor: "rgba(2,117,216,1)",
pointRadius: 1,
pointBackgroundColor: "rgba(2,117,216,1)",
pointBorderColor: "rgba(255,255,255,0.8)",
pointHoverRadius: 2,
pointHoverBackgroundColor: "rgba(2,117,216,1)",
pointHitRadius: 50,
pointBorderWidth: 2,
data: <?php echo json_encode($cnnlsMembers) ?> ,
},
{
label: "CNNSF Members",
lineTension: 0.1,
backgroundColor: "rgba(255,165,0,0.2)",
borderColor: "rgba(2,117,216,1)",
pointRadius: 1,
backgroundColor: "rgba(2,117,216,1)",
pointBorderColor: "rgba(255,255,255,0.8)",
pointHoverRadius: 2,
pointHoverBackgroundColor: "rgba(2,117,216,1)",
pointHitRadius: 50,
pointBorderWidth: 2,
data: <?php echo json_encode($cnnsfMembers) ?> ,
},
],
},
options: {
scales: {
xAxes: [{
time: {
unit: 'time'
},
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 400
}
}],
yAxes: [{
ticks: {
min: 0,
max: 30,
maxTicksLimit: 5
},
gridLines: {
color: "rgba(0, 0, 0, .125)",
}
}],
},
legend: {
display: false
}
}
});
Any suggestions?

Related

One common component for Chart.js to use with different y-axis With React.js

useEffect(() => {
let ctx = document.getElementById("LineChart");
const blue = [2000, 2100, 2400, 2450, 3000];
const yellow = [1800, 2150, 2550, 2800, 2000];
const pink = [1200, 1100, 1050, 1010, 1000];
const LineChart = new Chart(ctx, {
type: "line",
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May"],
datasets: [
{
data: blue,
label: "New MRR",
fill: false,
lineTension: 0.5,
backgroundColor: "#3ea5e0",
borderColor: "#3ea5e0",
pointBorderWidth: 1,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointRadius: 1,
pointHitRadius: 10,
},
{
data: yellow,
label: "Net New MRR",
fill: false,
lineTension: 0.5,
backgroundColor: "#ad9a52",
borderColor: "#ad9a52",
pointBorderWidth: 1,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointRadius: 1,
pointHitRadius: 10,
},
{
data: pink,
label: "Lost MRR",
fill: false,
lineTension: 0.5,
backgroundColor: "#5c3784",
borderColor: "#5c3784",
pointBorderWidth: 1,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointRadius: 1,
pointHitRadius: 10,
},
],
},
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: false,
callback: function (value, index, values) {
return "$" + value;
},
},
},
],
},
},
});
let ctx2 = document.getElementById("BarChart");
const BarChart = new Chart(ctx2, {
type: "bar",
data: data,
});
I want to create a common chart component with same x-axis values but different y-axis values.I have switch case according to their type.So I can render charts with their types.Is there a short way to create a common chart or do I have to code all of them? Because right now I can only render one line chart.
Here is how you can create a common Chart component which will draw the chart given a custom data.
https://codesandbox.io/s/serverless-frog-6bu2f?file=/src/App.js

Change legend style from bar to line chart.js 2.4.0

I am using chart.js(2.4.0) for graph and i need to change the legend style from bar to line I am unable to do that.
How can i change legend from bar to line.
Following is my code
renderChart(id, labels, label1, label2, data1, data2, borderDash = [], pointRadius = 3, backgroundColor = '#36a1eb') {
data2 = data2 || [];
const options = {
type: 'line',
data: {
labels: labels,
datasets: [{
fill: false,
lineTension: 0.1,
backgroundColor: backgroundColor,
borderColor: '#36a1eb',
lineColor: '#36a1eb',
strokeColor: '#36a1eb',
borderCapStyle: 'butt',
borderDash: borderDash,
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: '#36a1eb',
pointBackgroundColor: '#36a1eb',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: '#36a1eb',
pointHoverBorderColor: '#36a1eb',
pointHoverBorderWidth: 2,
pointRadius: pointRadius,
pointHitRadius: 10,
label: label2,
data: data2,
borderWidth: 2
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false,
beginAtZero: false
},
scaleLabel: {
display: true,
labelString: 'Value'
}
}],
xAxes: [{
ticks: {
reverse: false,
beginAtZero: false
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
}
}
};
How can i do this?
I searched all of the documentation of the chart.js but still unable to modify it to line.
The configuration options are available at
https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
Have you tried boxWidth or usePointStyle?

How to fix the distance between horizontal points (x-axis) in chartJS

Problem: Hi all! i am using chart.js to draw the charts. chart is a dynamic sometimes shows 10 points and sometimes can be more than thousand i have applied a panel successfully so that my points can be shown at some distance to read them easily.
Right now i want to know if there is any option to set the distance between points in x-axis grid. right now it automatically adjust the points.
What i tried:
i tried to do the stepsize and scalewidth by searching other stackoverflow answers but did not succeed. Any kind of help would be much appreciated.
P.S: i m using chart.js2
This is my chartjs dataset
var data = {
labels: data.graph_date,
datasets: [
{
label: 'Assay Values',
fill: false,
lineTension: 0,
backgroundColor: "rgba(255, 0, 0,1)",
borderColor: "rgba(255, 0, 0,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderWidth: 1,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(255, 0, 0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(255, 0, 0,1)",
pointHoverBorderColor: "rgba(255, 0, 0,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: data.assay_value,
spanGaps: false
},var options = {
responsive: false,
title: {
display: true,
position: "top",
text: label,
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var multistringText = ['Assay Value: '+tooltipItems.yLabel];
multistringText.push('Assigned Value: '+assigned_value[tooltipItems.index]);
multistringText.push('Sample ID: '+sample_id[tooltipItems.index]);
return multistringText;
}
}
},
scales:{
yAxes:[{
ticks:{
min:graph_min
}
}],
xAxes: [{
gridLines: {
display:false
}
}]
}
};
if(new_chart[ctx.canvas.id] != null)
new_chart[ctx.canvas.id].destroy();
new_chart[ctx.canvas.id] =new Chart(ctx, {
type: 'line',
data: data,
options: options
});
In x-axis there is data like this
[19-Aug-2015,21-Aug-2015,21-Aug-2015,21-Aug-2015,21-Aug-2015,22-Aug-2015,27-Aug-2015,29-Aug-2015,1-Sep-2015,2-Sep-2015,3-Sep-2015,]
in y-axis data is like this
[0.1,0.05,0.89,0.89,0.79,0.58,0.68,0.25,0.98]
The way to control distance between points it to set the X and Y axis with a min, max, and step size so that they never change regardless of the number of points that are in the chart.
Here is an example that sets the scales so that they will never change. Regardless of how many points appear on the chart everything will stay the same.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Points',
data: [
{x: 0, y: 2},
{x: 1, y: 3},
{x: 2, y: 2},
{x: 1.02, y: 0.4},
{x: 0, y: -1}
],
backgroundColor: 'rgba(123, 83, 252, 0.8)',
borderColor: 'rgba(33, 232, 234, 1)',
borderWidth: 1,
fill: false,
showLine: false,
}],
},
options: {
title: {
display: true,
text: 'Chart.js - Fixed X and Y Axis',
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
min: -1,
max: 8,
stepSize: 1,
fixedStepSize: 1,
}
}],
yAxes: [{
ticks: {
min: -2,
max: 4,
stepSize: 1,
fixedStepSize: 1,
}
}]
}
}
});
Here is a codepen example that demonstrates what this looks like

Hide scale bar on label click in Charts.js

I have a simple Charts.js Line Chart with two datasets (lines).
When I click on one of the legend labels, the visibility of the lines in the chart is toggled, but the vertical scale bar still appears. My question is how to make the vertical scale bar to shown and hidden alongside to the line?
var data = {
labels: [1, 2, 3, 4],
datasets: [
{
label: "(Mbps) UP",
fill: false,
yAxisID: "y-axis-upstream",
backgroundColor: "#98B954",
borderColor: "#98B954",
pointBorderColor: "#98B954",
pointBackgroundColor: "#fff",
pointHoverBackgroundColor: "#98B954",
pointHoverBorderColor: "#98B954",
data: [1, 2, 3, 4]
},
{
label: "(Mbps) DOWN",
fill: false,
yAxisID: "y-axis-downstream",
backgroundColor: "#BE4B48",
borderColor: "#BE4B48",
pointBorderColor: "#BE4B48",
pointBackgroundColor: "#fff",
pointHoverBackgroundColor: "#BE4B48",
pointHoverBorderColor: "#BE4B48",
data: [10, 22, 33, 43]
}
]
};
var options = {
title: {
display: true,
text: "Chart Title"
},
legend: {
display: true,
position: "top"
},
scales: {
yAxes: [
{
id: "y-axis-upstream",
type: "linear",
display: true,
position: "left",
stepSize: 0.1,
fixedStepSize: 0.1,
gridLines: {
color: "rgba(152, 185, 84, 0.4)"
},
ticks: {
display: true,
fontColor: "#98B954"
}
},
{
id: "y-axis-downstream",
type: "linear",
display: true,
position: "right",
stepSize: 0.1,
fixedStepSize: 0.1,
gridLines: {
color: "rgba(190, 75, 72, 0.2)"
},
ticks: {
display: true,
fontColor: "#BE4B48"
}
}
]
}
};
var ctx = document.getElementById("chartID");
var chart = new Chart(ctx, {
type: type,
data: data,
options: options
});

Chartjs Linechart label in wrong position

I'm using chartjs2 and I have 2 charts on a page. The first have a bar and a line chart. There the position of the label on the X axis are good.
But with chart 2, where I have 2 line charts the label are at the wrong position. I want to add some padding either for the labels or for the lines.
Here the numbers should exactly under the points, so I would preffer to push the linecharts to the right side, as it's on the first picture.
Update: Fiddle example
var ctx = document.getElementById("compare");
new Chart(ctx, {
type: 'bar',
data: {
labels: [1, 2, 3, 4],
datasets: [
{
type: 'line',
label: 'First',
data: [0, 0, 0, 0, 0],
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(254, 241, 231, 0.6)",
borderColor: "#ff6600",
pointBackgroundColor: "#f76420",
pointBorderColor: "#f5c09e",
pointBorderWidth: 2,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#f76420",
pointHoverBorderColor: "#f5c09e",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10
},
{
type: 'line',
label: 'Second',
data: [0, 8, 12, 6, 0],
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(224, 224, 224, 0.6)",
borderColor: "#e0e0e0",
pointBackgroundColor: "#e0e0e0",
pointBorderColor: "#f5c09e",
pointBorderWidth: 2,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#f76420",
pointHoverBorderColor: "#f5c09e",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10
}
]
},
options: {
legend: {
display: false
},
tooltips: {
mode: 'label'
},
scales: {
yAxes: [{
ticks: {
max: 13,
min: 0,
stepSize: 4,
fontColor: '#e0e0e0'
}
}],
xAxes: [{
gridLines: {
display: false,
drawBorder: false
}
}]
}
}
});

Categories

Resources