Currently I am working on a feature layer of arcgis API for JavaScript. I want to show the graph with respect to my layers. Is it possible? If yes, then how can I add highchart on my map?
Here is the graph, which I want to show on my arcgis map:
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Fiber Position in BTK'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Arial',
y: 61.41
}, {
name: 'Burried',
y: 11.84
}, {
name: 'Other',
y: 10.85
}]
}]
});
Related
This my map configuration
chart = Highcharts.mapChart('container', {
title: {
text: ''
},
//This enables the zooming functionality
mapNavigation: {
enabled: true
},
credits: {
enabled: false
},
tooltip: {
pointFormat:
'Server Name : {point.source_host}<br>' +
'{point.Hover}<br>' +
'{point.trueVUEStatus}'
},
xAxis: {
crosshair: {
zIndex: 5,
dashStyle: 'dot',
snap: false,
color: 'gray'
}
},
yAxis: {
crosshair: {
zIndex: 5,
dashStyle: 'dot',
snap: false,
color: 'gray'
}
},
plotOptions: {
series: {
//allowPointSelect: true,
point: {
events: {
click: function (event) {
//location.href = '?' + event.point.serverName + '#serverdetailsview';
//alert('clicked '+ event.point.source_host);
window.open('index.html?' + event.point.source_host + "#serverdetailsview&store-no=" + event.point.storeNum, '_blank');
//http://localhost:10080/dashboard/index.html?ME629ASRFI21#serverdetailsview
}
}
}
}
},
series: [{
name: 'Basemap',
mapData: map,
borderColor: '#606060',
nullColor: 'rgba(200, 200, 200, 0.2)',
showInLegend: false
}, {
name: 'Separators',
type: 'mapline',
data: H.geojson(map, 'mapline'),
color: '#101010',
enableMouseTracking: false,
showInLegend: false
}, {
showInLegend: false,
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.storeNum}',
style:{color:"white"}
},
name: 'Cities1',
data: normaljson,
minsize: '1%',
maxSize: '4%',
color: '#00a65a'
},{
showInLegend: false,
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.storeNum}',
style:{color:"white"}
},
name: 'Cities2',
data: warnjson,
minsize: '1%',
maxSize: '4%',
color: '#f39c12'
},
{
showInLegend: false,
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.storeNum}',
style:{color:"white"}
},
name: 'Cities3',
data: errorjson,
minsize: '1%',
maxSize: '4%',
color: '#dd4b39'
}]
});
Just after this I am calling setData()
However, the bubble is not drawn on map
var pt = {"source_host":"xcxxxx","lat":26.3685,"lon":-80.1344,"serverIP":"NA","store":"Bloomingdales","storeNum":"2","status":"green"};
chart.series[2].setData([pt]);
It seems that you didn't include z property (value of the bubble) in your point's JSON (https://api.highcharts.com/highmaps/series.mapbubble.data.z).
Bubble is rendering fine after I added it: http://jsfiddle.net/BlackLabel/ktha1nmz/
My chart was ok, I don't know what happened that the series name disappeared!
Maybe highcharts last updates need another options, or rtl causes problems.
My code: fiddle
What am I missing here?
$(function() {
$(document).ready(function() {
Highcharts.chart('user_info_46', {
chart: {
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
},
title: {
text: '',
useHTML: Highcharts.hasBidiBug,
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
legend: {
useHTML: true,
align: 'right',
rtl: true,
},
tooltip: {
useHTML: true,
align: 'right',
},
credits: {
enabled: false
},
series: [{
name: 'تعداد',
colorByPoint: true,
data: [{
name: 'آقا',
y: 7,
color: 'cornsilk'
}, {
name: 'خانم',
y: 2,
color: 'green'
}]
}]
});
});
});
Below is the highcharts code I am using with dynamic values $fprgreen, $fprblue and $fprdrkorange.
$('#seo-perform-fpr').highcharts({
exporting: {
enabled: false
},
credits: {
enabled: false
},
title: false,
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: false
}
},
series: [{
colorByPoint: true,
data: [{
name: 'High',
color: '#8bc43f',
y: <?php echo $fprgreen;?>
}, {
name: 'Steady',
y: <?php echo $fprblue;?>,
// sliced: true,
// selected: true,
color: '#01A9F4',
}, {
name: 'Underperforming',
y: <?php echo $fprdrkorange;?>,
color: '#f57c00',
}, ]
}]
});
If the values of $fprgreen, $fprblue and $fprdrkorange are 0, I need to show "No data found" message on the place of pie chart.
have been trying to prevent this clustering but nothing is coming through. have tried overlays, distance, rotation but the labels are still clustering. How do i prevent them from overlapping?
<script>
$(function () {
$.getJSON('/Administration/Dashboard/PieChartDrilldown/0', function (data) {
$('#container0').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'PARKING',
floating: true,
align: 'center',
},
tooltip: {
pointFormat: '{series.name}: </b>: Ksh. {point.y:,.0f}',
},
credits: false,
plotOptions: {
pie: {
size: '100%',
padding: 0,
allowPointSelect: true,
innerSize: '50%',
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: -30,
x: 0,
y: 10,
format: '<b>{point.name}</b>: Ksh. {point.y:,.0f}',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Parking',
colorByPoint: true,
data: data.data
}]
,
drilldown: {
series: data.drilldown
}
});
});
});
</script>
<div id="container0" class="col-md-3" style="margin:0px; height:300px"></div>
I'm trying to add a legend on a pie when exporting the chart as PNG.
Here is my code :
var chart_23_106;
$(document).ready(function () {
chart_23_106 = new Highcharts.Chart({
chart: { type: 'pie', renderTo: 'container_23_106', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false },
title: { text: 'NRJ' },
tooltip: { pointFormat: '{series.name}: <b>{point.percentage}%</b>', percentageDecimals: 1 },
plotOptions: {
pie: { borderWidth: 0, shadow: false, allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false } }
},
colors: ['#9F9F9F','#BE6EBE','#FFA74F','#B7B7D0','#CBE22A','#00C8C8'],
credits: { enabled: false, text: "Source: Air Normand", href: "" },
exporting:{ buttons: {
printButton: {enabled:false},
exportButton: {menuItems:null,onclick:function(){this.exportChart(null,
{ chart: {reflow: false, width: 400},
title: {text: "Répartition de la Consommation"},
subtitle: {text: "Haute-Normandie"},
plotOptions: {pie: {dataLabels: {enabled: true}, showInLegend: true}},
credits: {enabled: true} }
);}}
}},
lang: {exportButtonTitle: "Export image au format PNG"},
series: [{
type: 'pie',
name: 'Proportion',
data: [
['Activite 1', 684.6],
['Activite 2', 564.7],
['Activite 3', 244.4],
['Activite 4', 42.8],
]
}]
});
});
In the function exportChart, all but the plotOptions gives the right effect. In the PNG file, the title is changed, subtitle and credits are added, but the dataLabels and the legend don't appear...
Anyone knowing why ?
Could anyone help me ?
Thanks
Yes it is possible by disabling legend in chart and in exporting parameters (http://api.highcharts.com/highcharts#exporting.chartOptions) set this option as active.
Working example: http://jsfiddle.net/xvQNA/
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
legend:{
enabled:false
},
exporting:{
chartOptions:{
legend:{
enabled:true
}
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
showInLegend:true,
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
For me it worked when i disabled the navigation in the exporting options :
exporting: {
chartOptions: {
legend: {
navigation: {
enabled: false
}
}
}
},
you just should add enable: true in dataLabels:
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
}