I am getting tooltip on mouse hover by each row for current column but I am unable to get next column tooltip on continue hover on same row.
But I can get it if I hover on another row & again hover any column of the previous row by using:
listeners:{
'itemmouseenter': function (view, record, item, index, e, eOpts) {
var gridColums = view.getGridColumns();
var column = gridColums[e.getTarget(this.view.cellSelector).cellIndex];
Ext.fly(item).set({ 'data-qtip': 'Des:' + column.dataIndex });
}
}
Can anyone show me what I'm missing or point me in the right direction?
I have an easy one, using the renderer function:
{
xtype : 'gridcolumn',
dataIndex : 'status',
text : 'Status',
renderer : function(value, metadata) {
metadata.tdAttr = 'data-qtip="' + value + '"';
return value;
}
}
I was looking through this. I could manage to get the tool tip for each cell by doing something like this:
Ext.getCmp('DynamicDemandGrid').getView().on('render', function(view) {
view.tip = Ext.create('Ext.tip.ToolTip', {
// The overall target element.
target: view.el,
// Each grid row causes its own seperate show and hide.
delegate: view.cellSelector,
// Moving within the row should not hide the tip.
trackMouse: true,
// Render immediately so that tip.body can be referenced prior to the first show.
renderTo: Ext.getBody(),
listeners: {
// Change content dynamically depending on which element triggered the show.
beforeshow: function updateTipBody(tip) {
var gridColums = view.getGridColumns();
var column = gridColums[tip.triggerElement.cellIndex];
var val=view.getRecord(tip.triggerElement.parentNode).get(column.dataIndex);
tip.update(val);
}
}
});
});
Let me know if it helps
{
text: name,
width: 80,
dataIndex: dataIndex,
sortable: true,
listeners: {
afterrender: function ()
{
Ext.create('Ext.ToolTip',
{
target: this.getEl(),
anchor: direction | "top",
trackMouse: true,
html: this.text
});
}
}
}
Related
I need to make an API call when clicking on a bar element. For example, look at this jsfiddle.
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-point-events-click-column/
See how the x axis has the 12 months? Let's say that when clicking on the bar for "April," I want to make an API call in order to get sales data for the month of April and display that on the graph. I can't find a way to do this, because this click function...
plotOptions: {
series: {
events: {
click: function (event) {
//code goes here
}
}
}
}
... can only access items inside of the chart. I need to make an outside call to the database when clicking on a bar. Anything I can do? Thanks.
I tried this
document.querySelector('.rect.highcharts-point').addEventListener('click', e => {
//code goes here
});
It didn't work at all which is confusing, because this method clearly works when referencing the chart as whole, but doesn't work for just a bar element as you can see it working for the entire chart in this jsfiddle.
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/events-container/
Three ways how you can achieve that:
From the callback to the built-in point click() event:
plotOptions: {
series: {
point: {
events: {
click() {
let point = this;
getPoint(point)
}
}
}
}
},
.
function getPoint(p) {
console.log('From the callback: ', p)
}
From the div container:
document.querySelector('.chart-container').addEventListener('click', e => {
if (e.point != undefined) {
console.log('From the container: ', e.point)
}
});
Looping through the rects:
function getPointLoop(p) {
p.addEventListener('click', e => {
console.log('From the loop:', e.target.point)
})
}
let points = Array.from(document.querySelectorAll('rect.highcharts-point'))
for (i = 0; i < points.length; i++) {
getPointLoop(points[i])
}
Demo:
https://jsfiddle.net/BlackLabel/9bos6eu8/
When using your own cell renderer for e.g. an action column - with links or buttons in it -, AgGridReact still triggers a onRowClicked event when you click on one of the links or buttons. event.stopPropagation and event.preventDefault do not help.
// list of rowActions ...
function RowActionsRenderer(props) {
let row = props.data;
return <div>{
rowActions.map((actionDef, index) =>
<Button onClick={(event) => {
event.stopPropagation();
event.preventDefault();
//_processAction(actionDef, row)
}}>{label(actionDef.name)}</Button>
)
}</div>;
}
Definition of cellRenderer:
// ...
columnDefs.push({
headerName: 'actions',
field: '-actions-',
width: 120,
sortable: false,
filter: false,
cellRenderer: 'rowActionsRenderer'
});
// ...
frameworkComponents: {
rowActionsRenderer: RowActionsRenderer
},
Registration of event listening:
onRowClicked={(row) => {
// always runs event when when clicked on button in the '-actions-' column !!!
}}
Now, how do you prevent onRowClicked being called when clicking anything in the '-actions-' column?
There are some rather complicated low level calls to the AgGrid api I like to avoid.
So my proposed solution would be:
First, do not listen to row clicks.
Second listen to cell clicks and filter out column id '-actions-'
onCellClicked={(cell) => {
if (cell.column.getColId() === '-actions-') {
return;
}
let row = cell.data;
// process row data ...
}
I have a pie chart built using a data.table (HTML table). http://jsfiddle.net/m78Lwkqt/2/
I want to use a 3rd column of the table to drive a click to a particular URL.
series:[
{
type: 'pie',
animation: false,
point:{
events:{
click:
function (event)
{
// I want to get the 3rd column of the table's value
// that corresponds to this point.
alert(this.y);
}
}
}
}
]
Found an answer: http://jsfiddle.net/ryanreid22/m78Lwkqt/4/
The trick is to add a seriesMapping value (in this case I've called it 'accountCode') that can be used in the point.click handler.
data: {
table: 'smry_t_pb_outlay_by_account',
seriesMapping: [{
x: 0, // X values are pulled from column 0 by default
y: 1, // Y values are pulled from column 1 by default
accountCode: 2 // used in the point.click below
}]
},
events: {
click:
function (event) {
alert(this.accountCode);
}
}
You could use a jQuery selector to get all the tds from the third column, and when needed match this.x from this click event up against the array you got from the jQuery selector.
For example, getting the third column using a jQuery selector:
var thirdColumn = $("#smry_t_pb_outlay_by_account tr td:nth-child(3)");
And then using this array inside your point.events.click to get the data:
point: {
events: {
click: function (event) {
alert(thirdColumn[this.x].innerHTML);
}
}
}
See this JSFiddle demonstration of the code.
I would like to use a CSV file as source for a highcharts graph.
Could you give some guidance? I need to understand basically how to get data in the web page.
Do I need to put the function that load the text file in the "series" part of the js function?
This is what I have so far:
<script type='text/javascript'>
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'chart example'
},
xAxis: {
categories: []
},
yAxis: {
},
series: []
};
$.get('test.csv', function(data) {
// Split the lines
var lines = data.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first
// position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 1) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
This is how the data file is structured in the CSV file:
Compound,Value
mix1,0.244
mix2,0.453
pureCu,1
pureAg,0.98
The value of column 1 is an ID basically, so the distance between each of them could be considered as 1. So technically, the first column would be always from 1 to 15 for example, with the label using the name in the first column
I would like to put the second field on the Y, and on the X the first field; but using the code pasted (which is what is on an example on the Highcharts website), I can't really figure out how to set up correctly the values on each side of the chart.
Thanks
Here you can find tutorials from Highcharts to load data from external file: http://www.highcharts.com/docs/working-with-data/preprocessing
About refreshing page - yes you can refresh page every n-seconds, however it would be better (I think) to call AJAX to fetch new data from server and then replace it in Highcharts (simply using chart.series[0].setData( new_array_of_data );
I'm new to jQuery UI.
I'm trying to create a selectable jQuery UI tooltip. The tooltip is associated with the links on a page.
When the link is surrounded by just text, it works fine. But when there are few links next to each other, the functionality overlaps and tooltips don't show smoothly anymore.
you can find the code on http://jsfiddle.net/zumot/Hc3FK/2/
Below the JavaScript code
$("[title][data-scan]").bind("mouseleave", function (event) {
event.stopImmediatePropagation();
var fixed = setTimeout('$("[title][data-scan]").tooltip("close")', 100);
$(".ui-tooltip").click(function () {
alert("I am clickable");
return false;
});
$(".ui-tooltip").hover(
function () {
clearTimeout(fixed);
},
function () {
$("[title][data-scan]").tooltip("close");
});}).tooltip({
items: "img, [data-scan], [title]",
content: function () {
var element = $(this);
if (element.is("[data-scan]")) {
var text = element.attr("href");
return "<a href='http://www.google.com'>You are trying to open a tooltip <span>" + text + "</span></a>";
}
if (element.is("[title]")) {
return element.attr("title");
}
if (element.is("img")) {
return element.attr("alt");
}
},
position: {
my: "right center",
at: "left center",
delay: 200,
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}});
My attempt to fix the issue was by making the variable fixed global (to make it accessible by other jQuery UI properties), and on Open event, hide any other previously opened tooltips and clear the timeout id saved in fixed variable.
You can find the solution here http://jsfiddle.net/zumot/dVGWB/
, though to see the code working properly, you'll have to run it directly on your browser.
Here's the snapshort of the fixed code.
// Make the timeout id variable global
var fixed = 0;
$("[title][data-scan]").tooltip({
items: "img, [data-scan], [title]",
content: function () {
var element = $(this);
if (element.is("[data-scan]")) {
var text = element.attr("href");
return "<a href='http://www.google.com'>You are trying to open a tooltip <span>" + text + "</span></a>";
}
if (element.is("[title]")) {
return element.attr("title");
}
if (element.is("img")) {
return element.attr("alt");
}
},
open: function (event, ui) {
// When opening a new div, hide any previously opened tooltips first.
$(".ui-tooltip:not([id=" + ui.tooltip[0].id + "])").hide();
// clear timeout as well if there's any.
if (tf > 0) {
clearTimeout(tf)
};
},
position: {
my: "right center",
at: "left center",
delay: 200,
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
}).bind("mouseleave", function (event) {
// stop defeulat behaviour
event.stopImmediatePropagation();
fixed = setTimeout('$("[title][data-scan]").tooltip("close")', 100);
$(".ui-tooltip").hover(
function () {
clearTimeout(tf);
}, function () {
$("[title][data-scan]").tooltip("close");
})
});