Develop Reference

Highcharts export button not showing (included the libraries etc)

I have tried several times using other examples available but still no luck
here's the code https://jsfiddle.net/mrbfqay6/
P.S: you just need to add a random amount in first input field and then click submit to generate graph. Thanks
function renderChart(){
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
marginRight: 20,
events: {
load: function() {
// nothing to do here right now
}
}
},
title: {
text: 'Some random data'
},
xAxis: {
tickPixelInterval: 50
},
yAxis: {
title: {
text: 'Value'
}
},
exporting: {"enabled":true},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
}, plotOptions: {
column: {
stacking: 'normal',
}
},
series: [{
name: ' Amortization',
data:amort_data,
}
,{
name: 'Saving',
data: wow_saving,
stack:'wow'
},
{
name: 'Financing',
data: lease_data,
stack: 'wow'
}
]
});
}

You have defined options for exporting twice:
chart = Highcharts.chart({
exporting: {
"enabled": true
},
...,
exporting: {
enabled: false
},
...
});
Which results in disabled exporting. You just need to enable it.
Live demo: https://jsfiddle.net/BlackLabel/na5rc2s9/
API Reference: https://api.highcharts.com/highcharts/exporting.enabled

Is there anyway to group my data per year that will summarize it and make it 1?

in my code im trying to display all the enrolled students per year and i want to summarize them all in 1 column per year.
is there anyway to add filter or most likely in the code itselft to combine all the data per year?
var strCampus = "ORT";
$(function() {
$.getJSON("http://localhost:37590/Get_OGSData/" + strCampus, function(data) {
console.log(data);
Highcharts.chart('container', {
chart: {
type: 'column'
},
rangeSelector: {
selected: 1
},
title: {
text: 'On Going Students per Year'
},
subtitle: {
text: 'Click each column to see details'
},
xAxis: {
type: 'category',
categories: data.map(function(x) {
return x.YEAR;
})
},
yAxis: {
title: {
text: 'On Going Students'
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
//format: '{point.y:.1f}'
}
}
},
tooltip: {
enabled: false,
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:2f}</b> of total<br/>'
},
series: [{
colorByPoint: true,
data: data.map(function(x) {
return x.OGS * 1;
})
}]
});
});
});
i want to combine all the data per year in 1 column

You can use dataGrouping with options below:
dataGrouping: {
approximation: 'sum',
forced: true,
units: [
['year', [1]]
]
}
Live demo: http://jsfiddle.net/BlackLabel/me3Lzur6/
API reference: https://api.highcharts.com/highstock/series.column.dataGrouping

Can't show array values in console log outisde of loop?

I push array outside loop with (cpu_usage, timestamp and clientID).Now i want to read on console log values of clientID console.log(result[0][2]); .But it shows me a error "Cannot read property '2' of undefined". Is someone knows where is a problem ? Also if i call this array inside loop it works
content of array:
error after i used console.log(result[0][2]);
<div id="cont"></div>
<script type="text/javascript">
$.getJSON( "http://localhost:8000/api/devices", function( res) {
var result= [];
var devNames = new Array();
console.log(result[0][2]);
$.each( res, function(i) {
var deviceNames=data[i].clientAllias;
var clientId=data[i].clientId;
devNames .push(deviceNames);
$.each( res[i].clientData, function(a) {
$.each( res[i].clientData[a], function(key, val) {
clientId2=res[i].clientData[a].clientId
var cpu=res[i].clientData[a].cpuUsage;
var time_usages=res[i].clientData[a].timestamp;
final=[];
final.push(time_usages, cpu, clientId2);
result.push(final);
});
});
});
result.sort();
$(document).ready(function(){
var Object = {
marker: {
states: {
enabled: true,
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: 'Sec'
}, {
count: 1,
type: 'hour',
text: 'Min'
},
{
count: 1,
type: 'day',
text: 'Hours'
},
{
type: 'all',
text: 'All'
}],
title:'hours',
inputEnabled: true,
_selected: 1
},
title: {
text: clientNames,
},
xAxis: {
title: {
enabled: true,
text: 'CPU USAGE'
},
type: 'datetime',
dateTimeLabelFormats: {
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
},
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
series: [{
name:"CPU USAGE",
data: result,
}],
chart: {
renderTo: 'cont'
}
};
var chart = new Highcharts.StockChart(dataObject);
//var chart = $('#container').highcharts('StockChart', dataObject);
});
});
</script>

You’re console logging at the wrong spot. There’s nothing in result when you’re logging so it errors out when you try to access a nested element.
Put the console log at the end (after result.sort()) and you should get what you need

How set max / min value type Datetime in Highchart?

I currently have this code snippet:
function createChartByDay(id, title, subtitle, lineTitle, xTitle, xyData){
Highcharts.chart((id ? id : 'grafic-container'), {
chart: {
type: 'spline'
},
title: {
text: (title ? title : '')
},
subtitle: {
text: (subtitle ? subtitle : '')
},
xAxis: {
title: {
text: 'Horas'
},
type: 'datetime',
dateTimeLabelFormats:{
day:"%H",
month:"%m",
year:"%d/%m/%Y"
}
tickInterval: 3600 * 1000, // Establece el intervalo es decir una hora.
labels: {step: 1} // Establece los labels cada cuanto saltos se mostraran.
},
yAxis: {
title: {
text: 'Visitas'
}
},
series: [{
name: 'Nro Visitas',
data: xyData,
}],
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%d/%m/%Y - %H:%M}: {point.y} visitas'
},
});
}
And the result is the following:
The problem is that there is a superposition of labels at the bottom, how could you solve it? Try setting min and max but the Datetime format is confusing.
Thanks since now.

Highcharts ajax load

I have a problem using Highcharts.
I want to get an array from my php API and treat the results as my datapoints.
Here is the code :
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#graph_temperature').highcharts({
chart: {
zoomType: 'x',
type: 'area'
},
credits: {
enabled: false
},
title: {
text: 'Temperature'
},
legend: {
enabled: false
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'Temperature',
color: '#ff851b',
marker: {
enabled: false
},
data: (function () {
var data_graph;
$.ajax({
url: "https://urlhidden.com/ajaxsql.php?f=get_all_temperature",
type: "GET",
async: false,
success: function (data) {
data_graph = [].concat(data);
$("#debug").html(data_graph);
}
});
return data_graph;
})()
}]
})
})
});
My array is like :
[[1394908920000,20.87], [1394908980000,20.87], [1394909040000,20.87], [1394909100000,20.87], [1394909160000,20.87], [1394909220000,20.87],...]
My problem is that Highchart doesnt draw my chart. Axis, title are OK but my area is missing.
In order to debug i used this line :
$("#debug").html(data_graph);
And the array is well formed as i can see in my "debug" div.
When i put manually the entire array :
data:[[1394908920000,20.87], [1394908980000,20.87], [1394909040000,20.87], [1394909100000,20.87], [1394909160000,20.87], [1394909220000,20.87],...],
it works well.
Anybody have an idea to help me ?

I haven't test my code but it should work.I hope you'll understand my idea.
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
params = {
chart: {
zoomType: 'x',
type: 'area'
},
credits: {
enabled: false
},
title: {
text: 'Temperature'
},
legend: {
enabled: false
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'Temperature',
color: '#ff851b',
marker: {
enabled: false
}
}]
};
$.ajax({
url: "https://urlhidden.com/ajaxsql.php?f=get_all_temperature",
type: "GET",
async: false,
context:document.body,
success: function (data) {
//data should be converted to json object using [..]
//remove data variable in this format you should get the data
data = [[1394908920000,20.87], [1394908980000,20.87], [1394909040000,20.87]];
params.series[0].data = data;
$('#graph_temperature').highcharts(params);
}
});
})
});
Updated