I have a graph with geographical points
On the Y axis I display the elevations
On the x axis I display the distance of the points from the starting point
I would like these distances to be grouped in 5 km increments
My graph
const elevations = [200,220,210,230,250,180,220...]//350 items
const distances = [0,500,1700,2300,2900,3420,3780,4250,5230,...]//350 items
const labels = ['0km', '2.81 km', '5.11 km', '7.41 km', '9.71 km', '12.01 km', '14.31 km', '16.62 km', '18.92 km', '21.21 km', '23.51 km', '25.80 km', '28.10 km', '30.39 km'];
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Elevation',
data: elevations,
borderWidth: 3,
borderColor: '#F568000',
backgroundColor: '#FF0000',
fill: 'start'
}]
}
});
Here is the desired end result at the bottom of the page
https://www.famenneardenne.be/se-balader/a-velo/?mb_minnumpage=1&mb_maxnumpage=2&mb_page=circuit&mb_id=49332&mb_titre=marche-en-famenne-circuit-vtt-vert&mbScrollTo=module
Thanks you
Related
Is their a way to rotate the legend on the left side of a bar chart vertically (in chartjs)? I can't seem to find it in the documentation.
Current:
Wanted:
Code:
chartData is an array containing the char data where chartData["yas"] is equal to the "Samples" legend title
let myChart = new Chart(chart, {
type: 'bar',
data: {
labels: chartData['labels'],
datasets: [{
label: chartData["yas"],
data: chartData['values'],
backgroundColor: '#6FB98F'
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'left'
}
},
scales: {
y: {
ticks: {
beginAtZero:true,
minRotation : 0
}
}
}
}
});
This is not possible with the current implementation of the legend in chart.js. You have 2 options, you can use a html legend and rotate that 90 degree with css. Or you can take the legend plugin as a basis and write the functionality yourself to rotate it and either use it or make a pr and get it into the main lib.
I have been working on a broadband management website.I want to show the user how much data he/she has used.For example if the total data they have in their name is 300GB.If they have used 150GB the remaining is 150GB right?.How to do i visualize this using a doughnut chart,Using ChartJS.
I have some code going but im not sure how to accomplish this please help me out
var ctx = document.getElementById('myChart').getContext('2d');
var constdata=document.getElementById("constantdata").textContent;
var data=document.getElementById("data").textContent;
console.log(data);
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'doughnut',
// The data for our dataset
data: {
datasets: [{
label: 'My First dataset',
backgroundColor: ['red','green'],
borderColor: 'rgb(255, 99, 132)',
data: [300,150] //300 being the total data,150 being the data used
}]
},
// Configuration options go here
options: {}
But the above code isnt working out.Assume a doughnut chart,If the used data is 150GB(out of 300).The doughnut
chart must be like image1(please refer image 1)
But im getting image2(please refer image 2)
https://i.stack.imgur.com/nFTym.png //image 1
https://i.stack.imgur.com/MG99s.png //image 2
Assuming that the used data should appear in red, data should be defined as follows:
data: [used, total - used]
Please have a look at your amended code sample below.
const total = 300;
const used = 100;
var chart = new Chart(document.getElementById('myChart'), {
type: 'doughnut',
data: {
datasets: [{
label: 'My First dataset',
backgroundColor: ['red', 'green'],
borderColor: 'rgb(255, 99, 132)',
data: [used, total - used]
}]
},
options: {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="90"></canvas>
Sometimes chart value is the same height as chart height. For example im my picture red bar is 6, the same as y-axis top number. Can I add some buffer so chart bar never reaches top of y axis? Lets say y axis would go to 7 now (or similar).
Image show my problem (open image in new window for better view)
By Axis Range Settings
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#axis-range-settings
suggestedMax: 7
1/2. Static max value example
Change min to 10 and max to 90 (For data[30, 40, 50, 60]).
let chart = new Chart(ctx, {
type: 'line',
responsive: true,
data: {
datasets: [{
label: 'First dataset',
data: [30, 40, 50, 60]
}],
labels: ['January', 'February', 'March', 'April']
},
options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: 10,
suggestedMax: 90
}
}]
}
}
});
<canvas id="ctx" width="800" height="350"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
2/2. Dynamic "buffer"
First no one solution for this idea (The max value related to your data structure). For the most basic data structure (Flat), this is one solution:
Get the max value of [20,40,60, 80] ==> 80
updateScaleDefaults Change max y-axis to max + buffer (20 in this example)
updateScaleDefaults - The default configuration for a scale can be easily changed using the
scale service. All you need to do is to pass in a partial
configuration that will be merged with the current scale default
configuration to form the new default. https://www.chartjs.org/docs/latest/axes/#updating-axis-defaults
Example:
For data: [20,40,60, 80]
/* data */
var data = {
labels: ["Africa", "Asia", "Europe", "America"],
datasets: [{
/* data */
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f", '#1d49b8'],
data: [20,40,60, 80]
}]
};
/* buffer trick */
var buffer = 20;
const dataSet = data.datasets[0].data;
console.log("data: " + dataSet);
/* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max */
var maxDATAvalue = Math.max(...dataSet);
var maxValuePlusBuffer = maxDATAvalue + buffer;
console.log("max value(" + maxDATAvalue + ") / Plus Buffer(" + maxValuePlusBuffer + ")");
/* The default configuration for a scale can be easily changed using the scale service. */
/* https://www.chartjs.org/docs/latest/axes/#updating-axis-defaults */
Chart.scaleService.updateScaleDefaults('linear', {
ticks: {
max: maxValuePlusBuffer
}
});
var options = {
responsive: true,
title: {
text: 'Set max value to max(data) + Buffer',
display: true
},
scales: {
xAxes: [{
stacked: true,
ticks: {
},
}],
yAxes: [{
stacked: true,
}]
}
};
var myChart = new Chart(document.getElementById("chart"), {
type: 'bar',
data: data,
options: options
});
<canvas id="chart" width="800" height="350"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
Related Stackoverflow Q:
How to set max and min value for Y axis
ChartJS: How to set fixed Y axis max and min
I created a line chart with chart.js and when I populate it, the last column is wider than the previous columns. It has divided the dataset by the number of display columns and put the remainder into the final column. The number of data points varies and is greater than the number of columns and I have no idea either how many data points there will be or how many columns chart.js will chose to display. I can truncate the data in order to force the last column to match, but I don't know how many columns it's going to create before it renders the graph.
Is there a way to accomplish what I'm trying to do?
Update:
var options = {
layout: {
padding: {
top: 5
}
},
responsive: true,
legend: {
display: true,
position: 'bottom',
// disable legend onclick remove slice
onClick: null
}
};
var dataset = new Object();
dataset = [{
label: '',
data: [],
fill: false,
borderColor: "rgb(75, 192, 192)",
pointBackgroundColor: '#000000',
pointRadius: 1
}, {
label: 'Set Point',
data: [],
fill: false,
borderColor: "rgb(192, 192, 75)",
pointRadius: 1
}];
var lineChart = new Chart(graph, {
type: 'line',
data: {
labels: [],
datasets: dataset
},
options: options
});
lineChart.config.data.datasets[0].label = sensor.Name;
for (var i = 0; i < tempLen; i++) {
var tempData = sensor.TemperatureData[i];
lineChart.config.data.labels.push(new Date(tempData.Timestamp).format('Y-m-#d #H:i'));
lineChart.config.data.datasets[0].data.push(tempData.Value);
lineChart.config.data.datasets[1].data.push(sensor.SetPoint);
}
lineChart.update(0);
My values are ranging from 0 to -6000... However, chart.js line chart is drawing the y-axis starting from 0 down up to -25000... The lines therefore almost overlap each other. How can I prevent the y-axis from drawing those excess values so my chart will look bigger.
Config is as follows:
type: 'line',
data: {
labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
datasets: [
{
label: 'Sample',
data: [0, -2000, -1500, -1300, -4000, -4800, -4950]
}
]
}