I have the following use case: On a page there is a Highcharts column with drilldown as in this example.
When the labels below the bars are clicked, I would like to drilldown, as default. However, when the bar / column itself is clicked, I do not want to drilldown but rather get information on the clicked bar (e. g. the name of the category). How is this possible?
What I've tried so far is to evaluate the click event with jQuery and then stop drilling down by using "return false;". The problem with that is that I have seen no way to retrieve the column data as the JavaScript object itself is not accessible.
What I did then is to use the "drilldown" event. I can now easily access the objects data / properties but have have two difficulties:
How to identify whether a bar or the label below the bar was clicked?
How can I prevent the drilldown in case a bar was clicked?
Thank you in advance for hints and tips!
Andy
You can wrap doDrilldown method, and there decide what should happen and when, snippet:
(function (H) {
H.wrap(H.Point.prototype, 'doDrilldown', function (p, hold, x) {
var UNDEFINED;
if (x !== UNDEFINED) {
p.call(this, hold, x); // x is defined when clicked on a category
} else {
myFun(this); // call your method after click on a bar
}
});
})(Highcharts)
And live demo: http://jsfiddle.net/L51c8fa4/
Related
I use a standalone chart from the Ag Grid library and want to manipulate manually which legend items should be shown/selected by default. I didn't find any specific API/property which can cover this use-case.
E.g., I want to see selected only the diesel legend item (and petrol should be shown unselected),
AgChartsReact always shows all legend items.
What did I investigate and try?
The chart is a canvas element, so I thought that it is possible to manipulate legend items from the canvas context, which I can get with useRef hook. But I cannot find how exactly it can be done and is it possible? Here is a ref to Plunker
UPD:
if someone is looking for how to store the data which legends is active or not, here is a function to get this (the same function you will find in Plunker):
const getLegendStatuses = () => {
const [changeEvent] = chartRef.current.chart.legend.allEventListeners.get("change");
const [, data] = changeEvent;
const [event] = data;
console.log(
event.data.map(({ enabled, label }) => ({ label: label.text, enabled }))
);
}
I think you want to use visible: false on the Petrol series.
This will still show up as greyed out in the legend, but you can click it to open it again.
You can also add showInLegend: false if you want to remove it from the legend.
If you want it greyed out in the legend but NOT clickable on the legend to make it visible, you might be able to make a custom listener for nodeClick, but I haven't tried that.
In my project I have I have ten graphs in a table with each graph showing two datasets.
I want to toggle the visibility of each dataset by clicking it which is default behaviour in ChartJS.
All the charts are held in an array and following the built in toggle method of ChartJS, every chart is updated to the dataset of the first chart. So to be clear, when the page loads, each chart is shown correctly, but if I made the dataset invisible and visible again, it becomes visible but with the wrong data.
I tried writing my own update function to toggle the visibility.
var option = {
legend: {
onClick: ToggleDatasetVisibility,
}}
and then
function ToggleDatasetVisibility() {
this.chart.getDatasetMeta(1).hidden = !this.chart.getDatasetMeta(1).hidden;
// this.chart.update();
}
However exactly the same thing happens. After the update,
*Note, I'm only toggling the second dataset of each DatasetMeta so that's why the 1 is hardcoded in this example. That's not the chart in question.
In case it's useful, we is the code when the charts are primed with data when the page loads and here the update shows the correct data.
for (var i = 0; i < 10; i++) {
var MyArray= await fetch("http://localhost:1234/Demo/FetchResults?model_id=" + i);
//Add the recorded tunnel data to dataset 0
LineChartArray[i].data.datasets[0].data = ResultsArray;
LineChartArray[i].data.datasets[0].label = '';
LineChartArray[i].data.datasets[1].data = MyArray;
LineChartArray[i].data.datasets[1].label = 'LabelXYZ';
LineChartArray[i].update(); //This update updates the graph with the correct data.
}
}
So, I don't know if there's a bug with chart JS or a correct determine which chart to update but I discovered that the render method works. This updates the chart following the visibility toggle loads the correct data back in when made visible. I thought it might be my use of the 'this' command but it works fine with the render method.
I just updated the toggle function like so,
function ToggleDatasetVisibility() {
this.chart.getDatasetMeta(1).hidden = !this.chart.getDatasetMeta(1).hidden;
this.chart.render();
}
We are using ag-grid and I need to display the scrollbar in child window as per selected row position in ag-grid. Please find the below plunkr and click on source_id which is an edit page and I need to show the scroll bar as per selected/highlighted row on window popup screen.
In my code scroll bar is working but it is not showing exact scroll bar position as per selected/highlighted row in child window. And please provide inputs for to show the scrollbar in child window as per selected/highlighted row position using ag-grid.
Plunkr url
Note: It has to scroll automatically like selected row position in 'ag-body-viewport' div class.
Follow the below steps:
1)In plunker click on preview button.
2)Click on any source_id in ag-grid.
3)Once click the source_id popup window will be displayed.
4)In popup window another grid will be displayed with highlighted row with respective of source_id.
5)My query is like in this particular window ,how to scroll the scroll bar automatically as per highlighted/selected row postition .
If you take a look at the scrolling section of ag-grid api you'll get an idea how to get about it.
You could update your getRowStyle function to something like this:
function getRowStyle(params) {
....
if (params.data.source_id.trim() === $scope.source_id.trim()) {
colorToReturn = {
'background-color': 'orange'
};
$scope.gridOption.api.ensureIndexVisible(Number(params.data.source_id));
}
....
};
Another Approach with Angular 8 and ag-grid 20.2(enterprise)-
scrollToSelectedRow(){
this.gridApi.ensureIndexVisible(this.gridApi.getSelectedNodes()[0].rowIndex,null);}
ensureIndexVisible takes 2 parameters i.e. rowIndex(integer) and position('top','bottom',null etc).
https://www.ag-grid.com/javascript-grid-api/#scrolling
Though it is too late to reply, considering it might be helpful for someone working on Angular.
goToSelected() {
let addedNode :any []= Object.values(this.gridApi.getModel().getCopyOfNodesMap())
.filter(//logic to fetch row on which you want to scroll to)
if(addedNode !==null && addedNode !=undefined && addedNode.length >0){
let toBeFocused:number = addedNode[0].rowIndex;
this.gridApi.setFocusedCell(toBeFocused, 0);
this.gridApi.ensureIndexVisible(toBeFocused);
this.gridApi.getRowNode(toBeFocused).setSelected(true, true);
}
Here's how I select a particular agGrid row, and make sure it's visible, using Angular & agGrid v23:
let IDofRowToSelect = 123;
this.gridApi.forEachNode((node) => {
node.setSelected(node.data.id == IDofRowToSelect);
if (node.data.id == IDofRowToSelect) {
this.gridApi.ensureIndexVisible(node.rowIndex, 'middle');
}
});
If you want to understand my requirement , first you have to see this demo highcharts demo
. Now click on Tokyo from that demo chart, that tokyo line will be dissappear. Now I want to able to set that property in page load, I mean whenever the page is loaded, the tokyo link should be clicked and only one line should display, when I click on Tokyo then the tokyo line should display. You can find the source code from that demo itself Thank you in advance.
I think what you are after is a way to make only the clicked legend series show. If that is the case you can do it with the plotOptions.series.events.legendItemClick. To have only one series show up initially on the chart (but still show in the legend) you need to set that series' visible property to true and the others to false. If you want to have all series show on initial load that step can be ignored.
To get the toggle working you need to get the index of the legend item you clicked. You then loop through all the series in your chart to find the one that matches that clicked index. When it matches you set series\[i\].show() for the ones that don't you set series.hide().
Here is the basic toggling code:
series: {
events: {
legendItemClick: function (event) {
var seriesIndex = this.index;
var serie = this.chart.series;
console.log(seriesIndex);
for (i = 0; i < serie.length; i++) {
if (serie[i].index == seriesIndex) {
serie[i].show();
console.log(serie[i].index);
} else {
serie[i].hide();
}
}
return false;
}
}
}
And here is a live fiddle.
When creating chart, just set series.visible = false for series which should be hidden by default.
See docs.
I am using amCharts pie chart (v3) and I want to customize the pop up balloon that comes on mouseover on a slice: in addition to routine text like [[value]] [[percent]],
(a) a text that depends on the data item, and
(b) provide different click options to the user depending on data item. Every data row might not have these possibilities in which case the options should not appear.
For example, the pie chart might show wine consumption by country. On hover, I want to provide the user two different click options - one to see consumption by season if available, plus another to see consumption by age group if available.
Is it possible to do so in amCharts? I saw an exit for event clickSlice() here http://docs.amcharts.com/3/javascriptcharts/AmPieChart but nothing on how to modify the balloon text on the fly and add behavior to the balloon that comes on hover.
Will greatly appreciate your help.
For writing dynamic text in the balloon you can also do the folowing:
"graphs": [{
"balloonFunction": function(graphDataItem, graph) {
var value = graphDataItem.values.value;
if (value < 500) {
return value + "<br>(Little)";
} else {
return value + "<br>(A Lot)";
}
}
}],
You can use the following tags: [[title]], [[description]], [[value]] and [[percent]]. says the documentation.
I have used description for a custom field, it works fine.
You can add any custom field to your data provider and then display it in your balloon in the same way as value:
{value:15, title:"slice title", someCustomField:"some custom data"}
and then:
chart.balloonText = "[[someCustomField]]";