The current data is displayed in the form of a line chart through dimple.js. If the same value data appears for the year, the points overlap. In this case, I want to display the tooltips for all the overlapping data when I move the mouse over that point. What should I do?
You need to handle mouseover event of Series object like this,
mySeries.addEventHandler("mouseover", function (e){
var xValue = e.xValue; // e.xValue returns X Axis value of hovered data point
var yValue = e.yValue; // e.yValue returns Y Axis value of hovered data point
// Filter your data with both xValue and yValue, to find overlapped `series` data.
});
This sample demonstrates how to override default tooltip and might be helpful for you too
http://dimplejs.org/advanced_examples_viewer.html?id=advanced_custom_styling
Related
I'm trying to use Ant Design charts to plot an area chart with 3 series - actual, target and forecast. For some reason, the chart plots the series relative to the last item in the array, rather than relative to the x axis. I tried setting the startOnZero: true but that didn't help.
See below example:
In this example, the target is 220 and the actual is 1558, but the target point is higher on the y axis. Recreated:
https://codesandbox.io/s/beautiful-grothendieck-qtjj7?file=/App.tsx:8366-8384
If we put the 'Target' values to the bottom of the data array, it works fine for some reason:
By default it creates a stacked chart. You can set isStack to false.
I need to dynamically sync the xAxis crosshairs across multiple HighStocks charts.
The example http://jsfiddle.net/BlackLabel/hh90ps4c/28/ demonstrates how to sync the controls inside one chart. I cloned the demo into this http://jsfiddle.net/jakobvinther/ayf5gst2/ ...and replaced the single chart by a table with two charts. The JavaScript code was almost just duplicated for the second chart.
Out of the box, zooming, panning and the rangeSelector sliders in the two charts are nicely synced (I did not change any code to achieve that).
The problem is that the xAxis crosshairs in the two charts are not synced, they work inside each chart individually. How can that be done?
/* thanks */
If the charts are not in one column, the problem is the mouse event x coordinate. You can refer to the first chart in the column to get the coordinates you need:
$('#container1').bind('mousemove touchmove touchstart', function(e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
// Find coordinates within the chart
event = Highcharts.charts[0].pointer.normalize(e);
// Get the hovered point
point = chart.series[0].searchPoint(event, true);
if (point) {
point.highlight(e);
}
}
});
Live demo: http://jsfiddle.net/BlackLabel/8krwuof9/
I'm using google charts and I'm trying to get the value of the x and y values along with the series name that a user clicks on. I believe I have the X value by using the following in a click event.
console.log(dataTable.getValue(chartObject.getSelection()[0].row,0))
This get me the X value, but how do I get the series and Y value? Its exactly what shows up on the hover on the point. I just need to be able to grab these values to pass on to another function.
After some research, I've got what I wanted.
//X Axis
console.log(dataTable.getValue(chartObject.getSelection()[0].row,0))
//Y Axis
console.log(dataTable.getValue(chartObject.getSelection()[0].row,chartObject.getSelection()[0].column));
//Series Label
console.log(dataTable.getColumnLabel(chartObject.getSelection()[0].column))
I am attempting to replot a chart when the user selects the tab to display the chart(initially it is set to visibility:hidden). Once it plots the graphs again, I don't see any of the lines or bars in the graphs, I only see the legend. I want to see all of the data again. When I don't hide the element and just plot it, it works fine, but I need to hide the element so that data can be grouped together in a logical order.
Here is the code I use to plot the charts while it's hidden, jqPlots is an array which contains the variables used for plotting.
var plot = $.jqplot (DATA GOES IN HERE)
jqPlots.push(plot)
Then within the handler for displaying the div I have
for(var i = 0; i<jqPlots.length; i++)
{
jqPlots[i].replot();
}
I'm building in some custom functionality where users can click on data points in a line chart to add notes to that date. This is a bit misleading as the notes aren't actually attached to the metrics themselves but rather the date it lands on. In other words, if I have 6 series on one line chart that spans the dates 01/01/12 - 01/08/12, a single note on 01/05/12 will apply to all 6 series. So, as you can imagine clicking on a data point on one of the 6 series or the date 01/05/12 would mislead the user to believe that this note would be applied to that data point, not the entire date and any series that lands on that date.
So, to remedy this usability issue I've decided that the best visual cue would be something like this:
There would be a clickable icon at the top of each xAxis gridLine that would need to scale with the xAxis gridLine (like if a user selects an area to zoom in on).
Suggestions on best way to pull this off? I only need a suggestion for how best to add the icon to every line... I have all post-click functionality already built.
Building on Mark's suggestion using redraw event to position the images and using load event to create them. Adding them on load is necessary to make them available during export and you would not want to create new images on each redraw either.
These chart events are used:
events: {
load: drawImages,
redraw: alignImages
}
In the drawImages function I'm using the inverse translation for the xAxis to position the images on the chart:
x = chart.plotLeft + chart.xAxis[0].translate(i, false) - imageWidth / 2,
y = chart.plotTop - imageWidth / 2;
and then adding them and setting a click handler, zIndex, pointer cursor:
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', x, y, imageWidth, imageWidth)
.on('click', function() {
location.href = 'http://example.com'
})
.attr({
zIndex: 100
})
.css({
cursor: 'pointer'
})
.add();
In alignImages the attr function is used to set new x and y values for the images which are calculated the in the same way as in drawImages.
Full example on jsfiddle
Screenshot:
Couple of ideas. First, I would use the chart redraw event to know when the chart is being redrawn (say on a zoom). Then second, explicitly place your images at the axis locations of interest. To get those query directly out of the DOM.
Using jQuery:
$('.highcharts-axis') //return an array of the two axis.
They will have svg "text element" children with (x, y) positions.