I'm using Z.Blazor.Diagrams package version 2.0.0 in my blazorise .Net core 5 client side project to create and show an organization chart.
every thing is working fine and I can create my chart, my problem is how to show my graph in the format of organization chart. I've searched but didn't find any way.
this is part of my code to show the chart:
double x = 0;
double y = 0;
foreach (var item in chartDetail)
{
var node = NewNode(x, y, item.PostTitle, item.Id);
Diagram.Nodes.Add(new[] { node });
x += 100;
y += 100;
}
I'll appreciate it if any one can help.
I solved it by saving position in database. On every node movement point(x,y) changes so I create the chart in the shape that I want and show it just same as created
Related
I'm trying to create a column chart with minimum pixel height columns. This is easy in chartjs (set the minBarLength property), however I can't figure out how to do so in amcharts.
I've tried setting series.column.template.minHeight to no effect. I've also tried setting pixelHeight and height, but also with no luck.
one workaround can be using scrollbar in Y axis like this following:
chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.start = 0;
chart.scrollbarY.end = 0.08;
with value Axis
valueAxis.min = 0;
valueAxis.max = 10;
This is not the best solution i agree but you can use it to slightly zoom with the buttons and scale and see
let me know if it works!
I followed this blog for adding tooltip for each point implemented using Three.PointCloud. I used world2Screen to get the location of individual points and tried using this
elem = document.elementFromPoint(x, y)
but continuously only get canvas as the output (and thus tooltip at a fixed position) instead at the clicked/hovered point.
Anyone who has may be implemented this and knows any work around.
Thanks in advance
According to the blog, the document.elementFromPoint() is used to check if the cursor isn’t over the canvas. If you want to capture the hit point of the mouse clicked one, your own raycaster can help in this case. For example:
var x = ((event.clientX - viewer.canvas.offsetLeft) / viewer.canvas.width) * 2 - 1;
var y = -((event.clientY - viewer.canvas.offsetTop) / viewer.canvas.height) * 2 + 1;
var vector = new THREE.Vector3(x, y, 0.5).unproject(this.camera);
this.raycaster.set(this.camera.position, vector.sub(this.camera.position).normalize());
var nodes = this.raycaster.intersectObject( this.pointCloud );
In the above code snippet, the event object is from the mouse clicking event, see here for detail: https://github.com/wallabyway/markupExt/blob/master/docs/markupExt.js#L48
Hi StackOverflow community. I tried to find the solution for a problem I'm having and was unable to get anything helpful. The closest thing I could find was this which seems to not have a solution. I'm a complete beginner to D3.js so this may also be why I'm having trouble resolving the situation. I tried digging through the documentation as well with no success. So here's my problem. I was trying to do some data visualization stuff and stumbled upon this pie chart in the D3.js example library, which I thought was pretty nifty. Once I started putting a large amount of values into the graph though I noticed I had problems with overlapping labels as can be seen below. I've only altered the code from the example page to make it so I can create multiple charts. Besides that it's essentially the same. Thanks for any help or information anyone can provide!
Overlapping Labels
This will work only for d3 v4. The idea is to compare each node with the rest and move its position if collision is detected. The following code snippet uses this.texts as d3 selection of the labels. Once a collision is detected the element will be moved below - might not be optimised for a specific case.
const nodes = this.texts.nodes();
for (let i = 0; i < nodes.length; i++) {
for (let j = i + 1; j < nodes.length; j++) {
const previous = nodes[i];
const elem = nodes[j];
const thisbb = elem.getBoundingClientRect(),
prevbb = previous.getBoundingClientRect();
if (!(thisbb.right < prevbb.left ||
thisbb.left > prevbb.right ||
thisbb.bottom < prevbb.top ||
thisbb.top > prevbb.bottom)) {
const matrix = previous.transform.baseVal.consolidate().matrix;
d3.select(elem).attr('transform', `translate(${matrix.e}, ${matrix.f + prevbb.bottom - prevbb.top})`);
}
const elemMatrix = elem.transform.baseVal.consolidate().matrix;
pieData[j].pos = [elemMatrix.e, elemMatrix.f];
}
}
I'm confused.
I've made a group of 10 sprites and added them to a THREE.Object3D() called fireworkGroup. I have another Object3D called explode. The tween loops through the sprites changing them from their initial position to explode.position.
for ( var i = 0; i < fireworkGroup.children.length; i ++ )
{
explode.position.x =(Math.random() - 0.5)*4;
explode.position.y =4;
explode.position.z =2;
var tweenLaunch = new TWEEN.Tween(fireworkGroup.children[i].position).to(explode.position, 4000).easing( TWEEN.Easing.Quartic.In);
tweenLaunch.start();
}
The tween is moving all the sprites from their start position to the same end position. So I thought this might be because "tweenLaunch" is being overwritten with a different explode.position each time as the tween is rendered so I'm only seeing the last one created in the loop. When I refresh the page they do all move to a different position, consistent with the Math.random().
But then why do all the sprites move to the explode.position? If "tweenLaunch" is being overwritten then why is it not moving only the last sprite?
Is it possible to have a loop with a tween in it that also changes?
Many Thanks.
I've managed to work out what was wrong by reading around the subject on Stackoverflow questions and answers, looking at a great particle example by stemkoski then trial and error.
view-source:http://stemkoski.github.io/Three.js/Particles.html
I used console.log to look at explode.position that I was using as the second position in the tween. It wasn't holding the values I wanted (a different Math.random on each loop).
So I created fireworkAttributes:
fireworkAttributes = { startPosition: [], explodePosition: [], nextPosition: [] };
and then cloned the sprite position in the function that created the sprites using:
fireworkAttributes.explodePosition.push( sprite.position.clone() );
then looped it in it's own function:
for (var i = 0; i < fireworkGroup.children.length; i++)
{
fireworkAttributes.explodePosition[i].x = (Math.random() - 0.5)*4;
fireworkAttributes.explodePosition[i].y = 4;
fireworkAttributes.explodePosition[i].z = 2;
}
then changed the code in the original question to:
for ( var a = 0; a < fireworkGroup.children.length; a ++ )
{
//need to use this new object as tweening to fireworkAttributes.explodePosition[a] does not work
explodeSite.position = fireworkAttributes.explodePosition[a];
var tweenLaunch = new TWEEN.Tween(fireworkGroup.children[a].position).to(explodeSite.position, 4000).easing( TWEEN.Easing.Quartic.In);
tweenLaunch.start();
}
There may be a more elegant way to do this and I will be working to clean up the code where possible but this does work.
I have a simple application which polls database for data every minute. When new data is fetched, I am updating the graph using ajax. However, whenever I update the graph (re-plot it with new values added to plot data) the current state of zoom is lost. Before updating the graph, I want to preserve the latest zoom position. After updating the graph, I want to zoom the graph to its saved position. This is important because re-zooming every minute is irritating. Is this possible?
I tried this answer from Ozan and I couldn't get the block for copying the zoom to work so I just used plot.getOptions() and used that to draw the graph.
Like this:
var oldOptions = plot.getOptions();
plot = $.plot($("#graph"), data, oldOptions);
This way you can dynamically change your view and the auto-update will update without changing your view.
Here is the answer by Joshua Varner 1
When you get your new data before you re plot get the current zoom and
add it to the options on update.
// Get the current zoom
var zoom = plot.getAxes();
// Add the zoom to standard options
var zoomed = {};
$.extend(zoomed,options);
zoomed.xaxis.min = zoom.xaxis.min;
zoomed.xaxis.max = zoom.xaxis.max;
zoomed.yaxis.min = zoom.yaxis.min;
zoomed.yaxis.max = zoom.yaxis.max;
// draw/save the plot
plot = $.plot($("#graph"), d, zoomed);
You should get the information about the state of the current axes, merge it with your initial options and than provide them to the new plot.
// Deep copy of the options object so that we can keep it unchanged
// for when we don't want to preserve the zoom.
var copyOptions = $.extend(true, {}, options);
if (plot != null && preserveZoom) {
// There might be more than one Y axis
var zoomY = plot.getYAxes();
for (var i = 0; i < zoomY.length; i++) {
copyOptions.yaxes[i].min = zoomY[i].min;
copyOptions.yaxes[i].max = zoomY[i].max;
}
// Considering only one X axis, in case of more than one
// you should use the same method as for the Y axis.
copyOptions.xaxis.min = plot.getXAxes()[0].min;
copyOptions.xaxis.max = plot.getXAxes()[0].max;
}
plot = $.plot("#placeholder", data, copyOptions);