I have an add data function in my bar-chart but I would like to be able to remove this data with onclick. How do I do this?
var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');
// We are only changing the chart type, so let's make that a global variable along with the chart object:
var chartType = 'bar';
var myBarChart;
// Global Options:
Chart.defaults.global.defaultFontColor = 'grey';
Chart.defaults.global.defaultFontSize = 16;
var data = {
labels: [ "2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [{
label: "Miljoner ton",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(0,255,0,0.4)",
borderColor: "green", // The main line color
borderCapStyle: 'square',
pointBorderColor: "white",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "green",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [56.38, 59.3, 61.81, 58.83, 52.32, 66.86],
spanGaps: true,
}]
};
// Notice the scaleLabel at the same level as Ticks
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
fontSize: 18,
display: true,
text: 'Källa: Globallife.org',
position: 'bottom'
}
};
function addData() {
myBarChart.data.labels[7] ="Ekologisk palmolja";
myBarChart.data.datasets[0].data[7] = 14;
myBarChart.update();
}
// We add an init function down here after the chart options are declared.
init();
function init() {
// Chart declaration:
myBarChart = new Chart(ctx, {
type: chartType,
data: data,
options: options
});
}
Below is a working example that demonstrates modifying and updating the chart when clicking a button. Your addData function is a little odd in that it adds data at index 7, but the dataset only has keys 0-5, so this causes an extra blank data point to be inserted at index 6.
In case this isn't what you intended, I added some extra functions (pushData and popData) to show adding and removing from the end of a dataset as that's a quite common requirement (and therefore documented).
// same as original function; inserts or updates index 7.
function addData(e) {
myBarChart.data.labels[7] = "Ekologisk palmolja";
myBarChart.data.datasets[0].data[7] = 14;
myBarChart.update();
}
// requested function; removes index 7.
function removeData(e) {
myBarChart.data.labels.splice(7, 1);
myBarChart.data.datasets[0].data.splice(7, 1);
myBarChart.update();
}
// example of how to add data point to end of dataset.
function pushData(e) {
myBarChart.data.labels.push("Ekologisk palmolja");
myBarChart.data.datasets[0].data.push(14);
myBarChart.update();
}
// example of how to remove data point from end of dataset.
function popData(e) {
myBarChart.data.labels.pop();
myBarChart.data.datasets[0].data.pop();
myBarChart.update();
}
// set listeners on buttons
document.getElementById('add1').addEventListener('click', addData);
document.getElementById('remove1').addEventListener('click', removeData);
document.getElementById('add2').addEventListener('click', pushData);
document.getElementById('remove2').addEventListener('click', popData);
Chart.defaults.global.defaultFontColor = 'grey';
Chart.defaults.global.defaultFontSize = 16;
let myBarChart = new Chart(document.getElementById('chart'), {
type: 'bar',
data: {
labels: ["2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [{
label: "Miljoner ton",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(0,255,0,0.4)",
borderColor: "green", // The main line color
borderCapStyle: 'square',
pointBorderColor: "white",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "green",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [56.38, 59.3, 61.81, 58.83, 52.32, 66.86],
spanGaps: true
}]
},
options: {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
fontSize: 18,
display: true,
text: 'Källa: Globallife.org',
position: 'bottom'
}
}
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>
<button id="add1">Add index 7</button>
<button id="remove1">Remove index 7</button>
<button id="add2">Add to end</button>
<button id="remove2">Remove from end</button>
Related
["06月10日","06月13日","06月14日","06月15日","06月16日","06月17日","06月20日","06月21日","06月22日","06月23日","06月24日","06月27日","06月28日","06月29日","06月30日","07月01日","07月04日","07月05日","07月06日","07月07日","07月08日","07月11日","07月12日","07月13日","07月14日","07月15日","07月19日","07月20日","07月21日","07月22日","07月25日","07月26日","07月27日","07月28日","07月29日","08月01日","08月02日","08月03日","08月04日","08月05日","08月08日","08月09日","08月10日","08月12日","08月15日","08月16日","08月17日"]
above are all the labels that I want to show on the graph but it hiding all the odd index values from the graph only showing even index values on the graph from the above list.
see the graph it missing some labels.
if you see the order all the even number index values are displayed and odd are hidden..
This is all my chart code...
const data = {
labels: dates,
datasets: [{
type: 'line',
label: 'Line graph',
data: line,
fill: false,
borderColor: '#ff5252',
backgroundColor: '#ff5252',
yAxisID: 'y-axis-a',
lineTension: 0.1,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointRadius: 5,
pointHitRadius: 10,
},{
type: 'bar',
label: 'Bar graph',
data: diff,
borderColor: colors,
backgroundColor: colors,
borderWidth: 2,
pointRadius: 5,
pointBorderWidth: 1,
pointHoverRadius: 7,
pointHoverBorderWidth: 2,
fill: true,
showLabelBackdrop:true,
},]
};
const config = {
type:"scatter",
data: data,
options: {
legend: {
display: false
},
responsive: false,
scales: {
y: {
display:false,
beginAtZero: true,
ticks: {
color: "#ffffff",
font: {
size: 14,
},
},
},
},
plugins: {
labels: {
ticks:{
font: {
size: 22
},
color: "#ffffff",
}
},
title: {
display: true,
text: title,
padding: {
top: 10,
bottom: 30,
},
font: {
size: 22,
},
color: "#ffffff"
}
}
}
};
const ctx = document.querySelector(`#chart${index+1}`).getContext('2d');
const myChart = new Chart(ctx, config)
I have also tried..
x:{ticks:{autoSkip:false}}
when I do this it changes my label to numbers..
when you are using the type:"scatter",
Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 4 pointslink for charts scatter charts
when you are not defining the values with x and y then used the x-axis and y-axis as linear and then you can manipulate the x-axes for both line and bar..if you will not provide the chart_type in config it will take axes as linear
you can
xAxisID: 'x-axis-bar',
xAxisID: 'x-axis-line',
and then hide the 1 x-axis and autoSkip=False it will show your all values.
I am attaching the all code below..
const data = {
labels: dates,
datasets: [{
type: 'line',
label: 'Line graph',
data: line,
fill: false,
borderColor: '#ff5252',
backgroundColor: '#ff5252',
yAxisID: 'y-axis-a',
xAxisID: 'x-axis-line',
lineTension: 0.5,
order:1,
},{
type: 'bar',
label: 'Bar graph',
data: diff,
borderColor: colors,
backgroundColor: colors,
borderWidth: 2,
pointRadius: 5,
xAxisID: 'x-axis-bar',
pointBorderWidth: 1,
pointHoverRadius: 7,
pointHoverBorderWidth: 2,
fill: true,
showLabelBackdrop:true,
order:2
},]
};
const config = {
data: data,
options: {
responsive: false,
scales: {
y: {
display:false,
beginAtZero: true,
ticks: {
color: "#ffffff",
font: {
size: 14,
},
},
},
'x-axis-bar':{
ticks:{
autoSkip:false,
stepSize:1.0,
}
},
'x-axis-line':{
display:false
}
},
plugins: {
labels: {
ticks:{
font: {
size: 22
},
color: "#ffffff",
}
},
title: {
display: true,
text: title,
padding: {
top: 10,
bottom: 30,
},
font: {
size: 22,
},
color: "#ffffff"
}
}
}
};
const ctx = document.querySelector(`#chart${index+1}`).getContext('2d');
const myChart = new Chart(ctx, config)
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
I have the following code in a simple Bootstrap html file which displays a Chart.js line chart.
<div class="card-block chartjs">
<canvas id="line-chart" height="500"></canvas>
</div>
The js file that contains the chart's setup looks like this:
$(window).on("load", function(){
var ctx = $("#line-chart");
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: false,
},
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: false,
},
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
},
title: {
display: true,
text: 'Chart.js Line Chart - Legend'
}
};
var chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderDash: [5, 5],
borderColor: "#9C27B0",
pointBorderColor: "#9C27B0",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
}, {
label: "My Second dataset",
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderDash: [5, 5],
borderColor: "#00A5A8",
pointBorderColor: "#00A5A8",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
}, {
label: "My Third dataset - No bezier",
data: [45, 25, 16, 36, 67, 18, 76],
lineTension: 0,
fill: false,
borderColor: "#FF7D4D",
pointBorderColor: "#FF7D4D",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
}]
};
var config = {
type: 'line',
options : chartOptions,
data : chartData
};
var lineChart = new Chart(ctx, config);
});
I would like to avoid using a separated javascript file and rather just have everything in my Jinja2/Flask html page. A working example can be found in this tutorial, this is the same way that I would like to follow. I have tried to copy any paste the js part to my html page and put between <script> tags, but unfortunately it doesn't work.
Here is how I tried:
# in my jinja2/flask html page
<div class="card-body collapse in">
<div class="card-block chartjs">
<canvas id="line-chart" height="500"></canvas>
</div>
</div>
<script>
var ctx = $("#line-chart");
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: false,
},
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: false,
},
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
},
title: {
display: true,
text: 'Chart.js Line Chart - Legend'
}
};
// Chart Data
var chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderDash: [5, 5],
borderColor: "#9C27B0",
pointBorderColor: "#9C27B0",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
}, {
label: "My Second dataset",
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderDash: [5, 5],
borderColor: "#00A5A8",
pointBorderColor: "#00A5A8",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
}, {
label: "My Third dataset - No bezier",
data: [45, 25, 16, 36, 67, 18, 76],
lineTension: 0,
fill: false,
borderColor: "#FF7D4D",
pointBorderColor: "#FF7D4D",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
}]
};
var config = {
type: 'line',
// Chart Options
options : chartOptions,
data : chartData
};
// Create the chart
var lineChart = new Chart(ctx, config);
});
</script>
Unfortunately I'm not so familiar with JS and don't have more ideas about what should I do to display the chart in my Flask app. What do I need to implement to make it work?
First make sure the required JS is referenced in your template (or the template it extends).
Assuming you serve it from static/js folder:
<head>
...
<script src='/static/js/Chart.bundle.min.js'></script>
...
</head>
Your script tag content looks mostly fine, just a little modification getting the context, and you appear to have a trailing }); that you need to remove:
<script>
// get context
var ctx = document.getElementById("line-chart").getContext("2d");
....
// Create the chart
var lineChart = new Chart(ctx, config);
// REMOVE THIS FROM THE END OF YOUR SCRIPT
//});
</script>
As bgse said in his answer you need to load library first. I suggest you use CDN as that way you don't need to download ChartJS library.
Secondly, you're writing some JS that may be executed before library is fetched to the page. So what would I add is:
<div class="card-body collapse in">
<div class="card-block chartjs">
<canvas id="line-chart" height="500"></canvas>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
// Your JS code here
// ...
});
</script>
This way script code will execute when all JS is loaded.
I want to know that if it is possible to show more values on point hover in chart.js.
Have a look in this fiddle.
This is a smiple graph example taken from the chart.js site. If i hover a point it shows the dataset value.
How can i show other value. like along this array.
[65, 59, 80, 81, 56, 55, 40]
if i want to show this array values
[1, 2, 3, 4, 5, 6, 7]. Like i want to show numbering. This is just an example actually i want to show more two values but not want to plot it on the graph only showed in the pointhover. Like on 65 it tells that it is 1th value.
Any kind of help would be much appreciated.
Yes it is possible, please use tooltips option as below
var ctx = document.getElementById('chart1').getContext("2d");
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,
}
]
};
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: 'anything',
fontSize: 18,
fontColor: "#111"
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var multistringText = [tooltipItems.yLabel];
multistringText.push('Another Item');
multistringText.push(tooltipItems.index+1);
multistringText.push('One more Item');
return multistringText;
}
}
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
},
scales:{
yAxes:[{
ticks:{
min:0
}
}]
}
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="chart1"></canvas>
If you want to show data below the existing item in the tooltips you can use the 3 different tooltip footer callbacks. Just define what you want to show as arrays outside of the scope of chart.js and reference it using an index.
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
beforeFooter: function(tooltipItems, data) {
return 'Point #: ' + footerLine1[tooltipItems[0].index];
},
footer: function(tooltipItems, data) {
return 'Other Data: ' + footerLine2[tooltipItems[0].index];
}
}
},
Keep in mind that you only have 3 lines to work with (e.g. 3 footer callbacks)
See the example here.
tooltips: {
mode: 'index'
}
add this to options
I would like to label the axis within an chart.js radar chart differently. The axis are labeled with numbers from 1 to 5 (see print screen). I would like to have instead of 1 = "No", 2 = "Basic", 3 = "Proficient" etc.
Is that somehow configurable with chart.js in a radar chart, e.g. by using chart.js options?
Thanks in advance
Since you are using Chart.js version 2.1.3, it will be very simple to achieve what you want.
In any chart (including the radar, the one you are using), labels on values are stored in options.scale.ticks.
Then, if you want to edit the way they are displayed, you must use Chart.js callbacks, like this :
var options = {
scale: {
ticks: {
beginAtZero: true,
userCallback: function (value, index, values) {
// Default callback
return value;
}
}
}
}
Edit the return value with what you want.
Here is a jsFiddle, and also a fully working example using a simple array with the labels you want to display :
var ctx = document.getElementById("myChart").getContext("2d");
var notations = {
0: "",
0.5: "",
1: "no",
1.5: "",
2: "basic",
2.5: "",
3: "proficient",
3.5: "",
4: "great",
4.5: "",
5: "outstanding",
}
var data = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [3.25, 2.95, 4.5, 4.05, 2.8, 2.75, 2.0]
}, {
label: "My Second dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [1.4, 2.4, 2.0, 0.95, 4.8, 1.35, 5.0]
}]
};
var myChart = new Chart(ctx, {
type: "radar",
data: data,
options: {
scale: {
ticks: {
beginAtZero: true,
userCallback: function(value, index, values) {
return notations[value];
}
}
}
}
});
console.log(myChart);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>