I have a doughnut chart made by Chart.js. When my mouse comes over a portion, the portion label appears such as RED: 300.
What I want is to show this label in the middle when I click it.
I have the code to write in the middle, but I need to know how to make portions to behave as buttons.
I think you're looking for the getSegmentsAtEvent(evt) method.
canvas.onclick = function(evt){
var activePoints = myDoughnutChart.getSegmentsAtEvent(evt);
// => activePoints is an array of segments on the canvas that are at the same position as the click event.
};
If activePoints is empty, that means you can just return because no segment was clicked. Otherwise, go ahead and draw your tooltip.
Related
I have a chartJS line graph, with x-axes labels being the last 72 hours on each hour mark ( for example: [8:00am, 9:00am, 10:00am,...]). Is there a way I can return the closest xAxis label on click? I have found a way to return the x-y coordinates of the graph, but these coordinates are in pixels, and the graph is able to resize its self based on the size of the browser window. If I were to take into account for the current browser window size, and the number of labels displaying, I could calculate which label would be closest, but I am hoping that there is an easier way to do this.
One Idea I have is to return the label that the "ToolTip" is on, on Click. This would be logically equivalent, as in my options I have the tooltip always display for the closest tick whenever the mouse is on the graph. Would it be possible to return the tooltips label onclick?
My ultimate goal is to have access to the nearest x-axis label (as a string) when I click on the graph. Is this possible?
You can add a custom onclick function to the chart and then ask chartjs for the elements at that location.
See this issue for the complete answer with example: get yLabel value onclick chart js
document.getElementById("myChart").onclick = function (evt) {
var activePoints = myChart.getElementsAtEventForMode(evt, 'point', myChart.options);
var firstPoint = activePoints[0];
var xLabel = myChart.data.labels[firstPoint._index];
// Do things with your x label
};
I found many answers how to hide every nth label and yet still be able to show it in the tooltip. But there's a catch. If the label is very long, then the chart would be drawn somehow squished to the top of the canvas. It's logical. But is there any way to hide the labels, still show them in the tooltips and yet ignore them while calculating the y-values? So that the line can be drawn from top to bottom of the canvas?
Thank you for any advice!!
You can extend the line chart to do this. Adapted from Hide labels on x-axis ChartJS (which was for bar charts) with some unneeded code removed.
What we do is pretty simple, we first set the labels array to blanks, allow the initialization to happen and finally loop through the points for the (first) dataset and set the labels to the original labels.
Chart.types.Line.extend({
name: "LineAlt",
initialize: function(data){
var originalLabels = data.labels;
data.labels = data.labels.map(function() { return '' });
Chart.types.Line.prototype.initialize.apply(this, arguments);
this.datasets[0].points.forEach(function(bar, i) {
bar.label = originalLabels[i];
});
}
});
It's enough that you set the labels for the first dataset even if you have multiple datasets - when building a multiTooltip, the label is picked from the first dataset.
Fiddle - http://jsfiddle.net/xjchy2dn/
I am trying to draw a rectangle on the click of a button.
User can select a color and then click button to draw a specific colored rectangle.
How to get this property.
In my fiddle when you click Layer button you can get a rectangle on the canvas. if you uncheck the check box and click it again you will get a rectangle at the same place . I want to create different colored rectangles every time.
This is the code pen which describes the same colored rectangle every time.
http://codepen.io/anon/pen/Ffhjg/
This is the code I am trying to edit.
It is drawing it with black every time now. :(
http://codepen.io/anon/pen/zaFfw
Add the following code in your init3
var oMaterialCB = document.getElementById("pickColor");
var sMaterial = oMaterialCB.options[oMaterialCB.selectedIndex].text;
var sMaterialColor = oMaterialCB.options[oMaterialCB.selectedIndex].value;
m_iCurrentLayerIndex = AddToCB('LayerList', sMaterial + 'Layer');
//x,y, width, height
var l_dYOfPrevLayer = document.getElementById('TextLayer_ULy').value;
var Display_DY = DisplayCoords(l_dYOfPrevLayer); //m_oSetup.Layers[m_iCurrentLayerIndex-1].BottomBoundary;
addRect(0,Display_DY,640,100, sMaterialColor);
// get the last box, update the index for that box and type of that box
}
As my cursor moves, I grab the two closest points IF it is not already on a plotted point.
I want to be able to make these two closest points light up (i.e. change colour to something orange or something), and then go back to normal once the cursor leaves the scope of the graph. How do I go about implementing this?
placeholder.bind("plothover", function (event, pos, item) {
if (item){
local_x = item.datapoint[0].toFixed(2);
local_y = item.datapoint[1].toFixed(2);
if (!updateLegendTimeout){
updateLegendTimeout = setTimeout(updateLegend(local_x,local_y), 1000);
updateLegendTimeout = null;
}
}
else{
var closest_points_container = interpolate(plot,pos.x,pos.y);
//Code to make points glow goes here, they are contained in closest_points[0]
and closest_points[1].
}
Flot provides highlight and unhighlight methods on the plot object, as described in the Plot Methods section of the docs. Unfortunately that has the restriction that only one point may be highlighted at a time. That is baked-in; you can't change it without altering the source.
The work-around I would use is to add a second series showing only points, no lines, and set the point style to appear as a highlight, i.e. with translucency. This highlight series will start out empty; then when you want to highlight a point on your main series you can copy it to the highlight series and redraw.
I'm using Google charts to interactively draw some data.
I want to draw two charts. The first chart plots f(x) vs. x. The second chart plots g(x,y) vs. y (for a fixed value x). On mouseover for the first chart, the x value will be used to redraw g(x,y) vs. y.
For example, on mouseover of x=1 on the first chart, the second chart would refresh, drawing g(1,y) vs. y.
The only way I've been able to accomplish this was to manually bind the mouseover event in javascript, and trigger a full redraw of the second chart (by erasing its data and copying in data with the moused over x value). However, there is a built-in mechanism to redraw the chart using values from controls (e.g. a slider, example here).
Does anyone know if there is a way to bind two charts so that the mouseover event can be used to redraw one chart with new parameters?
Have a look at the Programmatic Control Changes example. You can change the lower and upper bounds of the slider by code:
document.getElementById('rangeButton').onclick = function() {
slider.setState({'lowValue': 2, 'highValue': 5});
slider.draw();
};
If you choose a lowValue and highValue of both 5 for example only rows containing this value for the specified column will be shown. Call this inside your onmouseover event of the first chart:
google.visualization.events.addListener(chart1, 'onmouseover', function (e) {
// get the value for x in the current row from the data table
var xValue = data.getValue (e.row, 0);
// set the new bounds of the slider
slider.setState({'lowValue': xValue, 'highValue': xValue});
// update the slider (and chart2)
slider.draw();
}
);
As you will not want the slider being visible, just hide it:
// the slider has been created with 'containerId': 'control'
document.getElementById ("control").style.display = "none";