chart.js Second hidden value for Bar Chart - javascript

I want to get specific hidden data like custId2345 when a bar is clicked, and then run a function.
How should I assign this data to its bar without showing on chart?

You can define your data in object format and then you can just add a custom property that you read in the onClick method like so:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [{
x: "Red",
y: 12,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
},
{
x: "Blue",
y: 19,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
},
{
x: "Yellow",
y: 3,
secretVal: "Not rick roll"
},
{
x: "Green",
y: 5,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
},
{
x: "Purple",
y: 2,
secretVal: "Not rick roll"
},
{
x: "Orange",
y: 3,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
}
],
backgroundColor: 'pink'
},
{
label: '# of Points',
data: [{
x: "Red",
y: 7,
secretVal: "Not rick roll"
},
{
x: "Blue",
y: 11,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
},
{
x: "Yellow",
y: 5,
secretVal: "Not rick roll"
},
{
x: "Green",
y: 8,
secretVal: "Not rick roll"
},
{
x: "Purple",
y: 3,
secretVal: "Not rick roll"
},
{
x: "Orange",
y: 7,
secretVal: "Not rick roll"
}
],
backgroundColor: 'orange'
}
]
},
options: {
onClick: (e, activeEls, chart) => {
if (activeEls.length === 0) {
return;
}
const cEl = activeEls[0];
console.log(chart.data.datasets[cEl.datasetIndex].data[cEl.index].secretVal)
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

Related

Chart.js: How to change the x-Axes background color?

I'm using "chart.js": "3.0.0" and "react-chartjs-2": "^3.0.3" and I'm trying to chage the x-axes background color.
I could change the color of font but can not change the background
I tried to use
backgroundColor: 'red'
but not working..
const options = {
scales: {
x: {
ticks: {
font: {
size: 10,
},
backgroundColor: 'red', // not working
color: 'black',  // worked
},
},
y: {
min: 0,
max: 10,
ticks: {
stepSize: 2,
},
},
},
};
Does anybody know how to change it?
You can use a custom inline plugin for this:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'red'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: 'blue'
}
]
},
options: {
plugins: {
scaleBackgroundColor: {
color: 'yellow'
}
}
},
plugins: [{
id: 'scaleBackgroundColor',
beforeDraw: (chart, args, opts) => {
const {
ctx,
canvas,
chartArea: {
left,
bottom,
width,
}
} = chart;
ctx.beginPath();
ctx.rect(left, bottom, width, (canvas.height - bottom));
ctx.fillStyle = opts.color || 'white'
ctx.fill();
}
}]
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>
Edit:
You can also use the backgroundColor option in the axis settings:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'red'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: 'blue'
}
]
},
options: {
scales: {
x: {
backgroundColor: 'yellow'
}
}
},
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>

how display custom data in chartjs tooltip

I have created a time series graph out of two data set. Now problem is there is an additional data that I would like to use and display in tooltip but I am not sure how to do it. I did some search and I kind of believe that this can be achieved via callbacks but don't know how to handle it. Right now the tooltip displays x and y values along with it I would like to display r value as well.
var ctx = document.getElementById('myChart').getContext('2d');
var s1 = {
label: 'source',
borderColor: 'blue',
data: [
{ x: '2020-05-11T04:58:37Z', y: 25, r:3001},
{ x: '2020-05-11T04:59:17Z', y: 27, r:3002},
{ x: '2020-05-11T04:59:57Z', y: 21, r:3003},
{ x: '2020-05-11T05:00:37Z', y: 21, r:3004},
{ x: '2020-05-11T05:01:17Z', y: 21, r:3456},
{ x: '2020-05-11T05:01:57Z', y: 0.04, r:3243}
]
};
var s2 = {
label: 'target',
borderColor: 'red',
data: [
{ x: '2020-05-11T04:58:37Z', y: 28, r:3234},
{ x: '2020-05-11T04:59:17Z', y: 31, r:3232},
{ x: '2020-05-11T04:59:57Z', y: 27, r:5332},
{ x: '2020-05-11T05:00:37Z', y: 30, r:3342},
{ x: '2020-05-11T05:00:57Z', y: 30, r:3234},
{ x: '2020-05-11T05:01:17Z', y: 0.033, r:3343}
]
};
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: { datasets: [s1, s2] },
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'series'
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="100"></canvas>
tooltips callbacks is your need Link info
and this is your need to reach r
data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].r
var ctx = document.getElementById('myChart').getContext('2d');
var s1 = {
label: 'source',
borderColor: 'blue',
data: [
{ x: '2020-05-11T04:58:37Z', y: 25, r:3001},
{ x: '2020-05-11T04:59:17Z', y: 27, r:3002},
{ x: '2020-05-11T04:59:57Z', y: 21, r:3003},
{ x: '2020-05-11T05:00:37Z', y: 21, r:3004},
{ x: '2020-05-11T05:01:17Z', y: 21, r:3456},
{ x: '2020-05-11T05:01:57Z', y: 0.04, r:3243}
]
};
var s2 = {
label: 'target',
borderColor: 'red',
data: [
{ x: '2020-05-11T04:58:37Z', y: 28, r:3234},
{ x: '2020-05-11T04:59:17Z', y: 31, r:3232},
{ x: '2020-05-11T04:59:57Z', y: 27, r:5332},
{ x: '2020-05-11T05:00:37Z', y: 30, r:3342},
{ x: '2020-05-11T05:00:57Z', y: 30, r:3234},
{ x: '2020-05-11T05:01:17Z', y: 0.033, r:3343}
]
};
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: { datasets: [s1, s2] },
options: {
tooltips:{
callbacks: {
title: function(tooltipItem,data) {
console.log(data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].r);
return "I am title";
},
label: function(tooltipItem) {
return "I am content";
}
}
} ,
scales: {
xAxes: [{
type: 'time',
distribution: 'series'
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="100"></canvas>
You'll have to create a custom tooltip and then append the r value to it.
You can read about tooltips over here
You can access a particular attribute of a tooltip's point like this:
data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r
I wrote a custom callback to do this for you :)
var ctx = document.getElementById('myChart').getContext('2d');
var s1 = {
label: 'source',
borderColor: 'blue',
data: [
{ x: '2020-05-11T04:58:37Z', y: 25, r:3001},
{ x: '2020-05-11T04:59:17Z', y: 27, r:3002},
{ x: '2020-05-11T04:59:57Z', y: 21, r:3003},
{ x: '2020-05-11T05:00:37Z', y: 21, r:3004},
{ x: '2020-05-11T05:01:17Z', y: 21, r:3456},
{ x: '2020-05-11T05:01:57Z', y: 0.04, r:3243}
]
};
var s2 = {
label: 'target',
borderColor: 'red',
data: [
{ x: '2020-05-11T04:58:37Z', y: 28, r:3234},
{ x: '2020-05-11T04:59:17Z', y: 31, r:3232},
{ x: '2020-05-11T04:59:57Z', y: 27, r:5332},
{ x: '2020-05-11T05:00:37Z', y: 30, r:3342},
{ x: '2020-05-11T05:00:57Z', y: 30, r:3234},
{ x: '2020-05-11T05:01:17Z', y: 0.033, r:3343}
]
};
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [s1, s2]
},
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'series'
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ':';
}
label += tooltipItem.yLabel;
r = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r
label += " r: " + r;
return label;
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="100"></canvas>

Rendering Chart.js Bubble Chart Using Array Data

I have three arrays that I am parsing in from an XML file, detailed below:
["x": "23.561799", "x": "-10.713591", "x": "-20.516543", "x": "27.352751", "x": "-21.090982"]
["y": "-5.777557", "y": "-24.425175", "y": "9.131939", "y": "7.052970", "y": "-26.059631"]
["r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000"]
Let's say these are called arrayX, arrayY and arrayR. How would I go about using these to render a bubble chart in Chart.js?
I have the code to create a simple bubble chart here:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bubble',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: 'Gaze Map Month 1',
data: [
{
x: 23,
y: -10,
r: 10
},
{
x: -10.713591,
y: -24.425175,
r: 3
},
{
x: -20.516543,
y: 9.131939,
r: 36
},
{
x: 27.352751,
y: 7.052970,
r: 19
},
{
x: -21.090982,
y: -26.059631,
r: 2
}
],
backgroundColor:"#FF6384",
hoverBackgroundColor: "#FF6384",
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: -30,
max: 30
}
}],
xAxes: [{
ticks: {
beginAtZero:true,
min: -30,
max: 30
}
}]
}
}
});
Note the format of the arrays can be changed if need be, so that just the values are used.
Since your are getting data dynamically, just iterate over your data and build a chartData object in the format that chart.js requires. Once you have assembled your data, just use that in your chart definition. See the below example
var xArray = ["x": "23.561799", "x": "-10.713591", "x": "-20.516543", "x": "27.352751", "x": "-21.090982"];
var yArray = ["y": "-5.777557", "y": "-24.425175", "y": "9.131939", "y": "7.052970", "y": "-26.059631"];
var rArray = ["r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000"];
var chartData = [];
xArray.forEach(function(e, i) {
chartData.push({
x: parseFloat(e),
y: parseFloat(yArray[i]),
r: parseFloat(rArray[i]),
});
});
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bubble',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: 'Gaze Map Month 1',
data: chartData,
backgroundColor:"#FF6384",
hoverBackgroundColor: "#FF6384",
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: -30,
max: 30
}
}],
}
}
}
});

The Following Java Script Function not working for jcanvas chart

<script type="text/javascript">
window.onload = function () {
debugger;
$.ajax({
type: "POST",
url: "RMDashboard.aspx/get_dept_pend_fin_wo",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
function OnSuccess(response) {
//alert(response.d)
var chart = new CanvasJS.Chart("ccpevman", {
title: {
text: ""
},
axisX: {
interval: 3,
intervalType: "month",
},
data: [{
type: "spline",
dataPoints: [ jQuery.parseJSON(response.d) ]
}]
});
chart.render();
}
}
</script>
The web method from the cs page returns the string in the format as
{ label: "08/2015", y: 25, markerColor: "Green" },{ label: "09/2015", y: 87, markerColor: "Green" },{ label: "10/2015", y: 158, markerColor: "Green" },{ label: "11/2015", y: 180, markerColor: "Green" },{ label: "12/2015", y: 336, markerColor: "Green" },{ label: "01/2016", y: 57, markerColor: "Green" },{ label: "02/2016", y: 187, markerColor: "Green" },{ label: "03/2016", y: 341, markerColor: "Green" },{ label: "07/2015", y: 1, markerColor: "Red" },{ label: "09/2015", y: 3, markerColor: "Red" },{ label: "10/2015", y: 2, markerColor: "Red" },{ label: "11/2015", y: 1, markerColor: "Red" },{ label: "12/2015", y: 3, markerColor: "Red" },{ label: "02/2016", y: 25, markerColor: "Red" },{ label: "03/2016", y: 33, markerColor: "Red" }
I have converted this to json and applying to datapoints is there any alternative way to achive this.
Convert the string to the following format::
var objectstring =response.d;
var objectStringArray = (new Function("return [" + objectstring+ "];")());
Then assigned the objectStringArray to datapoints
dataPoints: objectStringArray
It is working perfectly form me now...Thanks All

Highcharts: Change color of bubbles in one serie

Can I set different colors for a serie in a bubble chart? I try setting the property "color" but not work.
data: [{
x: 23,
y: 22,
z: 200,
name:"point1",
color: 'red'
}, {
x: 43,
y: 12,
z: 100,
name:"point2",
color:'yellow'
}]
Maybe I can use a label in the serie but I prefer the change the bubble, it is possible?
dataLabels: {
enabled: true,
color: 'red'
}
This is my jsfiddle: http://jsfiddle.net/tqVF8/2/
In your case, you can add the property "fillColor"
data: [{
x: 23,
y: 22,
z: 200,
name:"point1",
color: 'red',
fillColor : 'red'
}, {
x: 43,
y: 12,
z: 100,
name:"point2",
color:'yellow',
fillColor : 'yellow'
}]
example: http://jsfiddle.net/tqVF8/17/
Each point that needs a unique color will need its own series object. It's a little weird, but this works:
series: [{
data: [{
x: 23,
y: 22,
z: 200,
name:"point1"
}, {
x: 43,
y: 12,
z: 100,
name:"point2",
}],
color: "yellow"
},{
data: [{
x: 50,
y: 22,
z: 150,
name:"point3"
}, {
x: 43,
y: -30,
z: 100,
name:"point4",
}],
color: "blue"
}]
Check out this demo from the site: http://www.highcharts.com/demo/bubble-3d
And here is a js fiddle with your example:
http://jsfiddle.net/Robodude/tqVF8/7/

Categories