I define a drawing panel and some components which are connected each other with SVG paths. I need to redraw connection paths on surface when moving components.
there is my drawing panel
{
xtype : 'panel',
flex : 5,
split : true,
region : 'center',
plain : true,
itemId : 'idCenterRegion',
id : 'centerRegion',
border : 1,
layout : {
type : 'fit',
},
defaults : {
autoScroll : true
},
listeners : {
afterrender : 'setDDTarget'
},
items: [{
xtype : 'draw',
itemId : 'idDrawPanel',
renderTo:Ext.getCmp('centerRegion'),
}]
}
The floating windows are adding to centerregion with draw/drop. there is another controller to draw sprites on surface,
printPath : function(drawItem) {
var source=drawItem.source;
var target=drawItem.target;
var surface = Ext.getCmp('centerRegion').down('draw')
.getSurface('main');
var color = "#000";
var line1,line2;
var posSource=[];
var posTarget=[];
if(source.left<target.left){
posSource[0]=source.left+source.width;
posTarget[0]=target.left;
line1=15;
line2=-15;
}else{
posSource[0]=source.left;
posTarget[0]=target.left+target.width;
line1=-15;
line2=15;
}
posSource[1]=source.top+source.height/2;
posTarget[1]=target.top+target.height/2;
var path = [ "M", posSource[0],
posSource[1], "H",
posSource[0] + line1, "L",
posTarget[0] + line2, posTarget[1], "H",
posTarget[0] ].join(",");
surface.add({
type : 'path',
path : path,
stroke : color,
fill : 'none',
'stroke-width' : 2,
surface : surface,
}).show(true);
},
When connecting any items on this panel it draws sprites but not showing on browser. but if I re-size drawing panel or browser window, sprites are shown,
I couldn't find any reason why its happening.
should I refresh view by using a different way?
That is the result before re-sizing screen, but add sprite method completed successfully.
This screenshot is after re-size height of center region, as you see, sprite is visible now. But any event didn't fire manually on re-size action.
I solved the problem,
It looks like a trick but draw container is working well now.
I called manually draw container's resizeHandler on draw container's 'add' listener.
It fires only one time when adding child windows on centerRegion (at first adding).
There is my solution below, firstly give an 'add listener reference to draw container:
{
xtype : 'draw',
itemId : 'idDrawPanel',
renderTo:Ext.getCmp('centerRegion'),
listeners : {
add: 'addToDrawPanel'
},
}
function:
addToDrawPanel:function( d, component, index, eOpts ){
var s=d.getSize();
var rh= d.getResizeHandler();
rh.call(d,s);
}
Related
How to set background image attribute for a rectangle in my JointJs application ?
Rectangle object doesn't have that attribute perse....what you can do it's create an image object itself:
var image = new joint.shapes.basic.Image({
position : {
x : 50,
y : 40
},
size : {
width : 16,
height : 16
},
attrs : {
image : {
"xlink:href" : "images/background.png",
width : 16,
height : 16
}
}
});
graph.addCell(image);
Then you can play as you need with the attrs of it, you can even create ports and set arrows later if you wish to do diagrams. Other way it's to create a rectangle object and then create this image object above as a cover (in case you need specific attrs from rectangle to code).Tell me how it goes.
I wanted to ask, if there is a way to push chart to right side, so there will not be any free space. I attached simple image, red line show, that this space should be filled also by chart.
Also is possible to create vertical lines as dots ? I can't find answers to my questions, on official doc.
An this is my javsacript code:
var lineChartData = {
labels : ["January","February","March","April"],
datasets : [
{
label: "Dataset",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [0,3,4,11]
}
]
};
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
scaleOverride: true,
scaleSteps: Math.ceil((max-start)/step),
scaleStepWidth: step,
pointDot : false,
});
}
The space is there because the last x axis label (April). Chart.js leaves enough space so that the label does not get clipped off. This also ensures that the tooltip for the last point shows without clipping off.
You could set the last (or all) labels to an empty string to get rid of the space. However, you won't see any labels in the tooltips. If you want to see the labels in the tooltips you need to extend the chart to remove the x axis labels like so
Chart.types.Line.extend({
name: "LineAlt",
initialize: function (data) {
var labels = data.labels;
data.labels = data.labels.map(function () { return '' });
Chart.types.Line.prototype.initialize.apply(this, arguments);
this.datasets[0].points.forEach(function (point, i) {
point.label = labels[i]
})
}
});
Note that you need to use LineAlt instead of Line.
Fiddle - http://jsfiddle.net/0u2c7tez/
However this will still clip off the tooltip for the last point. If you are going to enable tooltips and don't want them to be clipped off, then you need to use custom tooltips so that the tooltip is rendered in an external element (instead of the canvas) and not clipped off (see https://github.com/nnnick/Chart.js/blob/master/samples/line-customTooltips.html)
I am using Flot Graphs and they are plotting fine. But in firefox v33, on redrawing multiple times black rectangles are appearing. My options:
var lineChartOptions = {
series : {
lines : {
show : true
},
points : {
show : true
},
shadowSize : 3
},
grid : {
hoverable : true //IMPORTANT! this is needed for tooltip to work
},
yaxis : {
tickDecimals : 0,
min : 0,
max : 100
},
xaxes : [ {
mode : "time",
timeformat : "%d/%m/%y"
}],
tooltip : true,
tooltipOpts : {
content : "%y activations on %x",
shifts : {
x : -60,
y : 25
}
}
};
On Ajax call:
var axes = plotObj.getAxes();
axes.yaxis.options.max = null;
plotObj.setData(graph_json);
plotObj.setupGrid();
plotObj.draw();
It replicates when Y-Axis value goes from a lower to higher value. For the following set of data on three ajax calls in the order mentioned:
[{"data":[["2014-11-02",5],["2014-11-03",2],["2014-11-04",2]],"label":"Skype","color":8}]
[{"data":[["2014-10-01",0],["2014-10-31",0]],"label":"Skype","color":8}]
[{"data":[["2014-09-03",1],["2014-11-02",5],["2014-11-03",2],["2014-11-04",2]],"label":"Skype","color":8}]
This occured due to follpwing line:
axes.yaxis.options.max = null;
I tried using this as a workaround to make flot calculate the new maximum for Y-Axis itself after setting it in the options. But it seems to cause rendering issues
I'm using highcharts to draw chart dynamically on mouse over a table row. What i want is to clear out the chart out and hide the chart on mouse out.
I works fine in chrome but i get this strange behavior in firefox : The chart points remains there. I don't know if i'm clear enough. You can see this on http://dev.bluesquare.org/dev/data.
If you mouse over table with the title "National Quantities" you'll see a chart appearing on mouse over and disappearing on mouse out but leaving some dots on the table.
Is there anybody who can give me an idea about this problem.
Here is part of the code i'm using
$(function(){
$('#district-quantity table tbody tr').hover(function(){
var row_data = //get some data corresponding to the hovered row
var chartDiv = 'chart_div';
drawQuantityChart(row_data,chartDiv);
},function(){});
}
function drawQuantityChart(row_data,chartDiv) {
//call a function to parse and format the data for highcharts
var chartData = parseData(row_data);
var chart = new Highcharts.Chart({
chart : {
renderTo : chartDiv,
type : 'line',
height : 360
},
title : {
text : null
},
subtitle : {
text : null
},
xAxis : {
categories : chartData.periods
},
yAxis : {
title : {
text : null
},
gridLineWidth : 1,
min: 0
},
tooltip: {
followPointer: true
},
series : chartData.series
});
}
});
$('#district-quantity table tbody tr').hover(function(){
var row_data = //get some data corresponding to the hovered row
var chartDiv = 'chart_div';
drawQuantityChart(row_data,chartDiv);
},function(){
chart.destroy();
// Why don't you destroy your chart here? Make sure your chart variable is global.
});
}
I m really new in ExtJS and try to reuse some existing content produced with jQuery. Is there a simple way to add existing components as items in a container?
My code looks something like this
var rect = $('<div>', {
'id' : 'rectangle'
}).text("this is a rectangle.");
var cont = new Ext.Container({
layout : 'absolute',
width : 400,
height : 300,
renderTo : Ext.getBody(),
border : 1,
style : {
borderColor : '#000000',
borderStyle : 'solid',
borderWidth : '1px'
},
items : [{
html : rect
}]
});
Simply grab the html of that item with .html()
items : [{
html : rect.html()
}]
The best way is to use contentEl. Note that this moves the element inside the component, so when the component is destroyed, so is the element.
items: {
contentEl: rect.get(0) // Grab a reference to the DOM element
}
If you want to make a copy, of the element before moving it, you could call:
rect.clone.get(0);