Highchart Pie chat not display Codeigniter - highcharts

I'am trying to use Pie chart of highchart with Codeigniter for the first time. I can't display the graph with my codes below. I can't pass the json to the graph data to display the pie chart.
Any help is greatly appreciated.
Thanks
The query result in json format shows like this :
[{"sexo":"Feminino","total":"4"},{"sexo":"Masculino","total":"2"}]
Controller
public function charCont()
{
$query = $this->model_admin->getPieChat();
$data['query']=json_encode($query);
$this->load->view('chart',$data);
}
View
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Test'
},
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:<?=$query?>
}]
});

You need preprocess your data to the format required by Highcharts:
var data = [{
"sexo": "Feminino",
"total": "4"
}, {
"sexo": "Masculino",
"total": "2"
}];
data = data.map(function(obj) {
return {
name: obj.sexo,
y: Number(obj.total)
}
});
Highcharts.chart('container', {
...,
series: [{
...
data: data
}]
});
Live demo: http://jsfiddle.net/BlackLabel/yfLovx8b/
API Reference: https://api.highcharts.com/highcharts/series.pie.data

Related

Why do I get 'Cannot read property 'isValid' of undefined' when using 400 data points?

I am trying to visualise more than 400 data points using highcharts timeline, but I'm getting Cannot read property 'isValid' of undefined
Fiddle: https://jsfiddle.net/0fv2kxqb/
const test = [];
for (let i = 0; i < 400; i++) {
test.push({
x: Date.UTC(1900 + i, 9, 4),
name: 'test'
});
}
Highcharts.chart('container', {
chart: {
zoomType: 'x',
type: 'timeline'
},
xAxis: {
type: 'datetime',
visible: false
},
yAxis: {
gridLineWidth: 1,
title: null,
labels: {
enabled: false
}
},
legend: {
enabled: false
},
title: {
text: 'Timeline of Space Exploration'
},
subtitle: {
text: 'Info source: www.wikipedia.org'
},
tooltip: {
style: {
width: 300
}
},
series: [{
dataLabels: {
allowOverlap: false,
format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
'{point.x:%d %b %Y}</span><br/>{point.label}'
},
marker: {
symbol: 'circle'
},
data: test
}]
});
#container {
min-width: 400px;
max-width: 600px;
margin: 0 auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>
<div id="container"></div>
It works fine with ~300 data points
Does it not work with large amounts of data points?
That problem is a bug and it is reported here: https://github.com/highcharts/highcharts/issues/11116
Possible workarounds:
set cropThreshold bigger than data length: https://jsfiddle.net/BlackLabel/rtkj5xd7/
enable getExtremesFromAll: https://jsfiddle.net/BlackLabel/rtkj5xd7/2/

Highcharts - javascript - incorrect stacked column formatting

With highcharts, I am seeing an overlapping strange behaviour with stacked columns and "percent". You can see it here http://jsfiddle.net/nqjpkc05/, the code is below.
How could I fix it without changing the data structure?
the html
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
And the js
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
type: 'category',
},
yAxis: {
// min: 0,
//minRange:1,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
grouping: true,
stacking: 'percent',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [{info:'P1',name:0,x:0,y:27},{info:'P2',name:0,x:0,y:8},{info:'P3',name:0,x:0,y:3}]
}, {
name: 'Jane',
data: [{info:'P1',name:1,x:1,y:35},{info:'P2',name:1,x:1,y:6},{info:'P3',name:1,x:1,y:0}]
}, {
name: 'Joe',
data: [{info:'P1',name:2,x:2,y:12},{info:'P2',name:2,x:2,y:5},{info:'P3',name:2,x:2,y:18}]
}]
});
You can move the stack labels on top of the column on load/redraw event - the position can be obtain from point.shapeArgs property.
function positionStackLabels() {
const stacks = this.yAxis[0].stacks.column;
Object.keys(stacks).forEach(s => {
const series = this.series[s];
const topPoint = series.data[0];
stacks[s].label.attr({
y: topPoint.shapeArgs.y - 5
});
});
}
Set events:
chart: {
type: 'column',
events: {
load: positionStackLabels,
redraw: positionStackLabels
}
},
Live example and output
http://jsfiddle.net/mkfn5w15/

Rails and High Charts - can't render the maps at all

I am having problems even getting off the ground with Highcharts maps.
I followed the rails installation.
Gemfile
gem "highcharts-rails", "~> 3.0.0"
application.js
//= require highcharts
//= require highcharts/highcharts-more
//= require highcharts/modules/data
//= require highcharts/modules/map
In my page
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
<script>
$(function () {
// Prepare demo data
var data = [{
'hc-key': 'us',
value: 3
}, {
'hc-key': 'ca',
value: 5
}, {
'hc-key': 'mx',
value: 20
}];
// Initiate the chart
$('#container').highcharts('Map', {
title: {
text: 'Showing only non-null areas'
},
subtitle: {
text: 'The <em>allAreas</em> option is false'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
mapData: Highcharts.maps['custom/north-america-no-central'],
joinBy: 'hc-key',
allAreas: false,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
});
</script>
As you can see from the screenshot, there is no map rendered.
I have seen a similar question here:
Highmaps with US States in Rails
but I have tried these permutations and combinations of placing the links to the js files in my application header without success. The simple "your first chart" installation in the docs works fine
http://www.highcharts.com/docs/getting-started/your-first-chart
.....as soon as I try maps, no joy.
EDIT
So,
if i remove the files from application.js and add
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
to my application header....the following works..
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
<script>
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
// Add lower case codes to the data set for inclusion in the tooltip.pointFormat
$.each(data, function () {
this.flag = this.code.replace('UK', 'GB').toLowerCase();
});
// Initiate the chart
$('#container').highcharts('Map', {
title: {
text: 'Fixed tooltip with HTML'
},
legend: {
title: {
text: 'Population density per km²',
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
tooltip: {
backgroundColor: 'none',
borderWidth: 0,
shadow: false,
useHTML: true,
padding: 0,
pointFormat: '<span class="f32"><span class="flag {point.flag}"></span></span>'
+ ' {point.name}: <b>{point.value}</b>/km²',
positioner: function () {
return { x: 0, y: 250 };
}
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
}
}]
});
});
});
</script>
Surely there has to be a nice "rails" way to get this working without explicitly calling the files in the header?

Customizing the series data in pie charts with a dynamic json series (HighCharts)

I am fairly new to Highcharts. I have a pie chart that is being rendered fine with dynamic data (JSON String) . But I want to customize certain slices to be Sliced: true and Selected: True. I am not sure how to do it. Please find my code as below,
<div id="container_${page_id}" style="min-width: 310px; height: 400px; margin: 0 auto;"></div>
var series = [];
var total = 0;
$.each(data, function(index, value) {
series.push([value.statisticData+'_'+value.sizes,parseInt(value.sizes)]);
console.log("statisticData",value.statisticData);
console.log("value.sizes",value.sizes);
total += parseInt(value.count);
});
var chartSessionStatus = new Highcharts.Chart({
chart: {
renderTo: $("#container_"+testSessionPageId).get(0),
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
exporting: {
enabled: true,
buttons: {
contextButton: {
menuItems: [{
text: 'Statistics',
}]
}}
},
tooltip: {
formatter: function() {
return this.point.name.split('_')[0] + ': <b>'+this.y+'</b>';
}
},
title: {
text: '<h4 style="font-style: bold">Tenant Statistics</h4>'
},
legend: {
labelFormatter: function() {
return this.name.split('_')[0] + ' (' + this.y+')';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: 0,
useHTML: true,
formatter: function() {
if( this.y > 0)
return '<b>'+this.point.name.split('_')[0] +'('+ this.y +')</b>';
}
},
showInLegend: true,
size: 150
}
},
series: [{
type: 'pie',
name: 'Tenant Statistics',
data: series
}]
});
});
Main point of concern, in the series , I have the option for data as "data : series" but I would like to customize certain slices in this series. But since the data is dynamic I am not sure how to use only certain parts of the json string
The Json that i receive is in the following format :
[{"statisticData":"Tests Created","sizes":"3"},{"statisticData":"Students","sizes":"2"},{"statisticData":"Users","sizes":"7"},{"statisticData":"Schools","sizes":"10"}]
Any Help is greatly appreciated !!! Thanks in advance.
After getting json, you can parse it / add slice parameter and then use in highcharts. So instead of pushing :series.push([value.statisticData+'_'+value.sizes,parseInt(value.sizes)]);
you can push something like:
series.push({
name: value.statisticData+'_'+value.sizes,
y: parseInt(value.sizes),
sliced: true,
selected: true
});

High chart problwm with multiple axes with dynamic data

I am trying to generate multi axes graph uding highchart as below.
But its not working, array generation and all are quite fine.
If i hardcode totalNoOfLabels and totalLabelsSize then its working. Please suggest:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
$(function () {
var result=[{"date":"2013-05-01","propertiesList": {"labelsCount":"14","totalSize":"62.62"}},{"date":"2013-05-04","propertiesList":{"labelsCount":"4","totalSize":"22.43"}},{"date":"2013-05-03","propertiesList":{"labelsCount":"7","totalSize":"34.09"}},{"date":"2013-05-02","propertiesList":{"labelsCount":"13","totalSize":"67.51"}},{"date":"2013-05-05","propertiesList":{"labelsCount":"3","totalSize":"11.65"}}];
var totalNoOfLabels=[];
var totalLabelsSize=[];
var dates=[];
dailyStatList = JSON.stringify(result);
var statsObj = $.parseJSON(dailyStatList);
$.each(statsObj, function() {
dates.push(this.date);
totalNoOfLabels.push(this.propertiesList.labelsCount);
totalLabelsSize.push(this.propertiesList.totalSize);
});
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Info'
},
xAxis: [{
categories: dates
}],
yAxis: [{ // Primary yAxis
labels: {
style: {
color: '#89A54E'
}
},
title: {
text: 'No of labels',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Size ',
style: {
color: '#4572A7'
}
},
labels: {
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Labels',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: totalNoOfLabels
}, {
name: 'Size',
color: '#89A54E',
type: 'spline',
data: totalLabelsSize
}]
});
});
labelsCount and totalSize should be numbers, not strings. Parse that values, or put in JSON as numbers and will work properly.

Resources