I have created a bubble chart using d3js and have added Extjs tooltip to it. In doing so, I have created separate tooltip for each of the circles in the bubble chart. There is a noticeable delay in display of the tooltip when I move the mouse pointer from 1 circle to the other. So I want to have a single tooltip for all the circles.
Can someone tell me how to use delegate: '.x-form-field-wrap' to create a single tooltip.
Here is the fiddle.
There is no need for creating multiple tool-tips. Create a single tooltip and just update it's position on mouseover and mousemove.
var tip = Ext.create('Ext.tip.ToolTip',{
title: 'test',
width: 150,
height: 40,
radius:5,
hidden: true,
anchor: 'left',
autoHide: false,
trackMouse: true,
anchorToTarget: false
});
circle.on('mouseover',function(d,i){
tip.setTitle("radius: "+d.radius);
tip.showAt([d3.event.x,d3.event.y]);
}).on('mousemove',function(d,i){
tip.setTitle("radius: "+d.radius);
tip.showAt([d3.event.x,d3.event.y]);
});
Updated fiddle
This question is a classic example of the xy problem.
You can solve your problem in a single line, namely by setting showDelay:0 on the tooltips.
You need to calculate X and Y coordinate and show one div on mouseover event. you can do this using below fiddle code:
I think this solution is better than extjs.
var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", function (d) {
return d.radius;})
.style("fill", function (d, i) {
return "green";}).on("mouseover", function (d, i) {
tDiv.html("Radius :" + d.radius + "</br>Name:" + data.children[i].name + "</br>Size:" + data.children[i].size);
tDiv.style("left", ((d3.event.pageX) - $(tDiv[0]).width() - 10) + "px").style("top", (d3.event.pageY - 0) + "px"); }).on("mouseleave", function (d, i) {
tDiv.style("display", "none");})
.call(drag);
You can refer this fiddle code
Related
I used angular-chart.js in my website to create a Pie chart, and I would like to customize the legend. By default, the legend shows the color and the label. (As shown in the picture below) I would like to add the value/data of that label, like what it shown in the tooltip of the chart.
This is my HTML code:
<canvas id="pie" class="chart chart-pie"
chart-data="chartData" chart-labels="chartLabels" chart-options="chartOptions">
</canvas>
Based on the angular-chart.js documentation, legend is now a Chart.js option so the chart-legend attribute has been removed.
That is why, in my JS code I've tried to add generateLabels, just in case this is what I need to customize the legend:
$scope.chartOptions = {
legend: {
display: true,
labels: {
generateLabels: function(chart){
console.log(chart.config);
}
}
}
};
But whenever I add this lines, it will not show the chart. I think it is an error or something. And I'm not sure, if generateLabels is the right option that I needed.
Can somebody teach me the right way to customize the legend to achieve what I wanted?
Thanks in advance!
Let me try shedding some light/answering your question:
generateLabels: does make custom labels,and replaces templates from v1 but in order to use it you have to get your chart information and reimplement legend labels adhering to the Legend Item Interface found in the docs and code. Sounds a bit cryptic, but in practice is somehow simple and goes like this:
var theHelp = Chart.helpers;
// You need this for later
// Inside Options:
legend: {
display: true,
// generateLabels changes from chart to chart, check the source,
// this one is from the doughnut :
// https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.doughnut.js#L42
labels: {
generateLabels: function(chart) {
var data = chart.data;
if (data.labels.length && data.datasets.length) {
return data.labels.map(function(label, i) {
var meta = chart.getDatasetMeta(0);
var ds = data.datasets[0];
var arc = meta.data[i];
var custom = arc && arc.custom || {};
var getValueAtIndexOrDefault = theHelp.getValueAtIndexOrDefault;
var arcOpts = chart.options.elements.arc;
var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
return {
// And finally :
text: ds.data[i] + "% of the time " + label,
fillStyle: fill,
strokeStyle: stroke,
lineWidth: bw,
hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
index: i
};
});
}
return [];
}
}
}
Result:
Codepen: Chart.js Pie Chart Custom Legend Labels
There are other alternatives, if you notice on the pen/pie, the slices also have data information, that is from a plugin (check the pen)
Still another option, is to render the legend labels off canvas,for instance:
myPieChart.generateLegend();
Which gives you this Html:
"<ul class='0-legend'><li><span style='background-color:black'> </span>she returns it </li><li><span style='background-color:white'></span>she keeps it</li></ul>"
I haven't tried it, but I think you can modify it with the global method for your data Legend on the callback an it will give you a block of Html you can insert off canvas.
I am trying to work with nvd3 lineWithFocusChart for time series data. But surprisingly y axis ticks are appearing as 000.00. The json data is in correct format as given in nvd3 website. I have placed my reference plunker at http://plnkr.co/edit/QwMbTL4co0wMVKaQurxq?p=preview.
In order to sort the time series data, I have used the following function. With this, data is displayed properly except y-axis ticks issue. However tool tip is appearing fine with its correct values. What shall I do, to fix the appearance of y-axis ticks as 000.00
angular.forEach($scope.data, function(
series, index) {
series.values.sort(function(a, b) {
return a.x - b.x;
});
});
Your chart width is hiding the values.
Add a width : 700,
And change the margins
margin : {
top: 20,
right: 20,
bottom: 60,
left: 100
},
UPDATE : You could also completely remove width and the margin , by default it will take the div size and re-sieze automatically.
Hope it helps
You just need to not format the Y axis :
yAxis: {
axisLabel: 'Y Axis',
tickFormat: function(d){
return d;
},
rotateYLabel: false
},
Updated plunker.
Absolutely pulling my hair out on this one. There seems to be no black and white solution offered on GitHub - which is strange, since it seems like a fairly simple concept. Perhaps I just don't get it.
Basically, I am trying to create a fluid and responsive portfolio - using Isotope to filter the items. The filtering works fine, the 4 columns are totally fluid and everything looks great when you resize the window.
HOWEVER, for mobile and tablet layouts, I simply need to adapt from a 4-column layout to a 2-column layout.
I tried this:
$(window).load(function(){
var $container = $('#thumbs');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
},
});
// initialize Isotope
$container.isotope({
// options...
resizable: false, // disable normal resizing
// set columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 4 },
});
// update columnWidth on window resize
$(window).smartresize(function(){
$container.isotope({
// update columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 4 }
});
});
// My attempt at using media queries to change 'columnWidth'
$(window).resize(function() {
var width = $(window).width();
if (width < 768) {
$container.isotope( {
// update columnWidth to half of container width
masonry: { columnWidth: $container.width() / 2 }
});
}
});
});
Didn't work :(
Any help would be much appreciated.
This should work to set your number of columns. Then you just divide with columns.
var columns;
// set column number
setColumns();
// rerun function when window is resized
$(window).on('resize', function() {
setColumns();
});
// the function to decide the number of columns
function setColumns() {
if($(window).width() <= 768) {
columns = 2;
} else {
columns = 4;
}
}
I think there's a slightly nicer way where you can still use css media queries. See my answer here: https://stackoverflow.com/a/20270911/1010892
Hope that helps!!
In this example of ExtJS 4.1, actually the left elements (patients) are cloned from the view to the right grid (Hospitals) I want to remove the patients of the left view when I drag and drop to the right grid, and add the capacity to move the items from the right grid to the left view:
I made the first part (moving to the right) with a trick (slideOut) I did it with this:
before at the function initializePatientDragZone I added:
return v.dragData = {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
ddel: d,
patientData: v.getRecord(sourceEl).data,
patientElement: sourceEl //This part
};
and then I added one slideOut trick like this, at the onNodeDrop function:
onNodeDrop : function(target, dd, e, data){
var rowBody = Ext.fly(target).findParent('.x-grid-rowbody-tr', null, false),
mainRow = rowBody.previousSibling,
h = gridView.getRecord(mainRow),
targetEl = Ext.get(target);
targetEl.update(data.patientData.name + ', ' + targetEl.dom.innerHTML);
//this slideOut
Ext.get(data.patientElement).slideOut('t', {
easing: 'easeOut',
duration: 500,
remove: true,
useDisplay: true
});
return true;
}
You can see how it looks now : in this animation
now I just want to move the items at the right grid to the left view.
I've achieved this kind of functionality in an earlier project using the grid-to-grid DND plugin.
For example, one grid of patients, three other grids for the three hospitals.
Layout the grids as siblings and the only additional configs you need for them is this:
multiSelect: true,
viewConfig: {
plugins: {
ptype:'gridviewdragdrop'
}
},
You will be able to multi-select them back and forth and you don't have to mess around with drop zones. It was the easiest way to achieve the functionality you want.
Using Ext JS 4.0.2, I'm trying to open a window that automatically sizes itself big enough to fit its content, until it hits a height limit, at which point it stops getting bigger and shows a scroll bar.
Here's what I'm doing
Ext.create('widget.window', {
maxHeight: 300,
width: 250,
html: someReallyBigContent,
autoScroll: true,
autoShow: true
});
When the window is first rendered, it's sized big enough for the really big content--bigger than the maxHeight should allow. If I attempt to resize it, then snaps down to the maxHeight of 300px.
How do I constrain the window to its maxHeight when it's initially rendered?
I have exactly the same problem and for now I'm doing a litle dirty hack :)
this.on('afterrender', function() {
if (this.getHeight() > this.maxHeight) {
this.setHeight(this.maxHeight);
}
this.center();
}, this);
Depending on the content of the window, you must use the afterlayout event. Instead of using this.maxHeight, to use the whole viewport, use Ext.getBody().getViewSize().height or in vanilla JS use window.innerHeight.
This version will work even if the windows contains other components and not only huge html:
listeners: {afterlayout: function() {
var height = Ext.getBody().getViewSize().height;
if (this.getHeight() > height) {
this.setHeight(height);
}
this.center();
}}
This can be better :
bodyStyle: { maxHeight: '100px' }, autoScroll: true,
I don't see an out-of-the-box way to do this. However, you might try this approach:
Place the contents of the window into a container inside the window (i.e. make someReallyBigContent be inside a container.) On afterrender, get the height of that inner container and then proceed to set the height of the outer window based on that.
How I ended up displaying a window with an unknown amount of fields on a form (constrain = body.el):
prefForm.itemId = 'prefForm';
win = Ext.create('Ext.window.Window', {
layout : {
type : 'vbox',
align : 'center'
},
buttons : buttons,
maxHeight : constrain.dom.clientHeight - 50,
title : title,
items : prefForm,
listeners : {
afterrender : {
fn : function(win) {
var f = win.down('#prefForm');
f.doLayout();
var h = f.body.dom.scrollHeight;
if (f.getHeight() > h)
h = f.getHeight();
win.setHeight(h + 61);
win.center();
},
single : true
}
}
});
You can add this config on your window
maximizable: true
if you want you could programmatically 'click' that button :)
Now I see what you are trying to do. I think the only thing missing from your config is the height parameter. Set it to the same number as maxheight. That should do it, you won't need to call setHeight().
This is just like Ivan Novakov answer, except I prefer it when you override the onRender class for these types of classes.
This is for a couple of reasons. Removes an additional event listener, and in the case you have multiple things that need to occur at afterrender time. You can control the synchronization of these tasks.
onRender: function(ct,pos) {
//Call superclass
this.callParent(arguments);
if (this.getHeight() > this.maxHeight) {
this.setHeight(this.maxHeight);
}
this.center();
}
I had the little bit different problem. In my case ExtJS code there inside the HTML popup windows. And I had to achieve:
change the size of panel when we change the size of popup windows.
Ivan Novakov's solution worked for me.
Ext.EventManager.onWindowResize(function () {
var width = Ext.getBody().getViewSize().width - 20;
var height = Ext.getBody().getViewSize().height - 20;
myPanel.setSize(width, height);
});