Highchart shows blank page using Codeigniter - highcharts

As a beginner in learning highchart, I cannot find out why the chart cannot display in the view. My controller displays the json data properly but when I call the controller in the $.getJSON to display the data in the chart I got a blank page.
Can someone help me to make the chart display in the View ?
Thanks
My controller
public function chartBarData()
{
$query1 = $this->model_admin->getBarCha1('2019-01-24','2019-01-25');
$category = array();
$category['name'] = 'Medico';
$series1 = array();
$series1['name'] = 'Paciente';
foreach ($query1 as $row)
{
$category['data'][] = $row->Medico;
$series1['data'][] = $row->Paciente;
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
print json_encode($result, JSON_NUMERIC_CHECK);
}
print json_encode($result, JSON_NUMERIC_CHECK) result :
[{"name":"Medico","data":["baptiste prophete","JUAN ALBERTO SUERO","ADRIANA MATEO","RAUL ARISTY COMAS","VICTORIA LILA FRANCO","IVANHOE LINARES VENTURA"]},{"name":"Paciente","data":[2,3,15,13,1,6]}]
The view
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Doctor patients view',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
$.getJSON("<?php echo site_url('chartBarData');?>", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
</script>

Related

Highstocks Date not displaying from CSV

I am building a chart using highstocks. The date value on the x-axis is not displaying the correct date and starts in 1970. Looking at other post I understand that it needs to be formatted in milliseconds (since 1, January 1970). So I have done this in the CSV file and verfied them on http://www.epochconverter.com/ but still high charts is not displaying the correct date/times. I also tried changing the x-axis type to 'datetime' but still not showing.
I understand one solution is to set a pointStart and pointInterval which does work but the issue I have with this solution is I pull the data daily and append it to the CSV. I worry if, for whatever reason, my scripts to pull the data does not run one day then completes the next it would display the incorrect date for the data.
Below is my HTML code, CSV file, and JS script format and the chart that is being displayed. I would appricate any help in how I can get the dates to display as mm/dd/yyyy.
CSV File:
Date,1457395200000,1457481600000,1457568000000,1457654400000,1457740800000,1457827200000,1457913600000,1458000000000,1458086400000
AUSTX,3862.94,4465.15,4247.64,3875.18,3263.06,3020.23,3309.66,3714.37,1573.27
CLBOH,2331,2662.17,2708.84,2375.02,1843.5,1812.71,2129.4,2273.38,918.63
GUID,2672.38,3164.67,2967.69,3141.39,2771.71,2469.85,2637.58,2792.44,1471.74
NYCNY,6627.41,7575.63,7383.43,6791.21,6339.03,6710.39,6302.29,6829.12,3251.16
ORNCA,11455.43,13908.57,13009.89,13008.68,11133,11028.88,11151.15,13015.48,7460.78
PKVCO,758.45,1242.89,769.35,770.14,745.31,650.31,696.03,726.53,414.16
RADNC,4374.73,5052.56,4889.06,4345.06,3884.03,3466.78,3632.1,3890.75,1142.66
SYRNY,2228.03,2419.88,2426.9,2202.09,1892.67,1948.18,2061.56,2334.07,934.85
$(document).ready(function() {
var options = {
chart: {
renderTo: 'content2',
defaultSeriesType: 'spline',
zoomType: 'x'
},
title: {
text: 'Usage(GiB) by Region',
align: 'center'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%m/%d/%Y',
week: '%m/%d/%Y',
month: '%m/%d/%Y',
year: '%m/%d/%Y',
},
categories: [],
labels: {
rotation: -45,
align: 'right'
}
},
yAxis: {
title: {
text: 'Usage(GiB)',
x: 5
},
labels: {
align: 'left',
x: 5
}
},
legend: {
enabled: true,
align: 'right',
// x: -400,
verticalAlign: 'middle',
y: -5,
floating: false,
backgroundColor: 'rgba(35, 35, 75, 1)', //(Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'dark-blue',
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
width: 140,
itemWidth: 140,
itemStyle: {
fontSize: '10px'
}
},
tooltip: {
// formatter: function() {
// return '<b>'+ this.x +'</b><br/>'+
// this.series.name +': '+ this.y +'<br/>'; //+
// 'Total: '+ this.point.stackTotal;
// }
},
plotOptions: {
series: {
// pointStart: Date.UTC(2016, 2, 3),
// pointInterval: 24 * 3600 * 1000, //one day`
marker: {
enabled: true,
radius: 4
},
states: {
hover: {
enabled: true,
lineWidth: 4
}
}//,
//events: {
// legendItemClick: function(event) {
// if (!this.visible)
// return false;
//
// var seriesIndex = this.index;
// var series = this.chart.series;
//
// for (var i = 0; i < series.length; i++)
// {
// if (series[i].index != seriesIndex)
// {
//
// series[i].visible ? series[i].hide() : series[i].show();
// }
// }
//
// return false;
// }
//}
},
column: {
// stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
exporting: {
//url: 'http://ubppapp01:8085/highcharts-export-web/',
buttons: {
exportButton: {
menuItems: [
{
text: 'Export to PNG',
onclick: function() {
this.exportChart();
}
}, {
text: 'Export Data',
onclick: function() {
location.href = file2
}
},
null,
null
]
}
}
},
navigation: {
buttonOptions: {
verticalAlign: 'bottom',
y: 0
}
},
navigator: {
enabled: false
},
rangeSelector:{
buttons:[{
type: 'day',
count: 14,
text: '14d'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'month',
count: 3,
text: '3m'
},
{
type: 'ytd',
text: 'YTD'
},
{
type: 'all',
text: 'All'
}],
selected: 0
},
scrollbar: {
enabled: false
},
series: []
};
$.get(file2, function(data) {
// Split the lines
var lines = data.split('\r');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line contains categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
var chart = new Highcharts.StockChart(options);
});
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dashboard Init</title>
<script type="text/javascript" src="resources/lib/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="resources/lib/highstock.js"></script>
<script type="text/javascript" src="resources/lib/modules/exporting.js"></script>
<script type="text/javascript" src="resources/lib/highcharts-scalable-yaxis-master/scalable-yaxis.js"></script>
<script type="text/javascript" src="resources/lib/themes/dark-blue.js"></script>
<!--[if IE]>
<script type="text/javascript" src="./js/excanvas.compiled.js"></script>
<![endif]-->
<script type="text/javascript">
var file2="resources/csv/wifi_usage_by_region_t2.csv"
</script>
<script SRC="resources/js/usage_by_region.js">
</script>
</head>
<body bgcolor="silver">
<br>
<p align="center"><big>Home</big>
<hr>
<div id="content2" style="width: 85%; height: 350px; margin: 0 auto"></div>
<br>
</body>
</html>
Click here to see the Chart that is currently generated

How to generate two heatmap on same scale?

Following code generate the heatmaps side by side.
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script>
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container1',
type: 'heatmap',
zoomType:'x',
plotWidth:400,
plotHeight:400
},
title: {
text: 'HeatMap1'
},
xAxis: {
categories: ['11230', '11231', '11232', '11233', '11234', '11235']
},
yAxis: {
categories: ['11230', '11231', '11232', '11233', '11234', '11235'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
plotOptions:{
series:{
turboThreshold: 0
}
},
series: [{}]
};
$.getJSON('sample1.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container2',
type: 'heatmap',
zoomType:'x',
plotWidth:400,
plotHeight:400
},
title: {
text: 'HeatMap2'
},
xAxis: {
categories: ['11230', '11231', '11232', '11233', '11234', '11235']
},
yAxis: {
categories: ['11230', '11231', '11232', '11233', '11234', '11235'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
plotOptions:{
series:{
turboThreshold: 0
}
},
series: [{}]
};
$.getJSON('sample2.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<table>
<tr>
<td><div id="container1" style="width: 300px; height: 300px; margin: 0 auto"></div></td>
<td><div id="container2" style="width: 300px; height: 300px; margin: 0 auto"></div></td>
</tr>
</table>
</body>
</html>
But how can i merge two heat map into one plot sharing same x-axis.
Try doing multiple y axis in same pane like this
yAxis: [
{
opposite : false,
title: {
text: 'HeatMap1'
},
top: 0
},{
opposite : false,
title: {
text: 'HeatMap2'
},
top: 30
}]

How to do realtime highcharts in Ruby on Rails?

I want to build realtime highcharts, and i have user table added sidekiq worker which fetches user_table every 5 minutes and i want it show my users data in real time in my rails application?
Below i have static data, how to retrieve data dynamically from database?
In View:
<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>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'User balance',
x: -20 //center
},
xAxis: {
categories: ['Users']
},
yAxis: {
title: {
text: 'Balance'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '$'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: User'',
data: [<%= #user.sum('equivalent_sum')%>]
}]
});
});
In Controller:
#user = User.where('balance > ?', 0)

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.

chart shows very small pie

I have a problem with highcharts pie, i want to show my data into a pie, but the pie is very small, it is only shows like a small dot.
i have looking for the answer any where, but i can not find it. Please some body explain to me why is that, i just new for this tools...
i tried to post the image, but it can't...
below are my code :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,archive,follow">
<title>CIT Dashboard</title>
<link rel="stylesheet" media="all" href="css/dashboard.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
var chart1;
var chart2;
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'pie1',
plotBackgroundColor: '#969696',
margin: 0,
padding: 0
},
legend: {
enabled: false
},
title: {
text: ''
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
}
},
plotOptions: {
pie: {
size:'80%',
allowPointSelect: true,
plotBorderWidth: 0,
plotShadow: false,
animation: false,
shadow: false,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor:'#000000',
distance: -40,
formatter: function() {
return '<b>'+ this.point.name +'</b><br />'+ this.percentage.toFixed(2) +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Transaction by LTS',
data: [<%=graph1 %>]
}]
});
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'pie2',
plotBackgroundColor: '#969696',
margin: 0,
padding: 0
},
legend: {
enabled: false
},
title: {
text: '',
margin: 0
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
}
},
plotOptions: {
pie: {
size:'80%',
allowPointSelect: true,
plotBorderWidth: 0,
plotShadow: false,
animation: false,
shadow: false,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
distance: -40,
formatter: function() {
return '<b>'+ this.point.name +'</b><br />'+ this.percentage.toFixed(2) +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Transaction by LTS',
data: [<%=graph2 %>]
}]
});
});
</script>
</head>
Thanks
First of all, define your width / height, secondly you can modify size of chart by parameter:
http://api.highcharts.com/highcharts#plotOptions.pie.size
Try setting minimum width and height of the div container where you are generating chart like this
<div id="pie1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Had the same issue when working with mutliple piecharts. Only 1 of the piecharts appeared smaller in size. The reason being max-width was set for the div element. Once I removed the max-width attribute, it worked fine.
<div id = "ab" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto">
to
<div id = "ab" style="min-width: 310px; height: 400px; margin: 0 auto">

Resources