I have a dataset for population pyramid and i use highcharts but i have some problem with deciminal sperator. Highcharts accept separator as "." but the dataset has "," so after the comma it see as a new values. i mean that for "5,12" it doesn't accept as 5.12, it accepts 5, 12 seperately two values. how can i solve this? (i can't change "," to "." because it takes from database).
<script>
{% for item in dataset %}
// Age categories
var categories = [
'0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90+'
];
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'POPULATION PYRAMID'
},
subtitle: {
text: 'Source: #'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y),
}
},
series: [{
name: 'Men',
data: [
-{{ item.men_population_0_4_percentage }},
-{{ item.men_population_5_9_percentage }},
-{{ item.men_population_10_14_percentage }},
-{{ item.men_population_15_19_percentage }},
-{{ item.men_population_20_24_percentage }},
-{{ item.men_population_25_29_percentage }},
-{{ item.men_population_30_34_percentage }},
-{{ item.men_population_35_39_percentage }},
-{{ item.men_population_40_44_percentage }},
-{{ item.men_population_45_49_percentage }},
-{{ item.men_population_50_54_percentage }},
-{{ item.men_population_55_59_percentage }},
-{{ item.men_population_60_64_percentage }},
-{{ item.men_population_65_69_percentage }},
-{{ item.men_population_70_74_percentage }},
-{{ item.men_population_75_79_percentage }},
-{{ item.men_population_80_84_percentage }},
-{{ item.men_population_85_89_percentage }},
-{{ item.men_population_90_over_percentage }},
]
}, {
name: 'Women',
data: [
{{ item.women_population_0_4_percentage }},
{{ item.women_population_5_9_percentage }},
{{ item.women_population_10_14_percentage }},
{{ item.women_population_15_19_percentage }},
{{ item.women_population_20_24_percentage }},
{{ item.women_population_25_29_percentage }},
{{ item.women_population_30_34_percentage }},
{{ item.women_population_35_39_percentage }},
{{ item.women_population_40_44_percentage }},
{{ item.women_population_45_49_percentage }},
{{ item.women_population_50_54_percentage }},
{{ item.women_population_55_59_percentage }},
{{ item.women_population_60_64_percentage }},
{{ item.women_population_65_69_percentage }},
{{ item.women_population_70_74_percentage }},
{{ item.women_population_75_79_percentage }},
{{ item.women_population_80_84_percentage }},
{{ item.women_population_85_89_percentage }},
{{ item.women_population_90_over_percentage }},
]
}]
});
{% endfor %}
</script>
when comma set as deciminal seperator, there will be an error with the comma between values, such as "{{ item.women_population_0_4_percentage }},
{{ item.women_population_5_9_percentage }}, ..." so how can i fix this too?
You can change commas to dots by JS. For example:
var data = ['5,12', '10,4'];
data.forEach(function(el, i) {
data[i] = parseFloat(el.replace(/,/g, '.'))
});
Highcharts.chart('container', {
series: [{
data: data
}]
});
Live demo: http://jsfiddle.net/BlackLabel/62b1vwje/
for database
var data_men = [
'-{{ item.men_population_0_4_percentage }}',
'-{{ item.men_population_5_9_percentage }}',
.
.
.
];
var data_women = [
'{{ item.women_population_0_4_percentage }}',
'{{ item.women_population_5_9_percentage }}',
.
.
.
];
data_men.forEach(function(el, i) {
data_men[i] = parseFloat(el.replace(/,/g, '.'))
});
data_women.forEach(function(el, i) {
data_women[i] = parseFloat(el.replace(/,/g, '.'))
});
.
.
.
series: [{
//color: 'blue',
name: 'Male',
data: data_men
}, {
color: 'pink',
name: 'Female',
data: data_women
}]
.
.
.
Thank you
Related
I have a high chart and my data labels say Interest and balance when I click the segments of the pie chart it shows the value of 4 752.6 and I want it to show 4,752.60
{
lang: {
thousandsSep: ','
},
tooltip: {
pointFormat: '<span>{point.y:,.1f}</span>'
},
chart: {
type: 'pie'
},
title: {
text: ''
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: false,
dataLabels: {
enabled: true,
}
}
},
series: [
{
type: 'pie',
name: 'Line 1',
data: [
{ name: 'Balance', color: '#0000FF', y: balance, dataLabels: 'Balance' },
{ name: 'Interest', color: "#FF0000", y: interest }
]
}
]
}
You need to set the thousandsSep property in setOptions method:
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Live demo: http://jsfiddle.net/BlackLabel/vwpfe429/
API Reference: https://api.highcharts.com/highcharts/lang
I know this question has been asked before on StackOverflow. However, I have slightly different ask so please read it before you mark it as Duplicate.
I am trying to set y-axis to 0,1,2,4,8,16,32,64,128.... also, the spacing between those tickPoints should be equal. I have tried setting various interval but it didn't help below is my code.
$("#ClickSmu_man").click(function () {
var theModal = $("#ModalSmu_man").modal({
show: false
});
Highcharts.chart('container_man', {
chart: {
type: 'column'
},
title: {
text: 'In Progress weekly pending Avg. Age per DE Manager Count'
},
xAxis: {
categories: [
<?php foreach($smu_top_manager as $topma){ ?>
'<?php echo $topma['name']; ?>',
<?php } ?>
]
},
yAxis: {
min: 0,
tickInterval: 1,
title: {
text: 'Platform'
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [
{
name: 'Age',
data: [<?php echo implode(',', $age_manager); ?>],
},
{
name: 'asr9k_px',
data: [<?php echo implode(',', $asr9k_px_manager); ?>],
},
{
name: 'asr9k_x64',
data: [<?php echo implode(',', $asr9k_x64_manager); ?>],
},
{
name: 'crs_px',
data: [<?php echo implode(',', $crs_px_manager); ?>],
},
{
name: 'ncs5500',
data: [<?php echo implode(',', $ncs5500_manager); ?>],
},
{
name: 'ncs5500_sysadmin',
data: [<?php echo implode(',', $s5500_sysadmin_manager); ?>],
},
{
name: 'ncs5k',
data: [<?php echo implode(',', $ncs5k_manager); ?>],
},
{
name: 'ncs6k',
data: [<?php echo implode(',', $ncs6k_manager); ?>],
},
{
name: 'xr12000',
data: [<?php echo implode(',', $xr12000_manager); ?>],
},
{
name: 'xrv9k',
data: [<?php echo implode(',', $xrv9k_manager); ?>],
},
{
name: 'xrv9k_sysadmin',
data: [<?php echo implode(',', $xrv9k_sysadmin_manager); ?>],
}
]
});
});
Use yAxis.tickPositions to define ticks in your chart.
xAxis: {
tickPositions: [0,2,4,8,16,32,64],
},
example: http://jsfiddle.net/f94hdLqt/
If you want to set ticks dynamically, you can use tickPositioner.
{{ apos.area(data.page, 'body', { widgets: { 'apostrophe-images': { size: 'full' }, 'apostrophe-rich-text': { toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink','Table' ], styles: [ { name: 'Heading', element: 'h3' }, { name: 'Paragraph', element: 'p' }, { name: 'Listitems', element: 'li' } ] } } }) }}
To add lists to a rich text widget you want to add 'NumberedList' or 'BulletedList' to the toolbar array in your configuration.
Your code would look like
{{ apos.area(data.page, 'body', {
widgets: {
'apostrophe-images': { size: 'full' },
'apostrophe-rich-text': {
toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink', 'Table', 'NumberedList', 'BulletedList' ],
styles: [
{ name: 'Heading', element: 'h3' },
{ name: 'Paragraph', element: 'p' }
]
}
}
}) }}
I have a pie chart and I want to add map drilldown series. How?
http://jsfiddle.net/u03oddrg/1/
$('#things-in-brazil').highcharts({
chart: { type: 'pie'},
series: [{
name: 'Things in Brazil',
data: [
{ name: 'Thing 1', y: 1500 },
{ name: 'Thing 2', y: 2600 }
]
}]
});
var data_for_thing1 = [
{ "hc-key": "br-pa", value: 110 },
{ "hc-key": "br-sc", value: 210 },
{ "hc-key": "br-ap", value: 340 },
{ "hc-key": "br-ba", value: 480 },
{ "hc-key": "br-mt", value: 90 }
];
$('#thing1-by-state').highcharts('Map', {
mapNavigation: { enabled: false },
series : [{
data : data_for_thing1,
mapData: Highcharts.maps['countries/br/br-all'],
joinBy: 'hc-key',
name: 'Thing 1',
states: { hover: { color: '#BADA55' } },
dataLabels: { enabled: true, format: '{point.name}' }
}]
});
I have created a chart in jsfiddle which represents two values. id like the stacked bar chart to be adjusted so that it takes the whole width of the div. it should cover the background, like so.
http://jsfiddle.net/ftaran/jBHDM/4/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
background:'yellow'
},
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
labels: {
enabled: false
}
},
yAxis: {
title: null,
labels: {
enabled: false
},
labels: {
enabled: false
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ':</b> ' + this.y + '<br/>' + this.percentage.toFixed(2) + '%';
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Fail',
color: 'red',
data: [5]
}, {
name: 'Success',
color: 'green',
data: [2]
}]
});
});
Try using this yAxis parameter:
yAxis: {
...
endOnTick: false,
...
},
Just complementing #wergeld's answer. If you still haven't gotten the result expected after applying his suggestion:
yAxis: {
max: totalOfSeriesData
}
Per example:
series: [
{
name: 'John',
data: [5],
color: 'red',
},
{
name: 'Jane',
data: [2],
},
{
name: 'Joe',
data: [3],
},
],
yAxis: {
max: 10, // 5 + 2 + 3 = 10
endOnTick: false,
}