I'm working with chartjs and trying to update my initial state with an API call which looks like:
this.state = {
data: {
labels: [], //<-- SET THIS STATE
datasets: [{
fill: 'false',
lineTension: 0,
label: 'Price in USD',
data: [], //<-- SET THIS STATE
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}
}
I need to setState for labels - which I have done already. But got lost and confused as to also setState for code below at the same time.
data: {
labels: [],
datasets: [{
fill: 'false',
lineTension: 0,
label: 'Price in USD',
data: [], <------THISSSS
Here's what I did to set my labels state
let labels = this.state.data.labels
labels = timeData
this.setState(({data}) => ({data: {
...data,
labels: labels
}}))
You are initializing labels as this.state.data.labels, which is fine, but then you change it to timeData, which I'm assuming is declared somewhere else in the code. You don't need to set labels to this.state.data.labels if you're going to assign it a new value immediately after. Also, if you want to simplify it further, you can also exclude the line labels = timeData and just use timeData in the setState call.
As for the this.setState() call, you should not be passing it a function.
To answer your question, this is how you can set the state of labels and the second data property without affecting the rest of the state:
this.setState({
data: {
labels: timeData,
datasets: [{
...this.state.data.datasets,
data: SOME_VALUE_HERE
}]
}
});
Related
function chartJS_shortcode(){
?><canvas id="myChart" width="400" height="400"></canvas><?php
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
}
add_shortcode("chartJS", "chartJS_shortcode");
I want to create a chart shortcode through chart.js and when I add this code in functions.php, its breaks the site. Please tell me what is wrong with this code? however, its code works fine when I paste into the page.
Place the JavaScript in it's own file. Reasons for doing this is that you only want to load the script once and it keeps your shortcode a bit cleaner. Let's call that file chart.js
Let's register that script for enqueueing with wp_register_script, meaning that it will be added to the page whenever we give the signal.
add_action('wp_enqueue_scripts', function() {
wp_register_script('chartJS', 'your-assets-folder/chart.js', [], false, true);
});
Then for the shortcode. Because the script is now in a separate file, the code is much cleaner. Here we call wp_enqueue_script to add your JS to the bottom of the page.
The most important part here is returning the HTML as a string. This will be the output of the shortcode.
add_shortcode('chartJS', function($atts, $content = null) {
wp_enqueue_script('chartJS');
return '<canvas id="myChart" width="400" height="400"></canvas>';
});
I'm trying to achieve charts with vue js. I'm getting the chart with no chart itself but labels crossed. I've no idea what is going wrong.
This is supposed to be my pie chart. As you can see I'm getting the labels crossed that means remove all the labelled data and hence gives me an empty chart. Here is my code.
export const productChartData = {
type: 'pie',
data: {
labels: ['Purchased', 'Return', 'Cancelled', 'Shipped', 'Returned'],
datasets:[
{
data: ['22, 33, 12, 18, 19'],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}
]
},
options:{
maintainAspectRatio:false,
title:{
display:true,
fontSize:18,
text: "Products"
}
}
}
export default productChartData;
On my .vue file,
methods: {
createChart(chartId, chartData){
const canvas = document.getElementById(chartId);
const ctx = canvas.getContext('2d');
const myChart = new Chart(ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options
});
}
}
There is an issue in your chart rendering code:
data: ['22, 33, 12, 18, 19'] should be passed as data: [22, 33, 12, 18, 19]. I have modified the pen and it's working -> https://codepen.io/anon/pen/dwKjqM
I want to create a bar chart on ChartJS but I'm not having success when trying to remove this "gap" between the Y-axis 0 bar and the first bar. Is it even possible?
This is the example with a small gap
And here is what I want to achieve, without the gap
HTML
<canvas id="openedCanvas" height="230" width="680"></canvas>
Javascript
var data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
};
var options = {}
var chart = new Chart($('#openedCanvas'), {
type: 'bar',
data: data,
options: options
});
And here's a running Codepen https://codepen.io/fermijs/pen/ZmPRaB
Thank you :)
To achieve expected result , use scales option for x axis
barPercentage vs categoryPercentage section of https://www.chartjs.org/docs/latest/charts/bar.html?h=scales
Both of 1.0 will stack together , so adjust according to your requirement
scales: {
xAxes: [{
categoryPercentage: 0.99,
barPercentage: 1.0
}]
}
codepen - https://codepen.io/nagasai/pen/yGYJKE
I'm writing code to read in values from my Firebase database, store them into an array, and then plug my array into the Chart.js code to display my data in the graph. But my graph is coming up empty.
First, I create a snapshot of the values in the database, and push them to the new array genderData. I then confirmed that the array was populated with a console.log(genderData) (see below). As far as I can tell, the array was populated:
My console log:
I then console logged outside of my ref call to the database, and it looks like this:
My code to pull data from the database:
var rootRef = firebase.database().ref().child('counters');
// Get counter values.
var genderData = [];
rootRef.once('value').then(function(snapshot){
genderData.push(snapshot.val()['Male']);
genderData.push(snapshot.val()['Female']);
genderData.push(snapshot.val()['Nonbinary']);
genderData.push(snapshot.val()['Other']);
genderData.push(snapshot.val()["Didn't Say"]);
console.log(genderData);
})
console.log(genderData);
Then, I created a regular bar graph with Chart.js, and tried to plug in genderData into the graph:
// Bar graph displaying the total number of students by gender.
var ctx = document.getElementById("myChart4").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Male", "Female", "Non-Binary", "Other", "Unspecified"],
datasets: [{
data: genderData,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
title: {
display: true,
text: 'Total Students by Time Taken to Complete Degree'
},
legend:{
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
But my graph is empty:
EDIT:
Upon further inspection, I noticed that the values are showing up... kind of.
So it seems that my data just isn't creating the "bar" of the graph? And my y values start at 0.0 and end at 1.0, and I have no idea why.
There is a unexpected text "NaN" appearing near the Y-axis of the chart when both the datasets(Capital and Expense) of a chart are hidden in chart created using Chartjs(Link) plugin. The chartType being used here is horizontalBar chart.
Also attached is a screenshot of how it looks when one of the dataset is hidden(Type 1) and the Type 2 shows the chart when both the datasets are hidden.
Link to fiddleJsFiddle
UPDATE:
This fix worked in chart.js version 2.5 (or lower), in version 2.6 they said it's fixed by default.
OLD ANSWER:
Hello, just change to this: (notice my callback on xAxis)
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Capital',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}, {
label: 'Expense',
data: [4, 8, 6, 14, 12, 6],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
stacked: true,
ticks: {
//this will fix your problem with NaN
callback: function(label, index, labels) {
return label ? label : '';
}
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
Can't really explain why is displaying that 'NaN', I think it's still trying to display the ticks even when there is no data. So, in that callback you make sure that data is displayed only if exists.
I had the same problem on a chart and didn't found any answer anywhere, so this fix is something I came up with on the fly, but it's working. That callback is overriding ticks displayed data, so you can customize it as much as you want.
You can check this issue here too:
Chart js Github
I managed to solve the above issue by not allowing the user to hide all the datasets at same time ie., atleast one active dataset at all times.
Fiddle link below
http://jsfiddle.net/znppphyf/1