Manipulate CZML fill property of polygon dynamically - javascript

Can properties of entities drawn in CZML be manipulated? I am trying to toggle fill property of a group of polygons at a time. I have added parent property. But it doesn't seem to work. Anyone has faced this issue before? Any help is much appreciated :)
Here is my sample code:
[
{
"id":"document",
"name":"CZML Geometries: Polygon",
"version":"1.0"
},
{
"id":"testParent",
"description":"test parent entity"
},
{
"id":"id_1",
"polygon":{
"positions":{
"cartographicDegrees":[
-95,29,0,
-95,29,0,
-95,29,0,
-95,29,0,
-95,29,0
]
},
"extrudedHeight":{
"number":4
},
"height":{
"number":0
},
"fill":false,
"parent":"testParent",
"outline":true
}
}
]

Once a CZML document has been loaded into a DataSource, you can manipulate it at runtime as a collection of Entities. Here's an example showing how to toggle the fill flags on a set of polygons. Click "Run code snippet" at the bottom of this:
var viewer = new Cesium.Viewer('cesiumContainer', {
navigationInstructionsInitiallyVisible: false, animation: false, timeline: false,
// These next 5 lines are just to avoid the Bing Key error message.
imageryProvider : Cesium.createTileMapServiceImageryProvider({
url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
}),
baseLayerPicker : false,
geocoder : false,
// This next line fixes another Stack Snippet error, you may omit
// this setting from production code as well.
infoBox : false
});
var czml = [{
"id" : "document",
"name" : "CZML Geometries: Polygon",
"version" : "1.0"
}, {
"id" : "redPolygon",
"name" : "Red polygon on surface",
"polygon" : {
"positions" : {
"cartographicDegrees" : [
-115.0, 37.0, 0,
-115.0, 32.0, 0,
-107.0, 33.0, 0,
-102.0, 31.0, 0,
-102.0, 35.0, 0
]
},
"material" : {
"solidColor" : {
"color" : {
"rgba" : [255, 0, 0, 100]
}
}
},
"fill" : true,
"extrudedHeight" : 0,
"outline" : true,
"outlineColor" : {
"rgba" : [255, 0, 0, 255]
}
}
}, {
"id" : "greenPolygon",
"name" : "Green polygon",
"polygon" : {
"positions" : {
"cartographicDegrees" : [
-108.0, 42.0, 0,
-100.0, 42.0, 0,
-104.0, 40.0, 0
]
},
"material" : {
"solidColor" : {
"color" : {
"rgba" : [0, 255, 0, 100]
}
}
},
"fill" : true,
"extrudedHeight" : 0,
"outline" : true,
"outlineColor" : {
"rgba" : [0, 255, 0, 255]
}
}
}, {
"id" : "orangePolygon",
"name" : "Orange polygon",
"polygon" : {
"positions" : {
"cartographicDegrees" : [
-108.0, 25.0, 0,
-100.0, 25.0, 0,
-100.0, 30.0, 0,
-108.0, 30.0, 0
]
},
"material" : {
"solidColor" : {
"color" : {
"rgba" : [255, 100, 0, 100]
}
}
},
"fill" : true,
"extrudedHeight" : 0,
"outline" : true,
"outlineColor" : {
"rgba" : [255, 100, 0, 255]
}
}
}];
Cesium.CzmlDataSource.load(czml).then(function(dataSource) {
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);
document.getElementById('toggleFill').addEventListener('click', function() {
// Iterate the list of entities, looking for polygons.
var numEntities = dataSource.entities.values.length;
for (var i = 0; i < numEntities; ++i) {
var entity = dataSource.entities.values[i];
if (entity.polygon) {
// Toggle the fill flag on each polygon.
entity.polygon.fill = !entity.polygon.fill.getValue();
}
}
});
});
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
font-family: sans-serif;
}
#toolbar { position: absolute; top: 5px; left: 8px; }
<link href="http://cesiumjs.org/releases/1.28/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.28/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>
<div id="toolbar">
<button id="toggleFill" class="cesium-button" type="button">Toggle fill</button>
</div>

Related

Chart.JS multiple plugins do not operate

I am working with chart.js and am trying to add 2 plugins to the same chart, but when applied, both of the plugins disappear and there is no direct error in the console.
Does anyone know how to implement two plugins to the same graph?
First pulgin
Second plugin referance
Basically, the graph has to show data labels on a line chart and at the same time, draw yAxis lines, but only starting from the points on the line chart.
For some reason, the chart will not show either of them when both are applied.
Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
color : '#ffffff'
})
// Chart.plugins.unregister(ChartDataLabels);
// var chart = new Chart(ctx, {
// / plugins: [ChartDataLabels],
// options: {
// // ...
// }
// })
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type : 'line',
// The data for our dataset
data : {
labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
datasets : [ {
label : 'My first dataset',
borderWidth : 3,
borderColor : 'rgb(255,0, 0)',
data : data1,
} ]
},
// Configuration options go here
options : {
elements : {
point : {
radius : 3
}
},
legend : {
display : false,
labels : {
fontColor : "white",
fontSize : 18
}
},
scales : {
yAxes : [ {
ticks : {
fontSize : 0,
beginAtZero : false,
max : 40,
},
gridLines : {
display : false,
drawBorder : false,
}
} ],
xAxes : [ {
ticks : {
fontColor : "white",
fontSize : 14,
beginAtZero : 0,
},
gridLines : {
display : false,
}
} ]
},
plugins : [ { // this is the magical bit :)
afterRender : function(c, options) {
let
meta = c.getDatasetMeta(0), max;
c.ctx.save();
c.ctx.strokeStyle = c.config.options.scales.xAxes[0].gridLines.color;
c.ctx.lineWidth = c.config.options.scales.xAxes[0].gridLines.lineWidth;
c.ctx.beginPath();
meta.data
.forEach(function(e) {
if (max == undefined
|| c.config.data.datasets[0].data[e._index] > max) {
max = c.config.data.datasets[0].data[e._index];
}
c.ctx.moveTo(e._model.x,
meta.dataset._scale.bottom);
c.ctx
.lineTo(e._model.x,
e._model.y);
});
c.ctx.textBaseline = 'top';
c.ctx.textAlign = 'right';
c.ctx.fillStyle = 'black';
c.ctx.fillText('Max value: ' + max,
c.width - 10, 10);
c.ctx.stroke();
c.ctx.restore();
}
} ],
tooltips : {
callbacks : {
label : function(tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
}
});
var data1 = [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4, 5, 7 ];
myChart(data1);
HTML .js code
<script src="js/chart.js"></script>
<!-- data label .js -->
<script
src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.5.0"></script>
<!-- yAxis lines .js -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
var chart = new Chart(document.getElementById('chart'), {
type : 'line',
data : {
labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
datasets : [ {
label : 'My first dataset',
borderWidth : 1,
borderColor : 'rgb(255,0, 0)',
data : [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4, 5, 7 ],
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: 'rgb(255, 120, 12, .2)',
borderRadius: 20
}
}]
},
options : {
scales : {
xAxes : [ {
gridLines : {
display : false,
color: 'rgba(255, 120, 12, .2)',
lineWidth: 5
}
} ],
yAxes : [{
gridLines : {
display : false,
color: 'rgba(255, 120, 12, .2)',
lineWidth: 5
},
ticks : {
beginAtZero: true
}
}]
},
},
plugins : [{ // this is the magical bit :)
afterRender : function(c, options) {
let meta = c.getDatasetMeta(0), max;
c.ctx.save();
c.ctx.strokeStyle = c.config.options.scales.xAxes[0].gridLines.color;
c.ctx.lineWidth = c.config.options.scales.xAxes[0].gridLines.lineWidth;
c.ctx.beginPath();
meta.data.forEach(function(e)
{
if (max == undefined || c.config.data.datasets[0].data[e._index] > max) {
max = c.config.data.datasets[0].data[e._index];
}
c.ctx.moveTo(e._model.x,meta.dataset._scale.bottom);
c.ctx.lineTo(e._model.x,e._model.y);
});
c.ctx.textBaseline = 'top';
c.ctx.textAlign = 'right';
c.ctx.fillStyle = 'black';
c.ctx.fillText('Max value: ' + max, c.width - 10, 10);
c.ctx.stroke();
c.ctx.restore();
}
}],
tooltips : {
callbacks : {
label : function(tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
});
>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.6.0/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chart"></canvas>

AmChart active only 1 bullet

I'm using AmChart and I would like to active the bullet but only if at the place of the cursor so I have :
var defaultStockChartData = {
...
"ChartCursor":
{
"cursorColor": "#000000",
"color": "#000000",
"cursorAlpha": 0.5,
"bulletSize" : 8,
"bulletsEnabled" : true
},
...
enter code here
But i get this result :
How can I do to only make appear the bullet when the cursor is on it?
If it's can help someone I find a way to do it. You need to put the opacity of the bullet at 0 in the graph and at 1 in the chartCursorSettings:
"chartCursorSettings":
{
"enabled":true,
"graphBulletAlpha":1,
"bulletsEnabled" : true
},
...
"panels" : [ {
"percentHeight" : 70,
"showCategoryAxis" : true,
"stockGraphs" : [ {
"type" : "line",
"id" : "g1",
"bulletBorderAlpha": 1,
"bulletColor": "#000000",
"bullet": "round",
"bulletAlpha" : 0,
"bulletBorderAlpha" : 0,
} ]

Make a graph with cytoscape without overlaps

I use cytoscape to display a graph whose nodes can overlap.
I would like to avoid this but without changing the position y of each node.
I use the position y of a node to manage levels but the position x can vary without problem.
$.getJSON("/stratifiant/cytoscape", function(data) {
var cy = cytoscape({
container: document.getElementById('container'),
elements: data,
style: [{
selector: 'node',
style: {
shape: 'rectangle',
'background-color': 'red',
label: 'data(label)'
}
}]
});
});
JSON :
{
"nodes" : [ {
"data" : {
"x" : 0,
"y" : 0,
"id" : "120510",
"label" : "SOG.1006"
}
}, {
"data" : {
"x" : 100,
"y" : 0,
"id" : "120487",
"label" : "SOG.1005"
}
}, {
"data" : {
"x" : 200,
"y" : 0,
"id" : "120188",
"label" : "SOG.1002"
}
}, {
"data" : {
"x" : 300,
"y" : 0,
"id" : "120189",
"label" : "SOG.1003"
}
}, {
"data" : {
"x" : 400,
"y" : 0,
"id" : "120537",
"label" : "SOG.1008"
}
}, {
"data" : {
"x" : 0,
"y" : 100,
"id" : "120179",
"label" : "SOG.1000"
}
}, {
"data" : {
"x" : 100,
"y" : 100,
"id" : "120187",
"label" : "SOG.1001"
}
}, {
"data" : {
"x" : 0,
"y" : 200,
"id" : "120536",
"label" : "SOG.1007"
}
}, {
"data" : {
"x" : 100,
"y" : 200,
"id" : "120190",
"label" : "SOG.1004"
}
} ],
"edges" : [ {
"data" : {
"id" : "s120510-120487",
"source" : "120510",
"target" : "120487"
}
}, {
"data" : {
"id" : "a120179-120188",
"source" : "120179",
"target" : "120188"
}
}, {
"data" : {
"id" : "s120179-120187",
"source" : "120179",
"target" : "120187"
}
}, {
"data" : {
"id" : "a120536-120187",
"source" : "120190",
"target" : "120187"
}
}, {
"data" : {
"id" : "s120536-120190",
"source" : "120536",
"target" : "120190"
}
} ]
}
Which layout should I use with cytoscape with which options?
You could use a Layout, so you dont need set the specyfic place for each node. My recommendation for you is the dagre or breadthfirst layout.
$.getJSON("/stratifiant/cytoscape", function(data) {
var cy = cytoscape({
container: document.getElementById('container'),
elements: data,
layout:{
name:'dagre',
},
style: [{
selector: 'node',
style: {
shape: 'rectangle',
'background-color': 'red',
label: 'data(label)'
}
}]
});
});

Customize label in scatter graph in echarts by baidu

Referring this example to create scatter graph using echarts library:
Basic Scattergraph
My code for this is as follows:
option ={
xAxis : [
{
type : 'value',
scale:true
}
],
yAxis : [
{
type : 'value',
scale:true
}
],
series : [
{
symbolSize: 40,
itemStyle: {
normal: {
color: 'lightblue',
borderWidth: 4,
label : {
show: true,
position: 'inside',
formatter: function(v)
{
if (v==[161.2, 51.6])
return 'a'
else
return v
}
}
}
},
type:'scatter',
data: [
[161.2, 51.6],[167.5, 59.0],[157.0, 63.0],[155.8, 53.6],
[170.0, 59.0], [166.0, 69.8], [176.2, 66.8]
],
}
]
};
In the formatter function inside series I am trying to match my variable 'v' with a coordinate point from data. But that condition is not satisfied. Where am I going wrong? I only see [object Object] in all the bubbles. Please help.
If you are using the Echarts2.x version, code is as follow:
option ={
xAxis : [
{
type : 'value',
scale:true
}
],
yAxis : [
{
type : 'value',
scale:true
}
],
series : [
{
symbolSize: 40,
itemStyle: {
normal: {
color: 'lightblue',
borderWidth: 4,
label : {
show: true,
position: 'inside',
formatter: function(data){
var v = data.value;
if (v[0]==161.2 && v[1]==51.6)
return 'a'
else
return v
}
}
}
},
type:'scatter',
data: [
[161.2, 51.6],[167.5, 59.0],[157.0, 63.0],[155.8, 53.6],
[170.0, 59.0], [166.0, 69.8], [176.2, 66.8]
],
}
]
};
the parameter of formatter function is an object which is a point object on the scatter, Its structure is as follow:
$vars:Array[3]
color:"lightblue"
componentSubType:"scatter"
componentType:"series"
data:Array[2]
dataIndex:0
dataType:undefined
name:""
seriesIndex:0
seriesName:"-"
seriesType:"scatter"
status:"normal"
value:Array[2]
So the parameter isn't the array you wanted.
The itemStyle attribute is used to set the graphic style, The label attribute is used to set the text label on the graph, which can be used to explain some data information of the graph. Such as value, name, etc. In Echarts3.x in order to make the structure of entire configuration more flat and reasonable, label was taken out with itemStyle at the same level. like itemStyle have two states of normal and emphasis. if you are using Echarts3.x version, code is like as follow:
option ={
xAxis : [
{
type : 'value',
scale:true
}
],
yAxis : [
{
type : 'value',
scale:true
}
],
series : [
{
symbolSize: 40,
itemStyle: {
normal: {
color: 'lightblue',
borderWidth: 4,
}
},
label : {
normal: {
show: true,
position: 'inside',
formatter: function(data){
var v = data.value;
if (v[0]==161.2 && v[1]==51.6)
return 'a'
else
return v
}
}
},
type:'scatter',
data: [
[161.2, 51.6],[167.5, 59.0],[157.0, 63.0],[155.8, 53.6],
[170.0, 59.0], [166.0, 69.8], [176.2, 66.8]
],
}
]
};

styling of particular segments in highchart axis

I am trying to create a stacked bar using highchart library to have interactions similar to the one attached with this query.
Is there a way to edit the axis style as depicted above to have hatched lines for a particular period? Also i am looking to add additional labels (like year and version highlighted). Could someone direct me to the properties that can be tweaked for this?
http://jsfiddle.net/pwr84fft/
$(function () {
$('#container').highcharts({
chart : {
type : 'bar',
events : {
click : function () {
var i,
j = 0;
var chart = $('#container').highcharts();
for (i = 0; i < chart.series.length; i++) {
chart.series[i].data[i].select(false, false);
}
}
}
},
title : {
text : ''
},
xAxis : {
categories : ['United States', 'Canada', 'Germany', 'Italy', 'Spain'],
minorGridLineWidth : 0
},
yAxis : {
min : 0,
title : {
text : ''
},
labels : {
enabled : false
},
gridLineColor : 'transparent',
stackLabels : {
style : {
color : 'black'
},
enabled : true
}
},
legend : {
enabled : true
},
plotOptions : {
series : {
stacking : 'normal',
allowPointSelect : true,
states : {
select : {
color : null,
borderWidth : 500,
borderColor : 'blue',
accumulate : true
},
},
dataLabels : {
enabled : true
},
events : {
legendItemClick : function () {
// alert('I am an alert');
var chart = $('#container').highcharts();
for (var i = 0; i < chart.series.length; i++) {
if (this.name === chart.series[i].name) {
for (var j = 0; j < chart.series[i].data.length; j++) {
chart.series[i].data[j].select(true, true);
}
}
}
/* for (var i = 0; i < chart.series.length; i++) {
if (this.name !== chart.series[i].name) {
for (var j = 0; j < chart.series[i].data.length; j++) {
chart.series[i].data[j].update({opacity: 0.1 })
}
}
}*/
}
}
}
},
tooltip : {
enabled : true
},
series : [{
name : 'Consulting',
data : [500, 323, 421, 744, 210]
}, {
name : 'Support',
data : [223, 244, 213, 244, 122]
}, {
name : 'training',
data : [232, 542, 365, 762, 341]
}, {
name : 'training2',
data : [232, 542, 365, 762, 341]
}, {
name : 'other',
data : [232, 542, 365, 762, 341]
}, {
name : 'Software2',
data : [343, 423, 464, 727, 75]
}
]
});
});
Highcharts.theme = {
colors: ['#E6E6E6', '#808080', '#B2B2B2', '#CCCCCC','#999999','#525252','#404040','#4D4D4D'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 0, 0],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
},
title: {
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle:{
color: 'gray'
}
}
};
jsfiddle for the code done so far.
You can disable axis line by setting lineWidth as 0. Then use Renderer to add path.

Categories