How would kendo diagram shapes x,y coordinates be persisted. I've able to saved it's x,y coords to the database but still the diagram will rearranged the shapes to its default arrangement although it was already set as what I have in the datasource.
Does anyone here knows on what was happening?
I can't say anything certain without seeing your source code but I guess that you have layout option in your diagram configuration which automaticaly rearrange positions of your shapes and connections.
for further information check this:
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/diagram/layout
If you share your code, I can help more.
Kendo diagram picks up the default 'tree down' layout and this overrides the x,y coordinates. To use no layout, you can use:
$("#diagram").kendoDiagram({
.......
layout: false,
.......
});
You can refer to this example: https://jsfiddle.net/xhyyyn35/
Related
I am trying to add a movable scale or axis inside a plot. For instance: in this example of stacked plot: Click-to-view
I want to include a movable y-axis scale so, if we hover the graph and put the mouse pointer on the beginning of the orange color of any bar, the a-xis will begin from that bar. (Specifically, moving x=0 line.)
I meant something like this example (of d3).
https://observablehq.com/#d3/index-chart
But, here I want to change the value of x-axis by moving the line. Is it possible to do it using vegalite? If somebody has any similar example in vegalite, can you refer it?
Thank you!
AFAIK, there is no animation in Vega Lite. However, you may check out Gemini which aims to extend the grammar of data viz to some simple animations of single-view Vega/Vega-Lite charts
I am building a version of this parallel coordinate view in d3.js v4.
https://bl.ocks.org/syntagmatic/05a5b0897a48890133beb59c815bd953
In my example I have a predefined selection (in the form of a [min,max] array that I would like to set programatically as a brush in one or more of the axes, after the plot has loaded. But I cannot seem to find a way to do it. Most examples I found on setting a brush from code are using d3 v3 and use setting extent but that does not work anymore in v4 it seems.
can someone give me some tips and a simple example hot to do this in this case (so with multiple axes and brushes active) ?
thanks
Select your brush group and call brush.move, then also pass an array with the start and end coordinates. Your brush move event will then take care of the rest.
d3.select(".brush").call(brush.move, [[startX, endX], [startY, endY]]);
I am trying to create a knowledge template, such that when I choose a string value from a dropdown list of a multiple value parameter, the reaction fires according to the selection. For example, if I select "no cut", no pocket features are created. (or deleted if they already exist) If I select "top cut", a predefined sketch is used to drive the pocket feature. However, where I'm stuck, is that I want to define a "bottom cut" by changing the orientation of a positioned sketch. I envision it like this:
"bottom cut" selected from drop down list
change sketch support would be initiated
"Reverse V" would be
selected
sketch would be flipped around the xy plane
If "both top and bottom cut" is selected, it would return the sketch to top position (uncheck "Reverse V") and mirror the resultant pocket around XY
I have managed to accomplish everything but the "Reverse V" of "Change Sketch Support". No idea at all what is the best way to accomplish this.
So far, I've created both Knowledgeware actions, and VB actions. Open to any and all suggestions on this one.
Thank you.
Regarding that API for flipping objects orientation are not available, I suggest that you base your sketch orientation on a feature that can be easily flipped:
Create a line based on two "coordinates" points
Use positioned sketch and specify the support plane, the origin point, and orientation for the V direction by using the previously created line
You can now control the points coordinates to change the orientation of the line, and the sketch will follow.
The code will be simple, and the solution is very stable.
Assuming that the reference line is based on two points {0,0,0} and {x,0,0}, the code would be
if TopOrientation
{
GeoSet1\RefPoint\X=1mm
}
else
{
GeoSet1\RefPoint\X=-1mm
}
I hope it will help you.
I have a stacked multiBarChart created with nvd3: jsfiddle is here: http://jsfiddle.net/e3kxZ/5/
(1) How can I get each region to display its value near its top?
I tried showValues(true) but I don't think that's supported in multiBarChart.
Other concerns I have are:
(2) how to set the text color so that it contrasts enough with the region (dark vs light colors), and
(3) how to keep the text labels from overlapping if any particular region is small.
I found an svg example (doesn't use nvd3) -- it assumes a static size for the chart, but I'd prefer to use something convenient and dynamic like nvd3.
Alternatively, if there is a different js library that supports this out of the box, please let me know and I'll use that instead.
Thanks in advance for any help!
(apologies for my lack of knowledge upfront)
Horizon Charts seem to be handled differently than area charts in D3. I've seen previous answers on non-continuous data in area charts, using line.defined. However, I'm not seeing how to accomplish that same effect in a horizon chart.
End goal: Where data is missing, skip or otherwise mask later, that point. As in this line.defined example (http://bl.ocks.org/mbostock/3035090), it shouldn't affect the curve of the path.
Ideally, the data in the json would just be a missing value, but I can add a type signifier if needed.
Is there a better approach - like adding a filled rectangle after the path was created in those spots to mask it?
I've updated the d3.horizon plugin to support setting area.defined for the area instance used internally.
For example, you can say:
var horizon = d3.horizon()
.width(…)
.height(…)
.defined(function(d) { return !isNaN(d[1]); });