We Keep Coding

Doughnut chart - interaction with specific segment of a chart

I'm trying to create a simple doughnut chart with chartjs. I've been digging through the Documentation and Stack (of course), but I couldn't find it.
Here is my code: https://jsfiddle.net/zyqtyna7/1/
<div class="place-for-chart">
<canvas id="myChart"></canvas>
</div>
<div class="description">
<p class="first hide">I'm description to no. 1 and I was hide</p>
<p class="second hide">I'm description to no. 2 and I was hide</p>
<p class="third hide">I'm description to no. 3 and I was hide</p>
</div>
<script>
var data = {
datasets: [{
data: [20, 20, 20],
backgroundColor: ["#27ae60", "#95a5a6", "#488a99"]
}],
labels: ["first", "second", "third"],
};
$(document).ready(
function() {
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
var CompetenceChart = new Chart(ctx, {
type: 'doughnut',
data: data
});
})
I'm not sure, but I think that the biggest question is: how can I target a specific segment of a chart (and then do something with it)? I'm asking this, because my project requires that:
descriptions in paragraphs will be visible after user's click at related part of chart (how can I target this segment???);
tooltips will have only labels' name (no values) (I couldn't decipher the Documentation);
chart animation should be triggered with scroll (segments will appear in sequence after scrolling - is it even possible?)
I'll be very greatfull for any insight - I'm stuck!

I managed to do 2 of 3.. and I found documentation on how to do the third one.. But I was not able to make it work :/.... (i will try again when i have a bit more of time).
So here is the JSfiddle with this modifications:
1:Data is shown on mouse click
2:On top labels are shown, but when you click you wont see any labels but a black mark
JSFIDDLE
So what did I do?
options: {
// This chart will not respond to mousemove, etc
events: ['click'],
tooltips: {
callbacks: {
label: function(tooltipItem)
{
return tooltipItem.yLabel;
}
}
}
}
I added the options part with those codes.
the events:['click'] makes the labels show when you click a part of the chart instead of hovering it.
the tooltips with the callbacks "turn off" showing the labels on mouse click.
And for the other part that you ask, about showing the animation when you scroll to the part where the chart is I found this 2 links that tells you how to do so (I couldn't make it work, but I will try again when I have more time and update).
Link1
Link2
Please let me know if this is what you wanted to know! CHEERS!

OMG! Now I know. It took me so many hours, but was so obvious! Here's my new - working - code: https://jsfiddle.net/m954jto4/ Documentation of Chartjs and same basic js script - that's all, what I needed (shame on me!).
<div class="place-for-chart">
<canvas id="myChart"></canvas>
</div>
<div class="description">
<p class="first hidden" id="hide1">I'm description to no. 1 and I was hide</p>
<p class="first hidden" id="hide2">I'm description to no. 2 and I was hide</p>
<p class="first hidden" id="hide3">I'm description to no. 3 and I was hide</p>
</div>
var data = {
datasets: [{
data: [20, 20, 20],
backgroundColor: ["#27ae60", "#95a5a6", "#488a99"]
}],
labels: ["first", "second", "third"],
};
$(document).ready(
function() {
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
var myNewChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: {
legend: {
display: true,
onClick: (e) => e.stopPropagation(),
position: 'left',
labels: {
fontSize: 20
}
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
return label;
}
}
},
cutoutPercentage: 65
}
}
);
canvas.onclick = function(event) {
var activePoints = myNewChart.getElementsAtEvent(event);
var hiddenparagraph1 = document.getElementById("hide1");
var hiddenparagraph2 = document.getElementById("hide2");
var hiddenparagraph3 = document.getElementById("hide3");
if (activePoints.length > 0) {
var clickedSegmentIndex = activePoints[0]._index;
if (clickedSegmentIndex==0) {
hiddenparagraph1.classList.remove("hidden");
}
else if(clickedSegmentIndex==1) {
hiddenparagraph2.classList.remove("hidden");
}
else {
hiddenparagraph3.classList.remove("hidden");
}
}
};
}
);

Chart.js - doughnut show active segment tooltip (on click of external button)

// ignore this comment - required to post the following jsfiddle.net link!
Please see https://jsfiddle.net/68bf25vh/
If you click a doughnut segment, the corresponding tooltip displays, which is the correct functionality.
The problem is triggering this desired functionality when a user clicks one of the buttons below the doughnut. E.g. when a user clicks the 'Trigger Segment 1 Click' button. The tooltip should display above segment 1 (just as if the user had clicked segment 1).
A bonus would be having the tooltip displaying above segment 1 initially too, but not essential.
Any help much appreciated :)
Please note
Using Chart.js v 2.5.0. I've read a few articles suggesting to use a showTooltip() method, e.g. chart.showTooltip([chart.segments[0]], true); Unfortunately this method does not exist in this version.
Found this https://stackoverflow.com/a/37989832, but this displays all tooltips. Just want the tooltip of the active (current) segment to display.

You can use the following function to display corresponding tooltip, when clicked on an external button :
function showTooltip(chart, index) {
var segment = chart.getDatasetMeta(0).data[index];
chart.tooltip._active = [segment];
chart.tooltip.update();
chart.draw();
}
When calling the function, pass chart-instance and button-index as the first and second argument respectively.
BONUS :
To initially show the tooltip of segment-1, add the following config in your chart options :
animation: {
onComplete: function() {
if (!isChartRendered) {
showTooltip(myChart, 0);
isChartRendered = true;
}
}
}
* declare a variable named isChartRendered in global-scope and set it to false
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var isChartRendered = false;
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Segment 1', 'Segment 2', 'Segment 3'],
datasets: [{
data: [10, 10, 10]
}]
},
options: {
events: ['click'],
cutoutPercentage: 70,
legend: {
display: false
},
tooltips: {
displayColors: false
},
onClick: function(evt, elements) {},
// BONUS: show segment 1 tooltip initially
animation: {
onComplete: function() {
if (!isChartRendered) {
showTooltip(myChart, 0);
isChartRendered = true;
}
}
}
}
});
$(document).on('click', 'button', function() {
var $this = $(this),
index = $this.index();
showTooltip(myChart, index);
});
function showTooltip(chart, index) {
var segment = chart.getDatasetMeta(0).data[index];
chart.tooltip._active = [segment];
chart.tooltip.update();
chart.draw();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:400px;height:400px;">
<canvas id="myChart"></canvas>
</div>
<div style="margin-top:50px;">
<button>Trigger Segment 1 Click</button>
<button>Trigger Segment 2 Click</button>
<button>Trigger Segment 3 Click</button>
</div>

For Chart.js 3 the GRUNT`s solution needs some modifications:
chart.tooltip.setActiveElements([{datasetIndex: 0, index: index}]);
chart.tooltip.update();
chart.render();
If you want to change also the segment style:
const activeSegment = chart.getDatasetMeta(0).data[index];
chart.updateHoverStyle([{element: activeSegment, datasetIndex: 0}], null, true);

Chart.js 2.1.2 Bar Chart Animation Issue

I have a bar chart in chart.js 2.1.2 which I just upgraded from 1.something. In 1.something, you could specify when to animate the bar chart. Essentially, I load the chart on page load and then set a timer to update the data and redraw the chart every 5 seconds without requiring the user to reload the page. I would like for the bar chart to only animate on the initial load and not in subsequent refreshes. In version 1.something you just needed to change the animation property of the bar chart when refreshing it. In version 2.1.2, I don't see a way to do that. At this point, I would be happy if I could disable the animation of the bar chart entirely. However, I also have other pie charts on the page which the animation settings are working so I don't want to change the animation settings globally.
HTML (Excerpt)
<div class="text-center">
<div class="row">
<div id="regbyhour-container" class="col-sm-12">
<h4>Registrations by Hour</h4>
<canvas id="regbyhour"></canvas>
</div>
</div>
</div>
Javascript
<script type="text/javascript">
var barData = defineBarDataArray();
$(function () {
// Global Chart Options
Chart.defaults.global.legend.display = false;
Chart.defaults.global.maintainAspectRatio = true;
// Bar Chart Options
Chart.defaults.bar.scaleBeginAtZero = false;
updateBarChart(true)
setInterval(function () {
updateBarChart(false)
}, 5000);
});
function defineBarDataArray() {
return {
labels: [],
datasets: [{
label: "Registrations",
backgroundColor: "rgba(151,187,205,0.5)",
borderColor: "rgba(151,187,205,0.8)",
borderWidth: 3,
data: []
}]
};
};
function drawRegByHourChart(animate) {
$("#regbyhour").remove();
$("#regbyhour-container").append('<canvas id="regbyhour"></canvas>');
var context = $("#regbyhour");
var chart = new Chart(context, {
type: 'bar',
data: barData
// Need to enable or disable animation here based on animate parameter
});
};
function updateBarChart(animate) {
barData = defineBarDataArray();
barData.labels.push("12:00 PM");
barData.labels.push("1:00 PM");
barData.labels.push("2:00 PM");
barData.datasets[0].data.push(1 + Math.floor(Math.random() * 2000));
barData.datasets[0].data.push(1 + Math.floor(Math.random() * 2000));
barData.datasets[0].data.push(1 + Math.floor(Math.random() * 2000));
drawRegByHourChart(animate);
};
</script>
I don't see anything in the documentation here that says you can specify the animation options like you can with a pie chart. What am I missing?

I ended up posting this as a bug on the chart.js GitHub page since I didn't get any responses here. Following the suggestion from etimberg I changed the drawRegByHourChart function from this:
function drawRegByHourChart(animate) {
$("#regbyhour").remove();
$("#regbyhour-container").append('<canvas id="regbyhour"></canvas>');
var context = $("#regbyhour");
var chart = new Chart(context, {
type: 'bar',
data: barData
// Need to enable or disable animation here based on animate parameter
});
};
To this:
function drawRegByHourChart(animate) {
$("#regbyhour").remove();
$("#regbyhour-container").append('<canvas id="regbyhour"></canvas>');
var context = $("#regbyhour");
var chart = new Chart(context, {
type: 'bar',
data: barData
});
if (!animate) {
chart.update(0);
}
};

How to create an active and dynamic bar graph from Mysql, php?

just to clarify the title, I want to make a bar graph which will read the data from the database table using MySql, and automatically changing the height to match the new data. The data is being fed to the database via an Arduino micro controller, so there is a continuous addition of data ever 0.5 seconds. I want the graph to detect the data and increase its height accordingly. Is there a way to do this without constantly refreshing the web page every 0.5 seconds?

Please don't refresh the whole page every .5 seconds. There is a better way!
If you're not opposed to Jquery, use
$("#someDiv").load("somePage.PHP");
If no jquery, use:
var xhttp;
if (str.length == 0) {
document.getElementById("someDiv").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("someDiv").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "somePage.PHP", true);
xhttp.send();
Now make a div to load the contents:
<div id="someDiv">
On the PHP page you load, you'll want to draw the chart. This method uses the bar chart from Chart.js: http://www.chartjs.org/docs/#bar-chart
See the link for more details. Your code will look something like this:
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});

You could use AJAX to make a call to a script every 0.5 seconds which will refresh only a portion of your page(the graph). Through AJAX you would be able to change the graph according to the data it fetches from a PHP(or otherwise) script with javascript.

ChartJS won't draw graph inside bootstrap tab until window resize

I'm using bootstrap's tabs with chartjs charts inside every tab.
One problem that have occurred though is that the graph canvas wont be drawn until i resize the browser window. And this is happening in both latest Chrome and Firefox.
I've been trying different solutions as drawing the graph after the tab is changed but with no results.
Unfortunately I was unable to duplicate the problem in jsfiddle, somehow it seems to work there. But there's pretty much all the code, besides the html5 boilerplate.
Does anyone know possibly why this behavior happens? Thanks!
/**
* ChartJS using JSON data and moment.js for time display
* Code is quite ugly due to experimentation
*/
function getJSON(){
$.getJSON( "data.json", function(data){
var dataArray = [];
console.log(data);
var series = {};
for (var x in data.Series) {
var dates = [];
var values = [];
// Loop across all the measurements for every serie.
for (var i = 0; i < data.Series[x].length; i++) {
var obj = data.Series[x][i];
dates.push(moment(obj.Date).format("MMMM Mo"));
values.push(obj.Value);
}
// Keep the list of dates and values by serie name.
series[x] = {
dates: dates,
values: values
};
}
//some debug stuff
console.log(series.height.dates);
console.log(series.height.values);
var dataArray = {
labels: series.height.dates,
datasets: [
{
label: "Height",
strokeColor: "rgb(26, 188, 156)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: series.height.values
}
]
};
function chartFunc(dataArray) {
var ctx = document.getElementById("heightChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(dataArray, {
scaleShowGridLines : true,
bezierCurve : true,
bezierCurveTension : 0.4,
datasetStroke : false,
fillColor: "rgba(0,0,0,0)",
datasetFill : false,
responsive: true,
showTooltips: true,
animation: false,
});
} //chartFunc
chartFunc(dataArray);
}); //JQ getJSON
}//getJSON
$( document ).ready(function() {
getJSON();
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
console.log("TAB CHANGED");
});
});
http://jsfiddle.net/woqsazau/1/

In my case I was using ChartJs inside a bootstrap tab inside a bootstrap modal. The problem in my case was the modal, and not the tab. The code related with Chartjs has to be set into
$('#modal').on('shown.bs.modal', function (event) {
$.getJSON(http://whatever.com/file.js, function( data ) {
var ctx = document.getElementById("heightChart").getContext("2d");
window.myNewChart = new Chart(ctx).StackedBar(data, {
responsive : true,
animation: true,
showScale: true,
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
});
});
});
I have found a hint on this other issue: Bootstrap Modal with Chart.js linechart

The panels accessed by the tabbed panes defined should have the attribute active:
<ul>
<li role="presentation" class="active col-sm-3">
Sample
</li>
</ul>
<div class="tab-pane fade in active" id="tab3primary">
<canvas>---displays the image here ---</canvas>
</div>
This is the loading the graph