I would like to draw this following lines with angles.
Actual
Expected
I tried to find documentation about this problem, without success. I'm attaching a snippet of what I have set up so far.
If anyone has good documentation or a solution to this problem, I'm interested.
https://codepen.io/adrian-jamet/pen/YzrEErM
instance = jsPlumb.getInstance({});
instance.setContainer("diagram");
instance.bind("ready", function() {
instance.registerConnectionTypes({
"white-connection": {
paintStyle: {
stroke: "white",
strokeWidth: 5,
joinstyle: "round"
},
hoverPaintStyle: {
stroke: "white",
strokeWidth: 10
},
connector:"Flowchart"
}
});
instance.draggable("table_photo", {
"containment": true
});
instance.draggable("table_client", {
"containment": true
});
instance.draggable("table_mobilhome", {
"containment": true
})
instance.draggable("table_typemobil", {
"containment": true
})
instance.draggable("table_reservation", {
"containment": true
})
instance.draggable("table_ville", {
"containment": true
})
// instance.addEndpoint("table_photo", {
// endpoint: "Dot", // rectangle, blank, image
// anchor: ["LeftMiddle"],
// isSource: true,
// connectionType: "white-connection"
// });
// instance.addEndpoint("table_typemobil", {
// endpoint: "Dot", // rectangle, blank, image
// anchor: ["RightMiddle"],
// isSource: true,
// connectionType: "white-connection"
// });
// https://stackoverflow.com/a/4502207
var e0 = instance.addEndpoint("table_typemobil", {
uuid: "typemobil1",
anchor: [
[1, 0.23, 0, 0]
],
connectionType: "white-connection"
}),
e01 = instance.addEndpoint("table_typemobil", {
uuid: "typemobil2",
anchor: [
[0, 0.23, 0, 0]
],
connectionType: "white-connection"
}),
e1 = instance.addEndpoint("table_photo", {
uuid: "photo1",
anchor: [0, 0.9, 0, 1],
}),
e2 = instance.addEndpoint("table_mobilhome", {
uuid: "mobilhome1",
anchor: [
[1, 0.32, 0, 0]
],
connectionType: "white-connection"
}),
e21 = instance.addEndpoint("table_mobilhome", {
uuid: "mobilhome2",
anchor: [
[0, 0.92,0,0]
],
connectionType: "white-connection"
}),
e3 = instance.addEndpoint("table_reservation", {
uuid: "reservation1",
anchor: [
[0, 0.82, 0, 0]
],
}),
e31 = instance.addEndpoint("table_reservation", {
uuid: "reservation2",
anchor: [
[1, 0.95, 0, 0]
],
}),
e4 = instance.addEndpoint("table_client", {
uuid: "client1",
anchor: [
[1, 0.18, 0, 0]
],
connectionType: "white-connection"
});
instance.connect({
uuids: ["typemobil1", "photo1"],
detachable: false,
})
instance.connect({
uuids: ["mobilhome1", "reservation1"],
detachable: false
})
instance.connect({
uuids: ["client1", "reservation2"],
detachable: false
})
instance.connect({
uuids: ["typemobil2", "mobilhome2"],
anchors: ["Right", "Left"],
})
});
None of the anchor declarations include values for the anchor orientation, for instance
anchor: [
[1, 0.23, 0, 0]
],
this one, being on the right near the top edge, probably should start out moving to the right horizontally, so:
anchor: [
[1, 0.23, 1, 0]
],
whereas this one, on the left, should start moving horizontally to the left:
anchor: [
[0, 0.23, 0, 0]
],
so:
anchor: [
[0, 0.23, -1, 0]
],
a similar consideration needs to be made for the other anchors. the value at index 3 is for the y axis.
Anchors are discussed here
Related
I want to add several 3D layers on my deckGl map with for each marker a different 3d model, so I create a table with my different layers, but when I initialize my deck gl map and pass my array for the layers, only the last one layer of my array is displayed on the screen, regardless of the number of layers in my array.
Here is my js code :
<script type="text/javascript">
const {DeckGL, ScenegraphLayer} = deck;
const test = [
new deck.ScenegraphLayer({
id: 'ScenegraphLayer1',
data: [{ position: [47.6411, 6.84944] }],
/* props from ScenegraphLayer class */
_animations: {
'*': {speed: 1}
},
_lighting: 'pbr',
// getAnimator: null,
// getColor: [255, 255, 255, 255],
getOrientation: d => [0, Math.random() * 180, 90],
getPosition: () => [47.6411, 6.84944],
getScale: [10, 10, 10],
// getScene: null,
// getTransformMatrix: [],
// getTranslation: [0, 0, 0],
// loaders: ,
scenegraph: '../Projet/paul10.gltf',
sizeMinPixels: 0.01,
sizeMaxPixels: 0.03,
sizeScale: 500,
/* props inherited from Layer class */
// autoHighlight: false,
// coordinateOrigin: [0, 0, 0],
// coordinateSystem: COORDINATE_SYSTEM.LNGLAT,
highlightColor: [0, 0, 128, 128],
// modelMatrix: null,
opacity: 1,
pickable: true,
visible: true,
wrapLongitude: false,
pickable: true,
onHover: (info, event) => console.log("bonjour"),
onClick: (info, event) => console.log("bonjour"),
}),
new deck.ScenegraphLayer({
id: 'ScenegraphLayer2',
data: [{ position: [1, 2] }],
/* props from ScenegraphLayer class */
_animations: {
'*': {speed: 1}
},
_lighting: 'pbr',
// getAnimator: null,
// getColor: [255, 255, 255, 255],
getOrientation: d => [0, Math.random() * 180, 90],
getPosition: () => [1, 2],
getScale: [10, 10, 10],
// getScene: null,
// getTransformMatrix: [],
// getTranslation: [0, 0, 0],
// loaders: ,
scenegraph: '../Projet/paul10.gltf',
sizeMinPixels: 0.01,
sizeMaxPixels: 0.03,
sizeScale: 500,
/* props inherited from Layer class */
// autoHighlight: false,
// coordinateOrigin: [0, 0, 0],
// coordinateSystem: COORDINATE_SYSTEM.LNGLAT,
highlightColor: [0, 0, 128, 128],
// modelMatrix: null,
opacity: 1,
pickable: true,
visible: true,
wrapLongitude: false,
pickable: true,
onHover: (info, event) => console.log("bonjour"),
onClick: (info, event) => console.log("bonjour"),
}),
]
new DeckGL({
mapStyle: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
initialViewState: {
longitude: 6,
latitude: 47,
zoom: 11,
maxZoom: 20,
pitch: 30,
bearing: 0
},
controller: true,
getTooltip: ({object}) => object && `${object.name}
${object.address}`,
layers: test
});
</script>
I've tried a lot of things but nothing works, yet I feel like I'm doing what's recommended for this sort of thing. Anyone have an idea what's wrong?
For example I have wrote this code below to generate the following graph:
const trace = {
x: [-51.0, -50.0, 0.0, 0.6, 0.7, 0.75],
y: [-100.0, -0.0001, 0.0, 0.0051, 0.0155, 100.0],
// x: [-50.0, 0.0, 0.6, 0.7, 0.75],
// y: [-0.0001, 0.0, 0.0051, 0.0155, 100.0],
type: "scatter",
mode: "lines+markers",
name: "diode-curve-graph",
fill: "tonexty",
};
const layout = {
margin: {
l: 20,
r: 10,
b: 25,
t: 5,
pad: 0
},
font: {
size: 11,
family: "IBM Plex Sans, sans-serif",
color: "#161b1d"
},
modebar: {
activecolor: "#161b1d"
},
xaxis: {
autorange: true,
rangemode: "auto",
zeroline: true,
ticks: 'outside',
},
yaxis: {
autorange: true,
rangemode: "tozero",
zeroline: true,
tickformatstops: [
{
enabled: true,
dtickrange: [null, 0.01],
value: ".e"
},
{
enabled: true,
dtickrange: [0.01, 100],
value: ".f"
},
{
enabled: true,
dtickrange: [100, null],
value: ".e"
},
],
// ticks: 'outside',
}
};
const config = {
responsive: true,
displaylogo: false,
locale: "pt-BR",
displayModeBar: false,
scrollZoom: true
}
Plotly.newPlot("diode-curve-graph", [trace], layout, config);
But I'm trying to pass the information that the line is infinity, without beginning and end, like this red line represents:
It could be a simple arrow in the first point and last point pointing to the direction that the lines continues, but I couldn't do it too.
Thanks in advance!
I have an Echarts (v4.8.0) cartesian2d heatmap and I'd like to use a different continuous visualmap range [min,max] for each row (which I could filter by the second parameter value 'y' of each data). Is there a way to do it? I can only think in using different series, one for each row, but I don't know how to join them into a single chart.
Here is my option configs:
{
tooltip: {
position: 'left',
},
grid: {
left: '7%',
right: '3%',
},
animation: false,
xAxis: {
type: 'category',
data: ['04-10-2020', '05-10-2020'],
splitArea: {
show: false
},
position: 'top'
},
yAxis: {
type: 'category',
data: ['A', 'B'],
splitLine: {
show: true,
lineStyle: {
width: 2
}
}
},
visualMap: {
type: 'continuous',
show: false,
min: [0, 0],
max: [12, 15], //here I tried to have multiples ranged, but It crashes
inRange: {
color: ['#ffffff', '#990000']
},
dimension: '2',
},
series: {
name: "test",
type: 'heatmap',
data: [[0, 0, 2], [0, 1, 5], [1, 0, 9], [1, 1, 12]],
label: {
show: false
},
coordinateSystem: 'cartesian2d',
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
Thank you very much in advanced
The visual map it is component that can be used a several times just like axes, tooltip and so on. Have you tried to make clone visual map with other params?
var option = {
tooltip: {
position: 'left',
},
grid: {
left: '7%',
right: '3%',
},
animation: false,
xAxis: {
type: 'category',
data: ['04-10-2020', '05-10-2020'],
splitArea: {
show: false
},
position: 'top'
},
yAxis: {
type: 'category',
data: ['A', 'B'],
splitLine: {
show: true,
lineStyle: {
width: 2
}
}
},
visualMap: [{
type: 'continuous',
show: false,
min: 0,
max: 7,
inRange: {
color: ['#ffffff', '#990000']
},
dimension: '2',
}, {
type: 'continuous',
show: false,
min: 7,
max: 15,
inRange: {
color: ['#AC33FF', '#FF7C00']
},
dimension: '2',
}
],
series: {
name: "test",
type: 'heatmap',
data: [
[0, 0, 2],
[0, 1, 5],
[1, 0, 9],
[1, 1, 12]
],
label: {
show: false
},
coordinateSystem: 'cartesian2d',
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
}
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
Thanks to the answer of Sergey Federov I managed to do it by using multiple heatmap series with their corresponding visualmaps, using seriesIndex to link them. Here is an example where each row has 3 items with the same values, the first row (from bottom to top) has a visualMap range of [0, 15], while the second [5, 15]. The data is splitted into two series according to their second cartesian coordinate. For more rows, just split the data into more series and add their corresponding visualMaps.
var option = {
tooltip: {
position: 'left',
},
animation: false,
xAxis: {
type: 'category',
data: ['04-10-2020', '05-10-2020', '06-10-2020'],
splitArea: {
show: false
},
position: 'top'
},
yAxis: {
type: 'category',
data: ['A', 'B'],
splitLine: {
show: true,
lineStyle: {
width: 2
}
}
},
visualMap: [{
type: 'continuous',
show: false,
min: 0,
max: 15,
seriesIndex : 0,
inRange: {
color: ['#ffffff', '#990000']
},
dimension: '2',
}, {
type: 'continuous',
show: false,
min: 5,
max: 15,
seriesIndex: 1,
inRange: {
color: ['#ffffff', '#990000']
},
dimension: '2',
}
],
series: [{
name: "test1",
type: 'heatmap',
data: [
[0, 0, 5],
[1, 0, 10],
[2, 0, 15]
],
label: {
show: false
},
coordinateSystem: 'cartesian2d',
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
{
name: "test2",
type: 'heatmap',
data: [
[0, 1, 5],
[1, 1, 10],
[2, 1, 15]
],
label: {
show: false
},
coordinateSystem: 'cartesian2d',
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
I need to build a time series horizontal bar chart that looks something like this. Each bar represents a query running on the cluster. The length of the bar represents the duration. Each query has start time and end time. Multiple queries can have either same start time or end time or both. Queries may be running in parallel.
I am using highcharts/highstocks charting library, wondering what kind of Highchart config I need to use to accomplish it. Please advise.
I would use a columnrange series. Here you have an example of it: https://jsfiddle.net/BlackLabel/6bu8gtaw
It is hardcoded for now, you can edit it and adjust to your requirements.
All used API properties you can find here: https://api.highcharts.com/highcharts
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: true,
height: 200,
borderWidth: 1,
borderColor: '#d3d3d3'
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
plotOptions: {
series: {
groupPadding: 0,
pointPadding: 0.1,
grouping: false,
pointWidth: 6,
borderWidth: 0
}
},
title: {
text: null
},
xAxis: {
visible: false,
reversed: false,
min: -3,
max: 7
},
yAxis: {
opposite: true,
min: -3,
max: 18
},
series: [{
data: [
[0, 10, 13]
]
}, {
data: [
[1, 2, 5]
]
}, {
data: [
[1, 6, 9]
]
}, {
data: [
[1, 12, 16]
]
}, {
data: [
[2, 3, 7]
]
}, {
data: [
[2, 7, 12]
]
}, {
data: [
[3, 0, 4]
]
}, {
data: [
[3, 5, 10]
]
}, {
data: [
[3, 10, 14]
]
}, {
data: [
[3, 16, 18]
]
}, {
data: [
[4, 0, 5]
]
}, {
data: [
[4, 6, 11]
]
}, {
data: [
[4, 11, 15]
]
}, {
data: [
[4, 16, 18]
]
}]
});
Okay to get started I am using Jquery-Flot to plot a radial graph I have found a plug in to create a spider graph see API here:
http://www.jumware.com/Includes/jquery/Flot/Doc/JQuery.Flot.spider.html
Now it works all nicely bar the fact I dont want to show the lines that connect the points.
Usually with:
points: { show: true}, lines: { show: false}
but when using the spider plugin it seems to ignore this setting. Am I doing something wrong here or is it a case of when using this plugin I have to show lines?
Working example at:
http://jsfiddle.net/WAscC/2/
Code:
function EveryOneSec() {
var d1 = [[0, 10], [1, 20], [2, 80], [3, 70], [4, 60]];
var d2 = [[0, 30], [1, 25], [2, 50], [3, 60], [4, 95]];
var d3 = [[0, 50], [1, 40], [2, 60], [3, 95], [4, 30]];
var options = {
series: {
spider: {
active: true,
legs: {
data: ["", "", "", "", ""],
legScaleMax: 1,
legScaleMin: 0.8
}, spiderSize: 0.9
}
}, grid: {
hoverable: false,
clickable: false,
tickColor: "rgba(0,0,0,0.2)",
mode: "radar"
}
};
data = [{
label: "",
data: d1,
spider: {
show: true,
lineWidth: 0
}
}, {
label: "",
data: d2,
spider: {
show: true,
lineWidth: 0
}
}, {
label: "",
data: d3,
spider: {
show: true,
lineWidth: 0
},
points: { show: true},lines: { show: false }
}];
$.plot($("#RadialPlot"), data, options);
}
EveryOneSec();
Update One
editing lineWidth: 0,
connectionWidth: 0 to any number seems to have no affect at all on the graph.
How can I only show points and not lines?
Add connection: { width: 0 } to spider options:
spider: {
active: true,
connection: { width: 0 }, // add this line
legs: {
data: ["", "", "", "", ""],
legScaleMax: 1,
legScaleMin: 0.8
},
spiderSize: 0.9
}
Documentation states that option should be: connectionWidth: 0, but that seems to have changed, as seen from the source for the actual plugin:
function drawspiderConnections(ctx,cnt,serie,c,fill) {
var pos,d;
ctx.beginPath();
ctx.lineWidth = serie.spider.connection.width; // this is the line
// etc.
}