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?
Related
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
I want to create bar chart using google charts
Condition to create chart is like Bar should have fixed width and padding between the bars and it should be plot at center of grid lines.
I used google chart for this .
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: getValueAt.bind(undefined, 1),
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {
groupWidth: 20
},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
function getValueAt(column, dataTable, row) {
return dataTable.getFormattedValue(row, column);
}
JsFiddle for the same
I want to create something like this.
in order to get the bars between the gridlines,
will need to use a continuous data type for the x-axis,
timeofday will work, which takes an array of either 3 or 4 numbers,
representing hours, minutes, seconds, and optionally milliseconds, respectively
['Time', 'Value'],
[[9, 30, 0], 20],
[[10, 30, 0], 30],
...
set the data values at the half minute mark,
then use ticks at the full minute mark...
ticks: [
[9, 0, 0],
[10, 0, 0],
...
for padding between the bars, use a percentage...
bar: {
groupWidth: '95%'
},
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Time', 'Value'],
[[9, 30, 0], 20],
[[10, 30, 0], 30],
[[11, 30, 0], 57],
[[12, 30, 0], 70],
[[13, 30, 0], 80],
[[14, 30, 0], 55],
[[15, 30, 0], 45],
[[16, 30, 0], 20],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
return dt.getFormattedValue(row, 1);
},
role: 'annotation',
type: 'string'
}]);
var options = {
annotations: {
alwaysOutside: true,
stem: {
color: '#cb4335',
length: 20,
},
},
bar: {
groupWidth: '95%'
},
colors: ['#cb4335'],
hAxis: {
format: 'ha',
gridlines: {
color: 'transparent'
},
ticks: [
[9, 0, 0],
[10, 0, 0],
[11, 0, 0],
[12, 0, 0],
[13, 0, 0],
[14, 0, 0],
[15, 0, 0],
[16, 0, 0],
],
},
height: 400,
legend: {position: 'none'},
tooltip: {trigger: 'none'},
vAxis: {
textStyle: {
color: 'transparent'
}
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>
EDIT
to expand the gridlines, use option hAxis.viewWindow.min & max
and chartArea.width can extend the chart to the edges of the chart container
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Time', 'Value'],
[[9, 30, 0], 20],
[[10, 30, 0], 30],
[[11, 30, 0], 57],
[[12, 30, 0], 70],
[[13, 30, 0], 80],
[[14, 30, 0], 55],
[[15, 30, 0], 45],
[[16, 30, 0], 20],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
return dt.getFormattedValue(row, 1);
},
role: 'annotation',
type: 'string'
}]);
var options = {
annotations: {
alwaysOutside: true,
stem: {
color: '#cb4335',
length: 20,
},
},
bar: {
groupWidth: '95%'
},
chartArea: {
width: '100%'
},
colors: ['#cb4335'],
hAxis: {
format: 'ha',
gridlines: {
color: 'transparent'
},
ticks: [
[9, 0, 0],
[10, 0, 0],
[11, 0, 0],
[12, 0, 0],
[13, 0, 0],
[14, 0, 0],
[15, 0, 0],
[16, 0, 0],
],
viewWindow: {
min: [6, 0, 0],
max: [20, 0, 0]
}
},
height: 400,
legend: {position: 'none'},
tooltip: {trigger: 'none'},
vAxis: {
textStyle: {
color: 'transparent'
}
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>
How i can arrange bubble randomly without overlap
var Highcharts2 = $('#attBubbleGraph').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
margin: [1, 1, 1, 1]
},
title: {
text: 'Testing'
},
series: [
{
showInLegend: false,
name: 'Present',
data: [
[0, 0, 50],
[2, 0, 50],
[4, 0, 50],
],
}]
});
in the above code used x,y and radius (value) like below
data: [
[0, 0, 50],
[2, 0, 50],
[4, 0, 50],
],
But I'am Looking for a bubble graph of radius (value) with random x, y without overlapping
Using google charts API with line chart controlled by range finder.I am stuck with two annoying issues:
The control has extra space before and after the data values it was set to follow, leaving an ugly space the control can slide to.
I can not seem to get the control to snap to data value.
If you can give me a pointer what I am doing wrong I will appreciate it a lot.
I set a JSfiddle here: http://jsfiddle.net/Db4fm/2/
Thank you very much!
JS
function drawChart() {
var activity_breakdown = [
['Text Index', 'Numeric Index', 'totals', 'Value 1', 'Value 2', 'Value 3',
'Value 4', 'Value 5', 'Value 6', 'Value 7'],
['W15', 1, 13, 2, 0, 20, 2, 1, 0, 0],
['W16', 2, 20, 0, 1, 10, 3, 0, 0, 2],
['W17', 3, 19, 3, 0, 20, 2, 0, 2, 0],
['W18', 4, 31, 0, 2, 10, 4, 1, 0, 3],
['W19', 5, 11, 1, 0, 10, 2, 0, 3, 0],
['W20', 6, 26, 0, 0, 10, 6, 0, 0, 4],
['W21', 7, 39, 2, 0, 30, 2, 1, 2, 0],
['W22', 8, 41, 0, 3, 10, 7, 0, 0, 0],
['Today', 9, 44, 0, 1, 20, 2, 1, 0, 5]
];
// Data table
var data1 = google.visualization.arrayToDataTable(activity_breakdown);
// Chart
var chart1 = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_activity',
dataTable: data,
options: {
width: 950,
height: 300,
chartArea: {
left: 40,
top: 20,
width: 700,
height: 250
},
legend: {
position: 'right',
textStyle: {
fontSize: 13
}
}
},
view: {
columns: [0, 3, 4, 5, 6, 7, 8, 9]
}
});
var control1 = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control_activity',
'options': {
// Filter by the date axis.
'filterColumnIndex': 1,
'ui': {
'chartType': 'LineChart',
'snapToData': true, // this bugger is not working
'chartOptions': {
width: 950,
height: 50,
chartArea: {
left: 40,
top: 0,
width: 700,
height: 50
},
'hAxis': {
textPosition: 'none'
}
},
'chartView': {
'columns': [0, 2]
},
'minRangeSize': 1
}
},
'state': {
'range': {
'start': 7,
'end': 8
}
}
});
var dashboard1 = new google.visualization.Dashboard(
document.getElementById('dashboard_activity'));
// Draw
dashboard1.bind(control1, chart1);
dashboard1.draw(data1);
google.visualization.events.addListener(control1, 'statechange', function () {
var v = control1.getState();
document.getElementById('dbgchart').innerHTML = v.range.start + ' -> ' +
v.range.end;
return 0;
});
// FSM knows why but without this line this line the code will not run...
var data = new google.visualization.DataTable();
}
google.load('visualization', '1.1', {
packages: ['corechart', 'controls']
});
google.setOnLoadCallback(drawChart);
HTML
<div id="dashboard_activity">
<div id="chart_activity"></div>
<div id="control_activity"></div>
</div>
<p>Debug range: <span id="dbgchart">Init</span></p>
The space before and after your data values is a result of setting your range filter's chart's domain axis to axis 0, which is a "string" type axis. If you want the line to go edge-to-edge, the domain axis has to be a continuous data type ("number", "date", "datetime", "timeofday"). If you change the control's chart's view.columns parameter to [1, 2], the spaces will go away:
var control1 = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_activity',
options: {
filterColumnIndex: 1,
ui: {
chartType: 'LineChart',
snapToData: true, // this bugger is not working
chartOptions: {
width: 950,
height: 50,
chartArea: {
left: 40,
top: 0,
width: 700,
height: 50
},
hAxis: {
textPosition: 'none'
}
},
chartView: {
columns: [1, 2]
},
minRangeSize: 1
}
},
state: {
range: {
start: 7,
end: 8
}
}
});
I couldn't replicate your problem with the ui.snapToData option.
Updated jsfiddle with fix: http://jsfiddle.net/asgallant/Db4fm/3/
Change line 67 to as follows:
'columns': [1, 2]
jsFiddle: http://jsfiddle.net/Db4fm/4/
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.
}