Highchart shows only points - highcharts

I'm a newbie in html and javascript.
I'm Trying to make a spline chart with csv data file but the chart only shows the points.
Could anyone help me? Thanks in advance.
The parsing csv code follows below:
jQuery.get(dataFilePath, null, function(csv, state, xhr) {
var lines = [],
date,
// set up the two data series
lightLevels = [];
// inconsistency
if (typeof csv !== 'string') {
csv = xhr.responseText;
}
// split the data return into lines and parse them
csv = csv.split(/\n/g);
jQuery.each(csv, function(i, line) {
// all data lines start with a double quote
line = line.split(',');
date = parseInt(line[0], 10)*1000;
lightLevels.push([
date,
parseFloat(line[1], 10)
]);
});
options.series[0].data = lightLevels;
chart = new Highcharts.Chart(options);
});
});
});
The graph code is:
chart: {
type: 'spline',
backgroundColor: '#464344',
renderTo: 'container',
zoomType: 'x',
spacingRight: 20,
},
navigator: {
enabled: true,
height: 15
},
scrollbar: {
enabled: true,
height: 5
},
rangeSelector: {
enabled: true,
buttons: [{
type: 'minute',
count: 30,
text: '30m'
}, {
type: 'minute',
count: 60,
text: '1h'
}, {
type: 'minute',
count: 180,
text: '3h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 2,
text: '2d'
}, {
type: 'all',
text: 'All'
}],
inputDateFormat: '%b %e/%H:%M',
inputEditDateFormat: '%b-%e/%H:%M',
inputDateParser: function(value) {
value = value.split(/[:\.]/);
return Date.UTC(
1970,
0,
1,
parseInt(value[0]),
parseInt(value[1]),
parseInt(value[2]),
parseInt(value[3])
);
},
},
title: {
text: 'Pistas Foam - Cloro Livre (mg/l)'
},
subtitle: {
text: 'Clique e arraste na area do grafico para zoom'
},
xAxis: {
type: 'datetime',
maxZoom: 1 * 1800000
},
yAxis: {
title: {
text: 'Cloro Livre mg/l (0 - 5)'
},
min: 0,
startOnTick: false,
showFirstLabel: false
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x) +': '+ this.y;
}
},
plotOptions: {
series: {
cursor: 'pointer',
lineWidth: 1.0,
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x) +':<br/> '+
this.y,
width: 200
});
}
}
},
}
},
series: [{
name: 'Cloro Livre',
marker: {
radius: 2
}
}]
};

Related

Xaxis should get aligned at (0,0) in highcharts

I want to align xaxis line and axis labels at position (0,0) when data contains negative values.
ex. consider this fiddle example where negative values bar goes down and xaxis is set at (0,0)
http://jsfiddle.net/13d54mp8/2/
var YTD = 'YTD';
var yr1 = 'Year 1';
var yr3 = '*3 Year';
var yr5 = '*5 Year';
var sinceIN = '* Since Inception (5/31/2012)';
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: function() {
var xx = (-1) * (this.yAxis[0].translate(0, false, false));
this.xAxis[0].axisGroup.translate(0, xx);
this.xAxis[0].labelGroup.translate(0, xx);
}
}
},
title: {
text: 'Report Title',
style: {
fontSize: '18px',
color: '#1D5293',
fontWeight: 'bold'
},
},
subtitle: {
text: '(As of 6/30/2012)',
style: {
fontSize: '18px',
color: '#1D5293'
},
y: 40
},
xAxis: {
categories: [YTD, yr1, yr3, yr5, sinceIN],
lineColor: '#C1BADB',
tickWidth: 2,
},
yAxis: {
title: {
text: ''
},
lineColor: '#C1BADB',
lineWidth: 1,
labels: {
formatter: function() {
return this.value + '%';
}
},
gridLineWidth: 0,
tickWidth: 2
},
tooltip: {
enabled: true,
formatter: function() {
return this.series.name + ': ' + this.y + '%';
},
},
credits: {
enabled: false
},
series: [{
name: 'XXX Company Ltd. (Net)',
data: [3.02, -0.61, 2.03, 1.51, 5.35],
dataLabels: {
enabled: true,
color: '#333',
formatter: function() {
return this.y + '%'
}
},
color: '#1D5293'
},
{
name: 'XXX Relative Return Index (Gross)**',
data: [2.45, 0.85, 4.11, 0.73, 3.56],
dataLabels: {
enabled: true,
color: '#333',
formatter: function() {
return this.y + '%'
}
},
color: '#9E9E9E'
}
],
legend: {
layout: 'vertical',
align: 'top',
verticalAlign: 'top',
x: 50,
y: 65,
borderWidth: 0,
margin: 30
},
});
});
});
Now I want to make work the same use case for inverted column chart where xaxis is on top and yaxis is at right side. check fiddle - http://jsfiddle.net/fa2e80qu/3/
var YTD = 'YTD'
var yr1 = 'Year 1'
var yr3 = '*3 Year'
var yr5 = '*5 Year'
var yr7 = '*7 Year'
var yr9 = '*9 Year'
var sinceIN = '* Since '
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: function() {
var xx = (0.34)* (this.yAxis[0].translate(0, false, false));
this.xAxis[0].axisGroup.translate(0, xx);
this.xAxis[0].labelGroup.translate(0, xx);
}
}
},
title: {
text: 'Report Title',
style: {
fontSize: '18px',
color: '#1D5293',
fontWeight: 'bold'
},
},
subtitle: {
text: '(As of 6/30/2012)',
style: {
fontSize: '18px',
color: '#1D5293'
},
y: 40
},
xAxis: {
categories: [YTD, yr1, yr3, yr5, yr7,yr9, sinceIN],
lineColor: '#C1BADB',
tickWidth: 2,
opposite:true
},
yAxis: {
opposite:true,
reversed:true,
title: {
text: ''
},
lineColor: '#C1BADB',
lineWidth: 1,
labels: {
formatter: function() {
return this.value + '%';
}
},
gridLineWidth: 0,
tickWidth: 2
},
tooltip: {
enabled: true,
formatter: function() {
return this.series.name + ': ' + this.y + '%';
},
},
credits: {
enabled: false
},
series: [
{
name: 'XXX Company Ltd. (Net)',
data: [3.02, -0.61, 2.03, 1.51, 5.35, -0.50,2.5],
dataLabels: {
enabled: true,
color: '#333',
formatter: function() {
return this.y + '%'
}
},
color: '#1D5293'},
{
name: 'XXX Relative Return Index (Gross)**',
data: [2.45, 0.85, 4.11, 0.73, 3.56,-0.5,1.6],
dataLabels: {
enabled: true,
color: '#333',
formatter: function() {
return this.y + '%'
}
},
color: '#9E9E9E'}
],
legend: {
enabled:false,
layout: 'vertical',
align: 'top',
verticalAlign: 'top',
x: 50,
y: 65,
borderWidth: 0,
margin: 30
},
});
});
});
Expected behavior is to have xaxis line and labels aligns properly at position (0,0)
You can use the toPixels method:
chart: {
...,
events: {
load: function() {
var xx = this.yAxis[0].toPixels(0) - this.plotTop;
this.xAxis[0].axisGroup.translate(0, xx);
this.xAxis[0].labelGroup.translate(0, xx);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/07rej16z/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels

How to set a different value on opposite y-axis in bar-negative high charts

I wanted to have different values on the left(negative) side as 1k ,2k,3k etc and different values on the right(positive) side of y-axis like 100,200,300 etc...
I tried different approaches by having conditions in labels formatter function
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'48-51', '51-54', '57-60', '60-63',
'63-66'
],
oppositecategories = [];
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Headcount and Hires Age Distribution'
},
subtitle: {
text: 'Lorem Ipsum'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: oppositecategories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: [{
title: {
text: null
},
labels: {
formatter: function() {
return Math.abs(this.value) + 'K';
},
y: 10
}
},
{
title: {
text: null
},
opposite: false,
reversed: false,
labels: {
step: 100,
y: 100
}
}
],
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 * 1000), 0);
}
},
series: [{
name: 'Current HC',
data: [-2.132, -1.387, -1.121, -1.479, -1.239]
}, {
name: 'Hires(4Q)',
data: [
1.17, 1.72, 1.36, 1.03, 1.21
]
}]
});
I expect different values on negative side and different values on positive side
You can create two separate yAxis for the series:
yAxis: [{
max: 0,
offset: 0,
width: '50%'
}, {
min: 0,
offset: 0,
left: '50%',
width: '50%'
}]
Live demo: http://jsfiddle.net/BlackLabel/Lgqyc4k8/
Using yAxis.labels.formatter you can have this result :
yAxis: [{
title: {
text: null
},
tickInterval:0.1,
labels: {
formatter: function() {
if(this.value < 0 && this.value % 0.5 === 0){ // Negative value only on .5 k
return Math.abs(this.value) + 'K';
} else if(this.value > 0){ // Positive values
return this.value * 1000;
} else if (this.value === 0) {
return 0;
}
},
y: 10
}
},
Fiddle

how do I get two highcharts on one page?

I have two charts that I am trying to load on separate div's on the same page, they are similar but one is a drill down and the other isn't. I have tried wrapping the entire function with var chart = $('#review').highcharts({ but it doesn't work.
The two charts are below:
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['Metric 1', 'Metric 2', 'Metric 3','metric 4'],
name = 'Votes',
data = [{
y: 1,
color: colors[0],
}, {
y: 2,
color: colors[1],
}, {
y: 3,
color: colors[2],
},{
y: 5,
color: colors[3],
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
var chart = $('#review').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Review breakdown'
},
xAxis: {
categories: categories
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +'<br><b>'+ this.y +' stars</b><br/>';
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
}, yAxis: {min: 0, max: 5,
title: {text: 'Star Rating'}
}
})
.highcharts(); // return chart
});
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['positive', 'negative', 'sum'],
name = 'Votes',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'Positive votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [10.85, 7.35, 33.06],
color: colors[0]
}
}, {
y: -7.15,
color: colors[3],
drilldown: {
name: 'Negative votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [-4.55, -1.42, -0.23],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Total votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
var chart = $('#votes').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Vote breakdown'
},
subtitle: {
text: 'Click the columns to view breakdown.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total votes'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +' votes</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' breakdown';
} else {
s += 'Click to return';
}
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
})
.highcharts(); // return chart
});
If you're trying to get two charts on one page then it is VERY simple.
<div id="chart-A" class="chart"></div>
<div class="spacer"></div>
<div id="chart-B" class="chart"></div>
CSS - Just to make the example a little easier on the eyes
.chart {
height: 200px;
}
.spacer {
height: 20px;
}
JavaScript
$(function() {
// If you need to specify any global settings such as colors or other settings you can do that here
// Build Chart A
$('#chart-A').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart A'
},
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
},
yAxis: {
min: 0,
title: {
text: 'Apple Consumption'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true
},
series: [{
name: 'Apples',
data: [5, 3, 8, 2, 4]
}]
});
// Build Chart B
$('#chart-B').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart B'
},
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
},
yAxis: {
min: 0,
title: {
text: 'Miles during Run'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true
},
series: [{
name: 'Miles',
data: [2.4, 3.8, 6.1, 5.3, 4.1]
}]
});
});
Here's a JSFiddle: http://jsfiddle.net/engemasa/7cvCX/
I am not really sure what some of your code is trying to do - seems a little needlessly complicated, FWIW
AS to how to make multiple charts on the same page - you do it just like you would make one chart on a page, just do it more than once :)
and make sure you have different container element ids - otherwise you are just overwriting one chart with the next.
One example of multiple charts on a page:
http://jsfiddle.net/kwtZr/1/
there's no relevant code to put here, just click the link

Retrieve series name and data with getjson

I'm trying to retrieve from a JSON formatted file this series name and data
[
{ "name":"gfs00", "data": [ [1359676800000, 30], [1359687600000, 32]]
},
{ "name":"gfs06", "data": [ [1359676800000, 28], [1359687600000, 29]]
}
]
Here's the highchart code:
var data_temp;
$.getJSON('dati/performance_gfs/precipitazioni/pioggia_live_data.php',
{ run: runs_gfs} ,function(data_temp){
for (var i = 0; i <data_temp.length ;i++){
chart.addSeries({
data:data_temp,
});
}
});
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container_temperatura_windchill_heatindex',
defaultSeriesType: 'line',
zoomType: 'x',
},
title: {
text: 'Ensemble'
},
xAxis: {
type: 'datetime'
},
yAxis: [{ // Primary yAxis
id:0,
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}],
plotOptions: {
line: {
lineWidth: 1,
states: {
hover: {
lineWidth: 2
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
},
pointInterval: 24 * 3600000, // one hour
pointStart: Date.UTC(2012, 9, 6, 0, 0, 0)
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d-%m-%Y %H:%M', this.x)+'<br/>'+
this.y;
}
},
series: []
});
});
}
As can be seen I don't know how to assign the series names and data from the JSON file which is correct what I need is something like http://jsfiddle.net/vXdxv/1/
Try the following:
for (var i = 0; i <data_temp.length ;i++){
chart.addSeries(data_temp[i], false);
});
chart.redraw();

Updating basic column high chart

I am having a problem updating my basic column high chart.
My json array that is returned from the server is:
[{"name":"positive","data":[18,35,32,38]},{"name":"negative","data":[0,14,65,121]}]
I am only using the "data" arrays ^ i.e. jsonArr[0].data and jsonArr[1].data
I have the data set up correctly, however the chart is not depicting these values. Any ideas?
Here is my javascript:
$(document).ready(function() {
var twitterChart;
posArr = [];
negArr = [];
function renderGraph()
{
$.getJSON("FrontController", function(jsonArr, statusTxt, xhr){
console.log("Data returned : " + data);*/
posArr = jsonArr[0].data;
negArr = jsonArr[1].data;
console.log("posArr: " + posArr);
console.log("negArr: " + negArr);
twitterChart.series[0].data = posArr;
twitterChart.series[1].data = negArr;
});
setTimeout(renderGraph, 3000)
}
twitterChart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ':'
},
xAxis: {
categories: [
'Column 1',
'Column 2',
'Column 3',
'Column 4'
]
},
yAxis: {
min: 0,
title: {
text: 'Testing"'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' tweets';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Positive',
data: posArr
}, {
name: 'Negative',
data: negArr
}]
});
renderGraph();
});
</script>
To update series data use twitterChart.series[0].setData(array); see: http://api.highcharts.com/highcharts#Series.setData()

Resources