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
Related
I'm using JSreport 3.4.1. and Chart.js 3.8.0. From a server API I'm getting a series of data to create n. charts. The problem is that the number of charts are never the same (they depend on various parameters in a database).
I cannot create n. static charts for the reason above, so I was trying to dynamically create and inject them in the DOM through jQuery, but I'm having some difficulties:
It successfully creates the first chart, but with incorrect data (like it isn't waiting for the trigger input), and the second chart isn't shown at all.
Any idea on how to create a dynamic number of charts based on the number of objects (inside an array) that arrives through an API?
const datasets = {
"datasets": [{
"dynamic_id": 0,
"NomeAnomalia": "MIT Appoggi",
"GruppiAnomalie": 199,
"anomalyList": [{
"GruppiAnomalie": 199,
"Code": "Classe 1\nApp1",
"Name": "Piastra di base deformata",
"Class": "Classe 1",
"Severity": "0 - Lieve",
"Value": 100
}],
"pieChartData": [{
"severityName": "Lieve",
"severityValue": 100
},
{
"severityName": "Media",
"severityValue": 0
},
{
"severityName": "Forte",
"severityValue": 0
}
]
},
{
"dynamic_id": 1,
"NomeAnomalia": "MIT Impalcati,Travi,Traversi CA CAP",
"GruppiAnomalie": 199,
"anomalyList": [{
"GruppiAnomalie": 199,
"Code": "Classe 1\nApp1",
"Name": "Piastra di base deformata",
"Class": "Classe 1",
"Severity": "0 - Lieve",
"Value": 100
}],
"pieChartData": [{
"severityName": "Lieve",
"severityValue": 100
},
{
"severityName": "Media",
"severityValue": 0
},
{
"severityName": "Forte",
"severityValue": 0
}
]
}
]
}
var content = document.getElementById('content');
for (dataset of datasets.datasets) {
var divPieChart = `
<div class="row">
<div class="col-sm-12">
<div class="chart-container">
<canvas id="bar_chart_${dataset.dynamic_id}"></canvas>
</div>
</div>
</div>`;
content.innerHTML += divPieChart;
var bar_chart_ctx = document.getElementById(`bar_chart_${dataset.dynamic_id}`).getContext('2d');
var bar_chart = new Chart(bar_chart_ctx, {
type: 'bar',
data: {
labels: [1, 2, 3],
datasets: [{
"label": "2017",
"data": [5, 3, 7.5],
"backgroundColor": ["rgba(215, 221, 234)"]
}]
},
options: {
maintainAspectRatio: false,
devicePixelRatio: 1.5,
plugins: {
legend: {
display: true,
position: "top"
}
},
scales: {
y: {
beginAtZero: true
}
},
animation: {
onComplete: function() {
// set the PDF printing trigger when the animation is done
// to have this working, the chrome-pdf menu in the left must
// have the wait for printing trigger option selected
window.JSREPORT_READY_TO_START = true
}
}
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0"></script>
<div id="test"></div>
<div id="content"></div>
I've set a playground with mock data (not really needed cause I've put static data inside the charts) so you can see what I mean:
playground test
Thank you
EDIT
I figured out how to do it (JSReport specifically): in JSReport, window.JSREPORT_READY_TO_START = true tells the report that all the components in the page are done to print. Breaking down the "creation" of the html and the "creation" of the charts into two separates loop, using the length of the dataset as control, makes the work (only JSReport, I won't post a snippet cause it won't work the same as window.JSREPORT_READY_TO_START = true is not present).
Here's the playground if someone needs it: playground test
Good day!
I want to create an expression in Mapbox-gl-js for circle-radius. The challenge is circle-radius takes value in pixel but I have geographical coordinates(lat/lng).
When I try to use Map.project inside expression below(doesn't work):
['*',
2,
[
'*',
['pi'],
[
'-',
map.project(['get', 'p1'])[0], //<--doesn't work
map.project(['get', 'p2'])[0] //<--doesn't work
]
]
]
const layer: mapboxgl.Layer = {
'id': seatLayerName,
'type': "circle",
'source': 'maine',
'paint': {
"circle-radius": [
'interpolate',
['exponential', 2],
['zoom'],
5,
...//code
13,
['*', 2, ['*', ['pi'], ['-', ['get', 'p1'], ['get', 'p2']]]] //<-- How to use map.project here
]
}
};
Geojson:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
8.156983852386475,
-4.0492925407532
]
},
"properties": {
p1: [8.156983852386475, -4.0492925407532], //<-- point 1 lat/lng
p2: [8.176983852386475, -4.0492925407532] //<-- point 2 lat/lng
}
},
....
]
}
Attaching a screenshot, which I want to achieve creating an expression:
Mapbox provides map.project method to convert lat/lng to the pixel.
But how can I use this inside an expression?
Any suggestion would be helpful.
I am following an example provided on the deck.gl github repository that displays polygons from a geojson.
I've since changed the initial focus of the map and provided my own geojson to visualise, the data I've replaced the examples with has a temporal component that I'd like to visualise via the manipulation of a range input.
Example GeoJSON Structure
{
"type": "FeatureCollection",
"name": "RandomData",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature",
"properties": { "id": 1,"hr00": 10000, "hr01": 12000, "hr02": 12000, "hr03": 30000, "hr04": 40000, "hr05": 10500, "hr06": 50000}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 103.73992, 1.15903 ], [ 103.74048, 1.15935 ], [ 103.74104, 1.15903 ], [ 103.74104, 1.15837 ], [ 103.74048, 1.15805 ], [ 103.73992, 1.15837 ], [ 103.73992, 1.15903 ] ] ] } } ] }
Instead of repeating each geometry for every timepoint I've shifted the temporal aspect of the data to the properties. This makes the file size manageable on the complete dataset (~50mb versus ~500mb).
For visualising a single time point I know that I can provide the property to getElevation and getFillColor.
_renderLayers() {
const {data = DATA_URL} = this.props;
return [
new GeoJsonLayer({
id: 'geojson',
data,
opacity: 0.8,
stroked: false,
filled: true,
extruded: true,
wireframe: true,
fp64: true,
getElevation: f => f.properties.hr00,
getFillColor: f => COLOR_SCALE(f.properties.hr00),
getLineColor: [255, 255, 255],
lightSettings: LIGHT_SETTINGS,
pickable: true,
onHover: this._onHover,
transitions: {
duration: 300
}
})
];
}
So I went ahead and used range.slider, adding code to my app.js, this following snippet was added. I believe I also may be placing this in the wrong location, should this exist in render()?
import ionRangeSlider from 'ion-rangeslider';
// Code for slider input
$("#slider").ionRangeSlider({
min: 0,
max: 24,
from: 12,
step: 1,
grid: true,
grid_num: 1,
grid_snap: true
});
$(".js-range-slider").ionRangeSlider();
added to my index.html
<input type="text" id="slider" class="js-range-slider" name="my_range" value=""/>
So how can I have the slider change which property of my geojson is being supplied to getElevation and getFillColor?
My JavaScript/JQuery is lacking and I have been unable to find any clear examples of how to change the data property based on the input, any help is greatly appreciated.
Here is a codesandbox link - doesn't seem to like it there however.
Locally with npm install and npm start should have it behave as intended.
At first you'll need to tell your dependent accessors about the value that is going to be changed by the slider. This can be done by using updateTriggers:
_renderLayers() {
const { data = DATA_URL } = this.props;
return [
new GeoJsonLayer({
// ...
getElevation: f => f.properties[this.state.geoJsonValue],
getFillColor: f => COLOR_SCALE(f.properties[this.state.geoJsonValue]),
updateTriggers: {
getElevation: [this.state.geoJsonValue],
getFillColor: [this.state.geoJsonValue]
}
// ...
})
];
}
And to actually change this value using range-slider you need to add onChange callback during the initialization:
constructor(props) {
super(props);
this.state = { hoveredObject: null, geoJsonValue: "hr01" };
this.sliderRef = React.createRef();
this._handleChange = this._handleChange.bind(this);
// ...
}
componentDidMount() {
// Code for slider input
$(this.sliderRef.current).ionRangeSlider({
// ...
onChange: this._handleChange
});
}
_handleChange(data) {
this.setState({
geoJsonValue: `hr0${data.from}`
});
}
render() {
...
<DeckGL ...>
...
</DeckGL>
<div id="sliderstyle">
<input
ref={this.sliderRef}
id="slider"
className="js-range-slider"
name="my_range"
/>
</div>
...
}
And this is basically it. And here is the full code
I am using amchart for a graph. Below is the code,
var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"startDuration": 2,
"dataProvider": [{
"country": "This is Sample Data with long label",
"visits": 4025,
"color": "#FF0F00"
}, {
"country": "This is Sample Data with long label1",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "This is Sample Data with long label2",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "This is Sample Data with long label3",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "This is Sample Data with long label4",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "This is Sample Data with long label5",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "This is Sample Data with long label6",
"visits": 984,
"color": "#04D215"
}, {
"country": "This is Sample Data with long label7",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "This is Sample Data with long label8",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "This is Sample Data with long label9",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "This is Sample Data with long label10",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "This is Sample Data with long label11",
"visits": 441,
"color": "#CD0D74"
}, {
"country": "This is Sample Data with long label12",
"visits": 395,
"color": "#754DEB"
}, {
"country": "This is Sample Data with long label13",
"visits": 386,
"color": "#DDDDDD"
}, {
"country": "This is Sample Data with long label14",
"visits": 338,
"color": "#333333"
}],
"valueAxes": [{
"position": "left",
"axisAlpha":0,
"gridAlpha":0
}],
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"colorField": "color",
"fillAlphas": 0.85,
"lineAlpha": 0.1,
"type": "column",
"topRadius":1,
"valueField": "visits"
}],
"depth3D": 40,
"angle": 30,
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha":0,
"gridAlpha":0
},
"labelFunction": function(label, item, axis) {
var chart = axis.chart;
if ( (chart.realWidth <= 300 ) && ( label.length > 5 ) )
return label.substr(0, 5) + '...';
if ( (chart.realWidth <= 500 ) && ( label.length > 10 ) )
return label.substr(0, 10) + '...';
return label;
},
"legend": {
"useGraphSettings": true
},
"export": {
"enabled": true
}
}, 0);
However the Xaxis label is very lenghy, I wanted to auto truncate the long category axis labels like this example and also enable legend. But enabling legend doesn't work, also auto truncating doesn't seem to work. Could someone help me out here? Thanks in advance.
Here is the link to codepen [1].
[1] https://codepen.io/gknathkumar/pen/OxKGev
As others have stated, the labelFunction is part of the categoryAxis, so it needs to go in there. I'm partial to the method in kuzyn's implementation, but pick whichever you want.
As for the legend, it is generated by graph objects by design. Since there's one graph object, there's only one marker. Adding a marker for each column requires you add custom code that modifies the legend's data array to generate customized markers. AmCharts has a knowledge base article for generating markers for each column. Relevant code below:
/*
Plugin to generate legend markers based on category
and fillColor/lineColor/color field from the chart data by using
the legend's custom data array. Also allows for toggling markers
by completely removing/adding columns from the chart
The plugin assumes there is only one graph object.
*/
AmCharts.addInitHandler(function(chart) {
//method to handle removing/adding columns when the marker is toggled
function handleCustomMarkerToggle(legendEvent) {
var dataProvider = legendEvent.chart.dataProvider;
var itemIndex; //store the location of the removed item
//Set a custom flag so that the dataUpdated event doesn't fire infinitely, in case you have
//a dataUpdated event of your own
legendEvent.chart.toggleLegend = true;
// The following toggles the markers on and off.
// The only way to "hide" a column and reserved space on the axis is to remove it
// completely from the dataProvider. You'll want to use the hidden flag as a means
// to store/retrieve the object as needed and then sort it back to its original location
// on the chart using the dataIdx property in the init handler
if (undefined !== legendEvent.dataItem.hidden && legendEvent.dataItem.hidden) {
legendEvent.dataItem.hidden = false;
dataProvider.push(legendEvent.dataItem.storedObj);
legendEvent.dataItem.storedObj = undefined;
//re-sort the array by dataIdx so it comes back in the right order.
dataProvider.sort(function(lhs, rhs) {
return lhs.dataIdx - rhs.dataIdx;
});
} else {
// toggle the marker off
legendEvent.dataItem.hidden = true;
//get the index of the data item from the data provider, using the
//dataIdx property.
for (var i = 0; i < dataProvider.length; ++i) {
if (dataProvider[i].dataIdx === legendEvent.dataItem.dataIdx) {
itemIndex = i;
break;
}
}
//store the object into the dataItem
legendEvent.dataItem.storedObj = dataProvider[itemIndex];
//remove it
dataProvider.splice(itemIndex, 1);
}
legendEvent.chart.validateData(); //redraw the chart
}
//check if legend is enabled and custom generateFromData property
//is set before running
if (!chart.legend || !chart.legend.enabled || !chart.legend.generateFromData) {
return;
}
var categoryField = chart.categoryField;
var colorField = chart.graphs[0].lineColorField || chart.graphs[0].fillColorsField || chart.graphs[0].colorField;
var legendData = chart.dataProvider.map(function(data, idx) {
var markerData = {
"title": data[categoryField] + ": " + data[chart.graphs[0].valueField],
"color": data[colorField],
"dataIdx": idx //store a copy of the index of where this appears in the dataProvider array for ease of removal/re-insertion
};
if (!markerData.color) {
markerData.color = chart.graphs[0].lineColor;
}
data.dataIdx = idx; //also store it in the dataProvider object itself
return markerData;
});
chart.legend.data = legendData;
//make the markers toggleable
chart.legend.switchable = true;
chart.legend.addListener("clickMarker", handleCustomMarkerToggle);
}, ["serial"]);
This plugin requires that you set a custom generateFromData flag to true in your legend and nothing else (useGraphSettings is not compatible):
"legend": {
"generateFromData": true //custom property for the plugin
},
Here's a demo that leverages kuzyn's trim method and the aforementioned plugin:
/*
Plugin to generate legend markers based on category
and fillColor/lineColor/color field from the chart data by using
the legend's custom data array. Also allows for toggling markers
by completely removing/adding columns from the chart
The plugin assumes there is only one graph object.
*/
AmCharts.addInitHandler(function(chart) {
//method to handle removing/adding columns when the marker is toggled
function handleCustomMarkerToggle(legendEvent) {
var dataProvider = legendEvent.chart.dataProvider;
var itemIndex; //store the location of the removed item
//Set a custom flag so that the dataUpdated event doesn't fire infinitely, in case you have
//a dataUpdated event of your own
legendEvent.chart.toggleLegend = true;
// The following toggles the markers on and off.
// The only way to "hide" a column and reserved space on the axis is to remove it
// completely from the dataProvider. You'll want to use the hidden flag as a means
// to store/retrieve the object as needed and then sort it back to its original location
// on the chart using the dataIdx property in the init handler
if (undefined !== legendEvent.dataItem.hidden && legendEvent.dataItem.hidden) {
legendEvent.dataItem.hidden = false;
dataProvider.push(legendEvent.dataItem.storedObj);
legendEvent.dataItem.storedObj = undefined;
//re-sort the array by dataIdx so it comes back in the right order.
dataProvider.sort(function(lhs, rhs) {
return lhs.dataIdx - rhs.dataIdx;
});
} else {
// toggle the marker off
legendEvent.dataItem.hidden = true;
//get the index of the data item from the data provider, using the
//dataIdx property.
for (var i = 0; i < dataProvider.length; ++i) {
if (dataProvider[i].dataIdx === legendEvent.dataItem.dataIdx) {
itemIndex = i;
break;
}
}
//store the object into the dataItem
legendEvent.dataItem.storedObj = dataProvider[itemIndex];
//remove it
dataProvider.splice(itemIndex, 1);
}
legendEvent.chart.validateData(); //redraw the chart
}
//check if legend is enabled and custom generateFromData property
//is set before running
if (!chart.legend || !chart.legend.enabled || !chart.legend.generateFromData) {
return;
}
var categoryField = chart.categoryField;
var colorField = chart.graphs[0].lineColorField || chart.graphs[0].fillColorsField || chart.graphs[0].colorField;
var legendData = chart.dataProvider.map(function(data, idx) {
var markerData = {
"title": data[categoryField] + ": " + data[chart.graphs[0].valueField],
"color": data[colorField],
"dataIdx": idx //store a copy of the index of where this appears in the dataProvider array for ease of removal/re-insertion
};
if (!markerData.color) {
markerData.color = chart.graphs[0].lineColor;
}
data.dataIdx = idx; //also store it in the dataProvider object itself
return markerData;
});
chart.legend.data = legendData;
//make the markers toggleable
chart.legend.switchable = true;
chart.legend.addListener("clickMarker", handleCustomMarkerToggle);
}, ["serial"]);
// keep the data object separate from the call
var dataProvider = [
{
country: "This is Sample Data with long label",
visits: 4025,
color: "#FF0F00"
},
{
country: "This is Sample Data with long label1",
visits: 1882,
color: "#FF6600"
},
{
country: "This is Sample Data with long label2",
visits: 1809,
color: "#FF9E01"
},
{
country: "This is Sample Data with long label3",
visits: 1322,
color: "#FCD202"
}
];
var chart = AmCharts.makeChart(
"chartdiv",
{
theme: "light",
type: "serial",
startDuration: 2,
dataProvider: dataProvider,
valueAxes: [
{
position: "left",
axisAlpha: 0,
gridAlpha: 0
}
],
graphs: [
{
balloonText: "[[category]]: <b>[[value]]</b>",
colorField: "color",
fillAlphas: 0.85,
lineAlpha: 0.1,
type: "column",
topRadius: 1,
valueField: "visits"
}
],
depth3D: 40,
angle: 30,
chartCursor: {
categoryBalloonEnabled: false,
cursorAlpha: 0,
zoomable: false
},
categoryField: "country",
categoryAxis: {
gridPosition: "start",
axisAlpha: 0,
gridAlpha: 0,
labelFunction: trimLabel,
},
legend: {
generateFromData: true //custom property for the plugin
},
export: {
enabled: true
}
},
0
);
// function to trim the labels
function trimLabel(label, item, axis) {
var chartWidth = axis.chart.realWidth;
var maxLabelLength = 15; // not counting the dots...
// trim when the width of the chart is smalled than 300px
if (chartWidth <= 300 && label.length > 5)
return label.substr(0, 5) + "...";
// trim when the width of the chart is smalled than 500px
if (chartWidth <= 500 && label.length > 10)
return label.substr(0, 10) + "...";
// trim when label is longer than maxLabelLength regardless of chart width
return label.length >= 15 ? label.substr(0, 14) + "...": label;
}
#chartdiv {
width: 990px;
height: 365px;
border-radius: 3px;
margin: 0px;
border: 1px dotted #728FCE;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<input type="button" value="Set width to 300px" onclick="document.getElementById('chartdiv').style.width='300px';" />
<input type="button" value="Set width to 500px" onclick="document.getElementById('chartdiv').style.width='500px';" />
<input type="button" value="Set width to 700px" onclick="document.getElementById('chartdiv').style.width='700px';" />
<div id="chartdiv"></div>
Note that if you want the labels on the markers trimmed, you'll have to call trim when creating the markers' titles in the initHandler as well.
make labelFunction like below:
"labelFunction": function(label, item, axis) {
var chart = axis.chart;
console.log("CHART:", chart.realWidth, label.length, label );
if ( ( label.length > 5 ) ){
console.log("CHARTLABEL:", label.substr(0, 5) + '...');
return label.substr(0, 7) + '...';
}
if ( ( label.length > 10 ) ){
return label.substr(0, 10) + '...';
}
return label;
},
And your code was not working because you have to put label function inside categoryAxis
Final working solution : https://codepen.io/anon/pen/aLerBZ?editors=0010
There are a couple of small mistake in your code:
labelFunction is not in categoryAxis
the size of your chart never drops below 500px, hence the labels were never trimmed like in the example
some of the code could have been put in variables to make is easier to debug
I've separated some of the code, and added a maximum length (15 characters) for labels regardless of the chart width
View the full example on Codepen
// keep the data object separate from the call
var dataProvider = [
{
country: "This is Sample Data with long label",
visits: 4025,
color: "#FF0F00"
},
{
country: "This is Sample Data with long label1",
visits: 1882,
color: "#FF6600"
},
{
country: "This is Sample Data with long label2",
visits: 1809,
color: "#FF9E01"
},
{
country: "This is Sample Data with long label3",
visits: 1322,
color: "#FCD202"
}
];
var chart = AmCharts.makeChart(
"chartdiv",
{
theme: "light",
type: "serial",
startDuration: 2,
dataProvider: dataProvider,
valueAxes: [
{
position: "left",
axisAlpha: 0,
gridAlpha: 0
}
],
graphs: [
{
balloonText: "[[category]]: <b>[[value]]</b>",
colorField: "color",
fillAlphas: 0.85,
lineAlpha: 0.1,
type: "column",
topRadius: 1,
valueField: "visits"
}
],
depth3D: 40,
angle: 30,
chartCursor: {
categoryBalloonEnabled: false,
cursorAlpha: 0,
zoomable: false
},
categoryField: "country",
categoryAxis: {
gridPosition: "start",
axisAlpha: 0,
gridAlpha: 0,
labelFunction: trimLabel,
},
legend: {
useGraphSettings: true
},
export: {
enabled: true
}
},
0
);
// function to trim the labels
function trimLabel(label, item, axis) {
var chartWidth = axis.chart.realWidth;
var maxLabelLength = 15; // not counting the dots...
// trim when the width of the chart is smalled than 300px
if (chartWidth <= 300 && label.length > 5)
return label.substr(0, 5) + "...";
// trim when the width of the chart is smalled than 500px
if (chartWidth <= 500 && label.length > 10)
return label.substr(0, 10) + "...";
// trim when label is longer than maxLabelLength regardless of chart width
return label.length >= 15 ? label.substr(0, 14) + "...": label;
}
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.