I have built this electoral map but I have not succeeded drawing a pie chart of the two parties on the pop-up dialog when a map region is clicked. The dialog title is being passed but not the actual values that should build the chat.
The returned json data is here and I just want to push a pie-chart to the dialog when someone clicks on a county on the map. Here's my code and "pointClick" function that should render the pie to a div.
$(function() {
$.getJSON("<?= base_url('index.php/presidential/getByCounty'); ?>", function(json) {
function pointClick(json) {
var row = this.options.row,
$div = $('<div></div>')
.dialog({
title: ([this.name]),
width: 400,
height: 300
});
//THIS IS ACTUALLY WHAT'S NOT WORKING
window.chart = new Highcharts.Chart({
chart: {
renderTo: $div[0],
type: 'pie',
width: 370,
height: 240
},
title: {
text: null
},
series: [{
name: 'Votes',
data: [{
name: 'nasa',
color: '#0200D0',
y: this.nasa //returned json data for candidate 1 and I problem must be somewhere here
}, {
name: 'jubilee',
color: '#C40401',
y: this.jubilee //returned json data for candidate 2
}],
dataLabels: {
// format: '<b>{point.name}</b> {point.value:.1f}%'
}
}]
});
}
//AM BUILDING THE ELECTORAL MAP FROM THIS POINT WHICH WORKS OUT NICELY
$('#presidential').highcharts('Map', {
title: {
text: 'Presidential Electoral Map <em>(Kenya - Test)</em>'
},
legend: {
title: {
text: 'Plotical Parties'
}
},
credits: {
enabled: false
},
tooltip: {
valueSuffix: ' Incumbent Margin'
},
mapNavigation: {
enabled: true,
enableButtons: false
},
colorAxis: {
dataClasses: [{
from: 0.0000001,
to: 100,
color: '#C40401',
name: 'Jubilee'
}, {
from: -100,
to: -0.00000001,
color: '#0200D0',
name: 'Nasa'
}, {
from: 0,
to: 0,
color: '#C0C0C0',
name: 'Battle Ground(s)'
}]
},
series: [{
name: 'By County Difference',
point: {
events: {
click: pointClick
}
},
"type": "map",
"joinBy": ['name', 'name'],
"data": $.each(json, function() {}),
"mapData": [{
"name": "Mandera",
"path": "M572,-818,574,-789,578,-783,598,-775,619,-750,646,-738,645,-727,652,-703,662,-689,678,-679,689,-666,693,-672,696,-734,733,-774,783,-848,774,-845,765,-850,761,-846,711,-843,677,-873,663,-874,583,-838z"
}, //and a couple more mapdata
]
}, {
"type": "mapline",
"data": [{
"name": "path5072",
"path": "M443,-449Z"
}]
}]
});
});
});
Your JSON data contains number in string format so convert it into Number
like this
Fiddle link
series: [{
name: 'Votes',
data: [{
name: 'nasa',
color: '#0200D0',
y: Number(this.nasa) //transform to number
}, {
name: 'jubilee',
color: '#C40401',
y: Number(this.jubilee) //transform to number
}],
dataLabels: {
format: '<b>{point.name}</b> {point.value:.1f}%'
}
}]
Related
error image click here
dummy arrays example :
plant_arr = ["abc","dbc","asd"]
opr_no_arr = ["company1","company2","company3"]
draft_arr = [0:{x:"abc",y:"comapny1"},1:{x:"bds",y:"comapny2"},2:{x:"dbc",y:"comapny3"}]
Pending For Creation = [0:{x:"abc",y:"comapny1"},1:{x:"bds",y:"comapny2"},2:{x:"dbc",y:"comapny3"}]
Created = [0:{x:"abc",y:"comapny1"},1:{x:"bds",y:"comapny2"},2:{x:"dbc",y:"comapny3"}]
name: "Pending For Creation",
data: draft_arr,
color:"#000000"
},{
name: "Created",
data: created_arr,
color:'#FF0000'
},{
name: "Execution In Progress",
data: execution_arr,
color:'#FFAE42'
},
{
name: "Completed",
data: completed_arr,
color:'#28a745'
}],
chart: {
height: 350,
type: 'scatter',
zoom: {
enabled: true,
type: 'xy'
},
},
xaxis: {
type: 'category',
//tickAmount: 10,
categories: plant_arr,
}, this is working
yaxis:
{
//type: 'category',
// tickAmount:1,
// categories : opr_no_arr,
labels: {
maxWidth: "auto",
formatter: (val : string, index) => opr_no_arr[index], //error cant show particaular labels
},
title: {
text: "OPR",
style: {
colors: "#000000"
}
}
},
legend: {
position: "top",
horizontalAlign: "right"
}
};
this.first_chartRef = new ApexCharts(document.getElementById('first'), chartOptions);
this.first_chartRef.render();
}
this the image of the output red line are output required
yaxis:
{
type: 'category',
tickAmount:6,
categories : opr_no_arr,
labels: {
maxWidth: "auto",
},
} keep it like this and check ?
I am currently working on a horizontal bar graph with Highcharts. I have 5 different categories Low, Medium Low, Medium, Medium High and High I would like to sort the data being returned from the graph by category name by descending order having Low be the starting point. For example, all Low data appears first in the graph, all Medium Low, all Medium appears next and so on.
I've done some research and it appears that the code below is what I need
dataSorting: {
enabled: true,
matchByName: true
},
but when applying this to HighCharts it did not affect my graph. Is this a feature that is provided in HighCharts? Is this something that is possible to do?
Here is a jsfiddle
My code:
let data = [10, 31, 13, 19, 21, 50, 10]
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "Bar Graph"
},
xAxis: {
},
yAxis: {
min: 0,
formatter: function() {
return this.value + "%";
},
title: {
text: '% of Total'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Low',
color: '#0D6302',
data: [data[0]],
showInLegend: true,
}, {
name: 'Medium-Low',
color: '#0B7070',
data: [data[2]]
}, {
name: 'Medium',
color: '#DC9603',
data: [data[3]]
},{
name: 'Low',
color: '#0D6302',
data: [data[1]],
showInLegend: false
},
{
name: 'Medium-High',
color: '#DD5F0C',
data: [data[4]]
}, {
name: 'High',
color: '#C50710',
data: [data[5]]
}]
});
Current look:
Desired look:
You can use the index feature to define the affecting the order of rendering.
Demo: https://jsfiddle.net/BlackLabel/9Lsvmpbh/
series: [{
name: 'Low',
index: 4,
color: '#0D6302',
data: [data[0]],
showInLegend: true,
}, {
name: 'Medium-Low',
index: 3,
color: '#0B7070',
data: [data[2]]
}, {
name: 'Medium',
index: 2,
color: '#DC9603',
data: [data[3]]
},{
name: 'Low',
index: 5,
color: '#0D6302',
data: [data[1]],
showInLegend: false
},
{
name: 'Medium-High',
index: 1,
color: '#DD5F0C',
data: [data[4]]
}, {
name: 'High',
index: 0,
color: '#C50710',
data: [data[5]]
}]
API: https://api.highcharts.com/highcharts/series.line.index
You should reorder your series' objects. According to this, highchart doesn't have a property to sort automatically. You should insert first your Low series, then Medium Low etc. The thing you want to be the last one, you should put it first in the series.
Following this
let data = [10, 31, 13, 19, 21, 50, 10]
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "Bar Graph"
},
xAxis: {
},
yAxis: {
min: 0,
formatter: function() {
return this.value + "%";
},
title: {
text: '% of Total'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'sorted'
}
},
series: [{
name: 'High',
color: '#C50710',
data: [data[5]]
}, {
name: 'Medium-High',
color: '#DD5F0C',
data: [data[4]]
}, {
name: 'Medium',
color: '#DC9603',
data: [data[3]]
},{
name: 'Medium-Low',
color: '#0B7070',
data: [data[2]]
},
{
name: 'Low',
color: '#0D6302',
data: [data[1]],
showInLegend: false
}, {
name: 'Low',
color: '#0D6302',
data: [data[0]],
showInLegend: true,
}]
});
I got this result:
I am using High charts packed bubble chart and I need to show different sizes of bubbles according to its value (negative values). It is working fine when I pass positive values but size of the circle not changing when I pass negative values. Is there any way to show chart with negative values?
js fiddle link with code example
Highcharts.chart('container', {
chart: {
type: 'packedbubble',
height: '100%'
},
title: {
text: 'TOP Countries'
},
tooltip: {
useHTML: true,
pointFormat: '<b>{point.name}:</b> {point.value}'
},
plotOptions: {
packedbubble: {
minSize: '30%',
maxSize: '80%',
zMin: 0,
zMax: 1000,
layoutAlgorithm: {
splitSeries: false,
gravitationalConstant: 0.02
},
dataLabels: {
enabled: true,
format: '{series.name}',
filter: {
property: 'y',
operator: '>',
value: 250
},
style: {
color: 'black',
textOutline: 'none',
fontWeight: 'normal'
}
}
}
},
series: [{
name: 'ASEAN',
data: [{
name: "ASEAN",
value: -88.2
}]
}, {
name: 'KOR ',
data: [{
name: "KOR",
value: -605.2
}]
}, {
name: 'CHN ',
data: [{
name: "CHN",
value: -427233.7
}]
}, {
name: 'ISA ',
data: [{
name: "ISA",
value: -355.39
}]
}, {
name: 'ANZ ',
data: [{
name: "ANZ ",
value: -3331.4
}]
}, {
name: 'JP ',
data: [{
name: "JP1",
value: -22470857.0
},{
name: "JP2",
value: -21470857.0
}]
}]
});
graph with negative values
graph with positive values
Properties zMin and zMax are not a part of official packedbubble series API, but they are internally used and work as in bubble series.
plotOptions: {
packedbubble: {
minSize: '30%',
maxSize: '80%',
//zMin: 0,
//zMax: 1000,
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/vro2wzL4/
API Reference:
https://api.highcharts.com/highcharts/series.packedbubble
https://api.highcharts.com/highcharts/series.bubble.zMin
We made some section in Flot Pie Chart but we can't get data for jquery data setting which is coming in left side area in default plugin show two field but we want to show three data. We are using flot pie chart jquery plugin :-
please see the image:-
jquery setting :-
// Flot Pie Chart - Traffic Sources bar
$(function() {
var data = [{
label: "Direct",
data: 15,
color: "#d3d3d3",
}, {
label: "Display",
data: 5,
color: "#bababa",
}, {
label: "Organic",
data: 30,
color: "#79d2c0",
}, {
label: "Paid",
data: 15,
color: "#1ab394",
}, {
label: "Referral",
data: 20,
color: "#049e7f",
}, {
label: "Social",
data: 15,
color: "#00775f",
}];
var plotObj = $.plot($("#traffic-sources"), data, {
series: {
pie: {
show: true
}
},
grid: {
hoverable: true
},
tooltip: true,
tooltipOpts: {
content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
shifts: {
x: 20,
y: 0
},
defaultTheme: false
}
});
var addTd = '<td class="legendData"> hello </td>';
$('#traffic-sources').find('.legendColorBox').next().before(addTd);
});
$(function() {
var data = [{
label: "Direct",
data: 15,
color: "#d3d3d3",
}, {
label: "Display",
data: 5,
color: "#bababa",
}, {
label: "Organic",
data: 30,
color: "#79d2c0",
}, {
label: "Paid",
data: 15,
color: "#1ab394",
}, {
label: "Referral",
data: 20,
color: "#049e7f",
}, {
label: "Social",
data: 15,
color: "#00775f",
}];
for (var i = 0; i < data.length; i++) {
//put the data value into the label
data[i].label = ' ' + data[i].data + '% ' + data[i].label;
}
var plotObj = $.plot($('#traffic-sources'), data, {
series: {
pie: {
show: true,
}
},
grid: {
hoverable: true
},
tooltip: true,
legend: {
show: true
},
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/flot/flot/958e5fd4/jquery.flot.js"></script>
<script src="https://cdn.rawgit.com/flot/flot/master/jquery.flot.pie.js"></script>
<div id="traffic-sources" style="width:500px;height:400px;"></div>
loop through all your data object and concatenate your label with data data[i].label = ' '+data[i].data+'% '+data[i].label; and then show it.
I use highchart everything works good except for the chart print button is not click-able, below are my highchart implementation and reference image. Any ideas, clues, suggestions, recommendations, help?
$('#chart_portfolio').highcharts({
chart: {
borderColor: '#ff0000',
width: null,
height: null
},
title: {
text: false,
x: -20 //center
},
xAxis: {
categories: portfolio_creation_date
},
yAxis: {
title: {
text: false
},
plotLines: [{
value: 0,
width: 1,
color: '#ff0000'
}]
},
tooltip: {
shared: true,
crosshairs: true
},
series: [{
name: 'Future',
data: portfolio_future,
color: '#0f00ff'
}, {
name: 'In Grace Period',
data: portfolio_ingrace_period,
color: '#fda800'
}, {
name: 'Arrears',
data: portfolio_in_arrears,
color: '#f40404'
}, {
name: 'Good standing',
data: portfolio_good_standing,
color: '#4da74d'
}]
}); //end of highcharts
Issue reference image
Simply set higher zIndex for that button: http://jsfiddle.net/9P5fC/488/
exporting: {
buttons: {
contextButton: {
theme: {
zIndex: 100
}
}
}
}