How to highlight a jqplot bar chart with javascript - javascript

I have a data table which is parsed and is used to generate a bar chart with jqplot. I want to be able to highlight the specific bar when the table row is hovered.
Highlighting the way around is easy - just hooking to the jqplotDataHighlight and jqplotDataUnhighlight events. Any ideas how to do it the way around?

Nice that you managed to sort it out by yourself, Nickolay.
I would like to propose a different approach, though. One which doesn't involve changes to the highlighter script. My solution which you could adopt to your needs is presented in my answer to a similar problem.
Direct link to jsfiddle presenting my approach.

I kind of nailed it down.
I have extended the Highlighter object located in jqplot.highight.js so it would allow us to highlight and unhighlight from outside the library.
Sill this can be used for any highlight but the renderer should be detected. Which I didn't spent the time to do so.
$.jqplot.Highlighter.highlightBar = function(plot, serIndex, barId, barXVal, barYVal) {
//We just use the showTooltip. Simple!
var neighbor = {
seriesIndex: serIndex,
pointIndex: barId,
data: {
0: barXVal,
1: barYVal
},
gridData: plot.series[serIndex].gridData[barId],
points: plot.series[serIndex]._barPoints[barId]
}
showTooltip(plot, plot.series[serIndex], neighbor);
barHighlight(plot, serIndex, barId, neighbor.points);
}
function barHighlight(plot, sidx, pidx, points) {
var s = plot.series[sidx];
var canvas = plot.plugins.barRenderer.highlightCanvas;
canvas._ctx.clearRect(0,0,canvas._ctx.canvas.width, canvas._ctx.canvas.height);
s._highlightedPoint = pidx;
plot.plugins.barRenderer.highlightedSeriesIndex = sidx;
var opts = {fillStyle: s.highlightColors[pidx]};
s.renderer.shapeRenderer.draw(canvas._ctx, points, opts);
canvas = null;
}
function barUnhighlight(plot) {
var canvas = plot.plugins.barRenderer.highlightCanvas;
canvas._ctx.clearRect(0,0, canvas._ctx.canvas.width, canvas._ctx.canvas.height);
for (var i=0; i<plot.series.length; i++) {
plot.series[i]._highlightedPoint = null;
}
plot.plugins.barRenderer.highlightedSeriesIndex = null;
plot.target.trigger('jqplotDataUnhighlight');
canvas = null;
}
$.jqplot.Highlighter.clearHighlight = function (plot) {
barUnighlight(plot);
}

Related

How to move the mouse with webshot function inside a dygraph widget

I'm stuck because I can not achive what I want with a dygraph widget created in R.
I have this time series.
#library(xts)
dts <- xts::xts(c(10508,8465,3175,3816,4532,2735,2534,9541,8253,9962),
order.by = seq(from = as.Date("2022-02-01"), to = as.Date("2022-11-01"), by = "month"))
I can plot it in a dygraph widget
#library(dygraph)
object <- dygraph((dts),
ylab = "") %>%
dyRangeSelector(height = 20, strokeColor = "") %>%
dyOptions(fillGraph = FALSE, stackedGraph = FALSE, drawGrid = FALSE, strokeWidth = 3) %>%
dyHighlight(highlightSeriesOpts = list(strokeWidth = 3,highlightCircleSize = 10))
and save it in a html page.
#library(htmlwidgets)
saveWidget(object, "temp.html", selfcontained = FALSE)
Now, I would like to take a screenshot of the plot. I know I can do it with
webshot::webshot(url = "images/temp.html", file = "screenshot.png")
No problem with that. But I should hover the mouse near the last data point before the screenshot, because I would like the chart to show the information of the last point in the legend.
I have tried with
webshot::webshot(url = "images/temp.html", file = "screenshot.png"),
eval = "this.mouse.click(1781, 109);")
I got the X,Y coordinates injecting the following code in the inspection frame of the page.
<html onclick="display(event)">
function display(event) {
let X = event.clientX;
let X = event.clientX;
alert = (X + Y);
}
But it does not seem to work.
I get
but I would like something like this
Actually, I would like to hover the last point regardless the time series.
I know it could be done with ggplot and save me a lot of steps but the dygraph is mandatory and I would like to get the static plot from it.
I know also that it is maybe more of a javascript or casperjs question. If so I wouldn't mind repeat the question in the appropriate forum.
In advance, thank you very much for your help.

HighChart with more than 50 data points breaks

I am trying to create a bubble chart using the JS HighChart in Angular2+. Whenever there are more than 50 data points (bubbles), the graph breaks. There are the correct number of bubbles in the correct positions (x,y plots) with all different colors but the sizes are all the same even though the z-values are all different. (I am outputing the z-values in a tooltip and the z-values are accurate)
This function is how I am passing in data to the high-chart configuration.
setSeries() {
this.objData = []
this.Data.forEach(element => {
var x= element['xVal'];
var y = element['yVal'];
var z = element['zVal'].toFixed(0);
var name = element['seriesName'].trim();
var newData =[{
x:x,
y:y,
z:+z,
}]
// SetSeriesData is how i am creating the obj to pass into series=[] in highchart configuration
if(i<50) //If I comment this condition, the graph breaks. Right now, the graph is working properly
this.setSeriesData(sumData, name, this.objData)
i++
})
this.options.series = this.objData;
this.generateChart();
}
This is my setSeriesData function.
setSeriesData(graphData: any, dataName: any, objData: any){
var obj = {};
obj['name'] = dataName;
obj['data'] = graphData;
obj['events'] = {click: function(e) {
//takes me to another link
}};
objData.push(obj)
}
In the above function, I configured the chart so that when you click the bubble, it takes you to another page. When the data points >50, this click functionality is not working either. In addition, the fillOpacity is not correct.
Just a few things to point out
1. I am using Angular 2+
2. The discovered issues are, fillOpacity, click, and size based on z-value.
3. It works perfectly when the data points are less than 50
How can I fix this?

ChartJS onclick fill area (Radar Chart)

I'm trying to create a function in JQuery that increase and decrease the points clicked. I've managed to create the onclick event that increases the points, but can't figure out how to decrease it.
$("#radarChart").click(
function (evt) {
var activePoints = myRadarChart.getPointsAtEvent(evt);
var Values = activePoints[0].label + ' = ' + activePoints[0].value;
activePoints[0].value++;
}
);
The above function increases the value of a point when clicked, in order to decrease it I need to know if the filled area is clicked.
I looked at ChartJS documentation and didn't come across it. Other charts do have it, for example Polar Area Chart, when you are hovering a section, it highlights, meaning there is a function that detects mouse hovering over segments.
Does a similar function exist in Radar Charts?
My codepen.
If not, any ideas on how I could achieve this, would be appreciated.
The only alternative I can think of, would be to create 10 buttons, 5 labels. The buttons would be + and -, increase and decrease the label. This takes too much space in my opinion, so I'm trying to avoid it.
Thanks,
There really is no specific chart.js API to do what you are wanting, but you can achieve the same results using the canvas API and a little geometry.
Basically, you want to increase the value if the user clicks outside the current value's region, and you want to decrease if the user clicks inside the current value's region.
I've modified your click handler to do just that.
function getElementPosition(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
return undefined;
};
function getEventLocation(element,event){
// Relies on the getElementPosition function.
var pos = getElementPosition(element);
return {
x: (event.pageX - pos.x),
y: (event.pageY - pos.y)
};
};
function pointDistance(point1, point2) {
return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
};
//Get the context of the Radar Chart canvas element we want to select
var ctx = document.getElementById("radarChart").getContext("2d");
// Create the Radar Chart
var myRadarChart = new Chart(ctx).Radar(radarData, radarOptions);
$("#radarChart").click(function (evt) {
var eventLocation = getEventLocation(this,evt);
var activePoints = myRadarChart.getPointsAtEvent(evt);
var eventLocDistToCenter = pointDistance({x: myRadarChart.scale.xCenter, y: myRadarChart.scale.yCenter}, eventLocation);
var activePointDistToCenter = pointDistance({x: myRadarChart.scale.xCenter, y: myRadarChart.scale.yCenter}, activePoints[0]);
if (eventLocDistToCenter < activePointDistToCenter) {
activePoints[0].value--;
} else {
activePoints[0].value++;
}
myRadarChart.update();
});
Note, I also added a call to .update() so that the chart renders the change immediately. With the way you had it implemented, you would not see the chart change until the next render (i.e. when the mouse moves).
Here is a codepen forked from yours with the working solution. Click around to check it out.
Lastly, you probably want to think about upgrading to chart.js 2.0 (latest release is 2.5). 1.0 is long since unsupported and the latest version has LOTS of improvements. You should be able to easily port this over. Post a new question if you need help.

JointJS drawing multiple custom connectors to an element

I'm using my own custom connector implementation and i want to be able to consider other connectors to the same elements in order to calculate the source and target points better.
joint.connectors.custom = function (sourcePoint, targetPoint, vertices) {
// I want to calculate the "middle" point while considering other links that might interrupt
var sourceMiddleX = this.sourceBBox.x + this.sourceBBox.width / 2;
var d = ['M', sourcePoint.x, sourcePoint.y, targetPoint.x, targetPoint.y];
return d.join(' ');
};
So far i couldn't find anything helpful under the function context nor under the VElement..
Unless anyone has a better idea, i'll pass the total links per element in each model which doesn't feels right.
Thanks in advance!
Connector functions in JointJS are called with a value of this equal to a joint.dia.LinkView instance. Each linkView has access to the paper it's rendered in.
var paper = this.paper; // an instance of `joint.dia.Paper`
var graph = this.paper.model; // an instance of `joint.dia.Graph`
var link = this.model; // an instance of `joint.dia.Link`
// an instance of `joint.dia.Element` or `null`
var sourceElement = link.getSourceElement();
var sourceElementLinks = sourceElement
// an array of `joint.dia.Link` including the link
// these are connecting the same source element as the link
? graph.getConnectedLinks(sourceElement, { outbound: true })
// the link is not connected to a source element
: [];
// an instance of `joint.dia.Element` or `null`
var targetElement = link.getTargetElement();
var targetElementLinks = targetElement
// an array of `joint.dia.Link` including the link
// these are connecting the same target element as the link
? graph.getConnectedLinks(targetElement, { inbound: true })
// the link is not connected to a target element
: [];
You can also check the jumpOver connector, that implements a similar logic.

Manually Add Nodes to JavaScript InfoVis Toolkit Force Directed Graph

I am attempting to use the JavaScript InfoVis Toolkit found here: JS InfoVis ToolKit to create a Force Directed Graph. We don't really want to use a JSON to "feed" the data to the graph -- instead we would rather manually add nodes.
I have put together the following code -- but when I attempt to draw the graph my root node is not found in line 7118 of jit.js (var root = aGraph.getNode(id);). I have omitted the specifics on my ForceDirected options -- but those should not affect the result.
fd = new $jit.ForceDirected({...})
//Create main node
var rootNode = { id: "root", name: "Actors", data: { "$color": "#557EAA"} }
fd.root = rootNode;
fd.graph.addNode(rootNode);
$.each(array, function (index, art) {
var pubId = art.pubMedId.toString();
var labelText = "Article " + pubId;
var node = { id: pubId.toString(), name: labelText, data: { "$color": "#557EAA"} }
//Create Nodes -- connect them to main node for now
fd.graph.addNode(node);
fd.graph.addAdjacence(rootNode, node, {});
text = text + art.pubMedId + ',';
});
//Display graph
fd.plot();
Does anyone have experience doing this?? Looking for guidance. I have debugged in FireBug and everything appears to be loaded into the graph correctly (ie - all nodes exist). I am at a loss.
Instead of fd.root = rootNode;, you want to use fd.root = rootNode.id;. I was surprised by this as well.
Additionally, you'll probably want to initialize the Graph before adding the root node:
fd.graph = new $jit.Graph(fd.graphOptions, fd.config.Node, fd.config.Edge, fd.config.Label);
Note: tested with version 2.0.1.

Categories

Resources