We Keep Coding

Mapbox Gl JS: Can't update feature property with setFeatureState

I am trying to create a web app that renders circles on a map. If the numUsers property is >= 1, the circle is green and if the numUsers property is 0, the circle is red (the default value is 0).
Below is the structure of my data source:
{
"type":"FeatureCollection",
"features":[
{
"type": "Feature",
"id": 0,
"geometry":{
"type":"Point",
"coordinates":[
1.49129,
42.46372
]
},
"properties": {
"numUsers":0
}
}
]
}
All the circles are initially rendered as red, which is what I want, because the numUsers property of each circle is initially set to 0. However, I want to change one of the circles to be green by setting the numUsers property to 1. I'm trying to use setFeatureState, but it doesn't change the circle's color to green:
map.setFeatureState({source: "cities", id : 0}, {numUsers : 1});
Below is my rendering JS code:
map.on('style.load', function (e) {
map.addSource('cities', {
"type": "geojson",
"data": "cities.geojson",
"cluster": true,
"clusterMaxZoom": 14,
"clusterRadius": 80
});
map.addLayer({
"id": "cities",
"type": "circle",
"source": "cities",
"paint": {
"circle-color": {
property: 'numUsers',
stops: [
[0, '#ff6666'],
[1, '#33ff33']
]
}
}
}, 'settlement-label');
});

You should use "feature-state"[1] expression to get the state that was set using setFeatureState and use "case" expression to switch through state values and set desired color.
Here's the gist of it:
// update after 2 seconds
setTimeout(() => {
map.setFeatureState({ id: 0, source: "geom" }, { numUsers: 1 });
map.setFeatureState({ id: 1, source: "geom" }, { numUsers: 2 });
}, 2000);
map.addLayer({
id: "geom",
type: "circle",
paint: {
"circle-color": [
"case",
["==", ["feature-state", "numUsers"], 1], "blue",
["==", ["feature-state", "numUsers"], 2], "green",
"red"
],
"circle-radius": 4
},
source: { /* ... source */ }
});
Code pen with a working map: https://codepen.io/manishraj/full/YzKeBwv
[1] https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-feature-state

I'm not sure you can use those kinds of function expressions with feature states, per https://docs.mapbox.com/mapbox-gl-js/style-spec/#other-function.
Instead you should be able to use a match expression https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match with ["feature-state", "numUsers"] to get the feature state in an expression, https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-feature-state

Highcharts.js different structure of input data

I have a simple Highcharts pie chart that takes the following data as input:
data: [
{"y":4, "name":"Russia", "txt": "Our hotel at the countryside was very nice and welcoming."},
{"y":2, "name":"Australia", "txt": "The trip to Ayers Rock was one of the highlights of our trip. The Great Barrier Reef and its clear water were simply amazing!"},
{"y":1, "name":"Argentina", "txt": "It has been a childhood dream to just go into the wild."},
{"y":4, "name":"China", "txt": "in year 1930 it was this is just a silly simple text to check if everything here is working."},
{"y":2, "name":"Neverland", "txt": "in year 1940 it was like this."},
{"y":4, "name":"Mars", "txt": "in year 1900 it was like this."}
]
Example:
$(document).ready(function() {
//var colors = ['#8d62a0', '#ceb3d8', '#d5dddd'];
Highcharts.getOptions().plotOptions.pie.colors = (function () {
var colors = [],
base = '#801a00',
i;
for (i = 0; i < 100; i += 1) {
colors.push(Highcharts.Color(base).brighten((i - 3) / 15).get());
}
return colors;
}());
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
tooltip: {
formatter: function() {
return '<b>'+this.point.name+'</b>';
}
},
legend: {
enabled: false
},
plotOptions: {
pie: {
innerSize: '75%'
},
series: {
cursor: 'pointer',
point: {
events: {
click: function(){
defineInnerData(this.y, this.txt, this);
},
}
},
states: {
hover: {
enabled: false
}
}
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
}
},
series: [{
dataLabels: {
enabled: false
},
data: [
{"y":4, "name":"Russia", "txt": "Our hotel at the countryside was very nice and welcoming."},
{"y":2, "name":"Australia", "txt": "The trip to Ayers Rock was one of the highlights of our trip. The Great Barrier Reef and its clear water were simply amazing!"},
{"y":1, "name":"Argentina", "txt": "It has been a childhood dream to just go into the wild."},
{"y":4, "name":"China", "txt": "in year 1930 it was this is just a silly simple text to check if everything here is working."},
{"y":2, "name":"Neverland", "txt": "in year 1940 it was like this."},
{"y":4, "name":"Mars", "txt": "in year 1900 it was like this."}
]
}]
});
function defineInnerData(name, y, obj) { // on complete
var chart=$("#container").highcharts();
$( "#pieChartInfoText" ).remove();
var textX = chart.plotLeft + (chart.plotWidth * 0.5);
var textY = chart.plotTop + (chart.plotHeight * 0.5);
var span = '<span id="pieChartInfoText" style="position:absolute; text-align:block;left: 235px;top:210px;width: 150px; height: 180px; overflow: scroll;">';
span += '<span style="font-size: 11px">'+ y +'</span><br>';
span += '</span>';
$("#addText").append(span);
span = $('#pieChartInfoText');
span.css('left', textX + (span.width() * -0.5));
span.css('top', textY + (span.height() * -0.5));
span.css('overflow', 'auto');
}
defineInnerData("", "Click on the slices to see the text");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div>
<div id="container" style="position:absolute; left:0px; top:0px;"></div>
<div id="addText" style="position:absolute; left:0px; top:0px;"></div>
</div>
<script src="testfile_highcharts.js"></script>
</body>
</html>
My question now is: How would I read data as input that comes in a different structure like the json code below (its geoJSON), where I would like to get the following values as input for my chart:
The tooltip should show the name of the country (which corresponds to properties.name in the geoJSON).
The number of slices corresponds to the value of data.features.articles (which in turn corresponds to the number of sentences in data.features.text).
When clicking on a slice the corresponding sentence (from data.features.text) should be displayed in the center of the circle.
Here is how the geoJSON data looks like:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 4,
"properties": {
"id": 4,
"name": "Thailand",
"lat": "13.7538929",
"lon": "100.8160803",
"2005": 14
},
"geometry": {
"type": "Point",
"coordinates": [
"100.8160803",
"13.7538929"
]
},
"text": ["The official reason given was that he wanted to give the Thai people time to mourn his father before he became king.", "Thailand has rarely had what might be called routine royal successions. The last was 70 years ago, when the young King Ananda was found shot dead in his bedroom in still unexplained circumstances."],
"sentences": "2"
},
{
"type": "Feature",
"id": 7,
"properties": {
"id": 7,
"name": "the United States",
"lat": "38.8949549",
"lon": "-77.0366455",
"2005": 14
},
"geometry": {
"type": "Point",
"coordinates": [
"-77.0366455",
"38.8949549"
]
},
"text": ["The presidential elections will be a hard fight this year", "The best travelling season is September until end of October", "New York City is a must-see when travelling on the East Coast."],
"sentences": "3"
},
{
"type": "Feature",
"id": 8,
"properties": {
"id": 8,
"name": "Greece",
"lat": "37.9841493",
"lon": "23.7279843",
"2005": 14
},
"geometry": {
"type": "Point",
"coordinates": [
"23.7279843",
"37.9841493"
]
},
"text": ["The Aegean islands are little paradise spots not far away from the bustling capital Athens "],
"sentences": "1"
}
]
}
I've tried for hours now to get this working, but I cannot seem to be able to do it. I'm very new to JavaScript and would appreciate every help here. I'm also sorry if the explanation of my problems should not be entirely clear, but I hope that there is someone who can still help me...

The key point to accomplish this is to convert the json structured data to a javascript object in the strucuture you want.
For do this you should iterate over the json object, get the values you want and exports it to the list you're passing to chart.
// The empty list passed to chart
var dataToChart = [];
// Empty object of the list
var dataToChartObject = {"y":0, "name":"", "txt": ""}
// Iterate over jSon to populate dataToChartObject
$.each(jsonObject.features, function(index, value){
dataToChartObject.name = value.properties.name;
dataToChartObject.txt = value.text[0]
// I didn't realize what the articles number is, but do the same logic to get it
// Now let's insert the object to the list
dataToChart.push(dataToChartObject);
});

This can be done in by traversing the JSON object by its properties:
var featureSet = theJSON.features;
var theData = [];
for (var item in featureSet) {
var set = featureSet[item];
for (var theText in set.text) {
var theSlice = {};
theSlice.name = set.properties.name;
theSlice.y = set.text.length;
theSlice.txt = set.text[theText];
theData.push(theSlice);
}
}
Where theJSON is your returned JSON object. From here you modify the chart to use theData.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
tooltip: {
formatter: function() {
return '<b>'+this.point.name+'</b>';
}
},
legend: {
enabled: false
},
plotOptions: {
pie: {
innerSize: '75%'
},
series: {
cursor: 'pointer',
point: {
events: {
click: function(){
defineInnerData(this.y, this.txt, this);
},
}
},
states: {
hover: {
enabled: false
}
}
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
}
},
series: [{
dataLabels: {
enabled: false
},
data: theData
}]
});
Sample jsFiddle. Note that your selector on which slice to pick is not happy due to multiple same name/value slices. I would add an index value to each slice and key off of that instead.

Dynamically create multi leveled drilldowns in Amcharts

I need to create a multi leveled that is dynamic because I have to drill down to hundreds or even thousands of data providers that will load from the database. The flow goes like this: I have 1, 2, 3, 4, and 5 years that will drill down to 16 Departments each and will drill down to Courses 10 or more courses. Doing it manually is tedious and I need it to be dynamic. Please help me.
The variables:
var ccs_final_data = AmCharts.loadJSON("<?php echo base_url();?>index.php/osa/final_ccs_data");
//VAR CCS AVERAGE_FINAL
var drill_down_to_ccs_courses_average_final = AmCharts.loadJSON("<?php echo base_url();?>index.php/osa/ccs_courses_data_average_final");
var drill_down_to_ccs_sections_BSIT_average_final = AmCharts.loadJSON("<?php echo base_url();?>index.php/osa/ccs_sections_data_BSIT_average_final");
var drill_down_to_ccs_sections_ACT_average_final = AmCharts.loadJSON("<?php echo base_url();?>index.php/osa/ccs_sections_data_ACT_average_final");
var drill_down_to_ccs_sections_BSCS_average_final = AmCharts.loadJSON("<?php echo base_url();?>index.php/osa/ccs_sections_data_BSCS_average_final");
The graph:
var chart2 = AmCharts.makeChart( "ccs2", {
"theme": "light",
type: "serial",
pathToImages: "http://cdn.amcharts.com/lib/3/images/",
dataProvider: ccs_final_data,
categoryField: "category",
categoryAxis: {
labelRotation: 0,
gridPosition: "start"
},
valueAxes: [ {
title: "CCS FINAL TERM - Passing"
} ],
graphs: [ {
valueField: "value",
colorField: "color",
type: "column",
lineAlpha: 100,
fillAlphas: 1
} ],
chartScrollbar: {
"updateOnReleaseOnly": true
},
chartCursor: {
bulletsEnabled: "enabled",
bulletSize: 15,
cursorAlpha: 100,
cursorColor: "#CC0000",
zoomable: true,
categoryBalloonEnabled: true
},
export: {
enabled: true
}
} );
Here's the drill down stuff:
chart2.addListener("clickGraphItem", function (event) {
if(event.item.category == "Average"){
event.chart.dataProvider = drill_down_to_ccs_courses_average_final;
event.chart.validateData();
chart2.addListener("clickGraphItem", function (event) {
if(event.item.category == "BSIT"){
event.chart.dataProvider = drill_down_to_ccs_sections_BSIT_average_final;
event.chart.validateData();
}
else if(event.item.category == "ACT"){
event.chart.dataProvider = drill_down_to_ccs_sections_ACT_average_final;
event.chart.validateData();
}
else if(event.item.category == "BSCS"){
event.chart.dataProvider = drill_down_to_ccs_sections_BSCS_average_final;
event.chart.validateData();
}
});
}

I'd say the best way to make it dynamic is to include some custom field for each data point in your data that would be passed in to server-side script so it knows which data to load.
I'm assuming your data looks like this now:
[ {
"category": "BSIT",
"value": 100
}, {
"category": "ACT",
"value": 200
}, {
"category": "BSCS",
"value": 150
} ]
You could easily add a third field to hold the information for drill-down data load:
[ {
"category": "BSIT",
"value": 100,
"drill": "ccs_sections_data_BSIT_average_final"
}, {
"category": "ACT",
"value": 200,
"drill": "ccs_sections_data_ACT_average_final"
}, {
"category": "BSCS",
"value": 150,
"drill": "ccs_sections_data_BSCS_average_final"
} ]
Then, when clickGraphItem event occurs, you could just take that info and pass it to load script dynamically:
chart2.addListener( "clickGraphItem", function( event ) {
if ( event.item.dataContext.drill !== undefined ) {
event.chart.dataProvider = AmCharts.loadJSON( "<?php echo base_url();?>index.php/osa/" + event.item.dataContext.drill );
event.chart.validateData();
}
} );
This way, you could have any number of drill-down levels, with each level data containing info about where to look for the data for the next level.
Also, I'm not sure as you haven't posted the code for it, so I'm assuming that AmCharts.loadJSON method is synchronous. If it's not (for example if you are using method from Data Loader), you will need to assign the chart's dataProvider after the data is loaded.

Zingcharts live feed not rendering chart

So I have been trying out ZingCharts which in general I like a ton. But now I am trying to create a live feed and the documentation isn't all that clear. I am trying to use HTTP to update a chart with new values. It seems that I need to have a page that is sending the chart data with updated values and that is what I am doing. This chart renders correctly when I past the JSON directly in the browser but not as a live feed, it now only emphasized textcorrectly pulls from the /metrics_feed and renders the outline of the chart but it is all grey. The JSON I am sending over HTTP is:
{
"crosshair-x": {},
"legend": {},
"plot": {
"valueBox": {
"placement": "top",
"type": "max, min",
"visible": false
}
},
"scaleX": {
"label": {
"text": "Metric count"
}
},
"scaleY": {
"label": {
"text": "Metric value"
}
},
"series": [
{
"text": "data point",
"values": [
-4.69283003950355,
-4.692830039503548,
-4.6928300395035505
]
}
],
"title": {
"text": "metrics over time"
},
"tooltip": {},
"type": "line"
}
And I am planning to update those values every second or so. Here is my HTML side code:
<head>
...
<script type="text/javascript">
var myChart = {"refresh":{
"type":"feed",
"transport":"http",
"url":"/metrics_feed",
"interval":1000
}
};
window.onload=function(){
zingchart.render({
id:"myChartDiv",
data:myChart,
height:600,
width:"100%"
});
};
</script>
</head>
<body>
<div id="myChartDiv"></div>
</body>
And this all works when I copy the direct JSON in there instead of sending it over HTTP so there is something I am missing in the Zingcharts documentation I suppose.

I'm on the ZingChart support team, and I'm happy to help you figure this out. You'll want to configure most of your chart settings and objects in your page, so in the myChart object. That means crosshair-x, legend, plot, etc... should all be static in the page and not passed via HTTP. In the JSON object, create empty series objects within the series array for each series that you will be passing to the chart. So, if you will only have one series plotted:
{
"type": "line",
"title": {
"text": "metrics over time"
},
/* Additional objects (tooltip, legend, crosshair, etc...) omitted for brevity */
"series": [
{
"values": []
}
]
}
And if you will be passing 2 series values:
{
"type": "line",
"title": {
"text": "metrics over time"
},
/* Additional objects (tooltip, legend, crosshair, etc...) omitted for brevity */
"series": [
{
"values": []
},
{
"values": []
}
]
}
The "refresh" object should also be placed in the myData object, in the top level:
{
"type": "line",
"title": {
"text": "metrics over time"
},
/* Additional objects (tooltip, legend, crosshair, etc...) omitted for brevity */
"refresh":{
"type":"feed",
"transport":"http",
"url":"/metrics_feed",
"interval":1000
},
"series": [
{
"values": []
},
{
"values": []
}
]
}
Depending on how many series objects you want in your chart, configure your script to pass values in the following format:
[ { "plot0" : 27, "plot1" : 34 } ]
Here's the feeds.php script that we use for the chart under the HTTP section of our feeds article:
<?php
$min = isset($_GET['min'])?intval($_GET['min']):0;
$max = isset($_GET['max'])?intval($_GET['max']):50;
$plots = isset($_GET['plots'])?intval($_GET['plots']):1;
?>
[
{
<?php
for ($plot=0;$plot<$plots;$plot++) {
?>
"plot<?php echo $plot; ?>" : <?php echo rand($min, $max); ?>,
<?php
}
?>
"scale-x" : "<?php echo date('H:i:s'); ?>"
}
]
This script also returns a timestamp that gets injected to an empty values array in our scale-x object. You can see a sample response here.
I apologize if our docs did not make this clear, I'll be updating them with added clarification soon. Anyway, I hope that helps you! Let me know if you need some more help.

Declaration 2d array containing multiple objects for graph plugin?

I using igDoughnutChart for my web-page, I want a graph which shows the following hierarchy
source of attack (inside)
login abuse
dos
spyware
worm
outside attackers
spying
social attacks
The current object array looks like (also demo)
var data = [
{ "attacksource": 43, "attacktype": 60, "AT":"DoS","Label": "iNISDE" },
{ "attacksource": 29, "attacktype": 40, "AT":"login abuse","Label": "outside" }
];
I want to change this to do following:- (also shown above)
Where I have a parent and child values in 2d array so above code is to transform as
var data =
[
[{"attacksource": 43,"Label":"Inside"}],
[
{"attacktype": 13,"Label":"dos"},
{"attacktype": 13,"Label":"virus"}...
]
];
I'm not sure If I have initialized / assigned 2d using objects correctly.I appreciate If someone can look at the code, and let me know if I'm doing this right.
UPDATE
The jsbin example is just something to illustrate my requirements for the new code. For e.g "Label":"virus" is currently hardcoded, in real code (which I cannot do on jsbin) is I will get the values from DB.
VISUAL EXAMPLE

I don't think the chart you are trying to use support what you want to do. That being said there is somewhat of a hack to make it work:
$(function () {
var data = [
{ "label": "Inside", "attacks": 8 },
{ "label": "Outside", "attacks": 6 },
// Inside
{ "label": "Dos", vector: "Inside", "dummyValue": 6 },
{ "label": "siem", detect: "Dos", "detectValue": 3 },
{ "label": "user", detect: "Dos", "detectValue": 3 },
{ "label": "Worm", vector: "Inside", "dummyValue": 2 },
{ "label": "siem", detect: "Worm", "detectValue": 1 },
{ "label": "user", detect: "Worm", "detectValue": 1 },
// Outside
{ "label": "Spying", vector: "Outside", "dummyValue": 3 },
{ "label": "siem", detect: "Spying", "detectValue": 1.5 },
{ "label": "user", detect: "Spying", "detectValue": 1.5 },
{ "label": "Social", vector: "Outside", "dummyValue": 3},
{ "label": "siem", detect: "Social", "detectValue": 1.5 },
{ "label": "user", detect: "Social", "detectValue": 1.5 },
];
$("#chart").igDoughnutChart({
width: "100%",
height: "550px",
innerExtent: 6,
series:
[
{
name: "Attack Type",
labelMemberPath: "label",
valueMemberPath: "attacks",
dataSource: data,
labelsPosition: "center"
},
{
name: "Attack Vector",
labelMemberPath: "label",
valueMemberPath: "dummyValue",
dataSource: data,
labelsPosition: "center"
},
{
name: "detect Vector",
labelMemberPath: "label",
valueMemberPath: "detectValue",
dataSource: data,
labelsPosition: "center"
}
]
});
});
The order of the data and series arrays matter (not completely, just partially). Here is a jsFiddle that demonstrates this. Disclaimer: I'm not saying this will always work, as it makes the big assumption that igniteUI will always parse and display the data in the same way.
Also I'm not familiar with the library but I would bet there is a way to customize the colors of each section of the chart. If so you could just make the color a function that returns a color based on the vector property.
Some alternatives:
Highcharts
D3 - this would be my preferred approach. Browse the gallery, there a few examples that apply here.