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)
Related
i need to add some custom contextmenu on some column charts but here i get some strange results using the highcharts extension custom-events (https://www.highcharts.com/products/plugin-registry/single/15/Custom-Events). i have the following example: https://jsfiddle.net/4zhvdapb/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
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: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
},
events: {
contextmenu: function (e) {
console.log("create context menu for curent series: ")
console.log(e)
console.log(e.point.category)
$('#constext-menu-div').text(e.point.category);
$('#constext-menu-div').css({top: e.pageY, left: e.pageX});
$('#constext-menu-div').show();
}
}
}
},
series: [{
name: 'John',
data: [5.32, 3.22, 4.05, 7.15, 2.22]
}, {
name: 'Jane',
data: [2.55, 2.50, 3.53, 2.05, 1.15]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 src="https://blacklabel.github.io/custom_events/js/customEvents.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div style="border: solid 1px; background-color: lightgray; position: absolute; width: 100px; height: 200px; display: none; z-index: 9999;" id="constext-menu-div"></div>
(for some reason the in built code in stack overflow does not work - please use the jsfiddle link)
if you right click for example on the john serie on the buttom right side of the category grapes you will get the point/category of bananas instead of grapes. Same thing for apples where you get oranges.
does anyone have an idea what the problem is?
seems to be a bug: https://github.com/blacklabel/custom_events/issues/119
I am using highcharts to create a graph. I am able to display the output but I am unable to remove the label . I am not able to figure out how to get rid of the label.
//document.getElementById('container').style.visibility='visible';
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Stock Price',
},
subtitle: {
text: '<a style=\"color:blue;\" href=\"https://www.alphavantage.co\">Source: Alpha Vantage</a>'
},
xAxis: {
type: 'datetime',
showLastLabel: true,
endOnTick: true,
categories: [ "05/30", "05/31", "06/01", "06/02", "06/05", "06/06", "06/07", "06/08"],
labels:{
step:2},
},
yAxis: [{
title: {
text: 'Stock Price'
},
labels: {
enabled: false
},
},{
title: {
text: 'Volume ',
},
labels: {
format: '{value}m',
enabled: false,
},
opposite:true,
}],
plotOptions: {
labels: {
enabled: false,
},
line: {
enableMouseTracking: false
},
series: {
marker: {
enabled: false
},}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [{
labels: {
enabled: false,
},
name: 'Tokyo',
type: 'area',
color: '#F66464',
data: [4,5,6,7,8,9,1],
}, {
name: 'London',
type: 'column',
color: '#FFFFFF',
yAxis: 1,
data: [1,2,3],
}]
});
<!DOCTYPE html>
<html>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.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>
</body>
</html>
I tried disabling the label but it doesn't seem to work.
I want to get rid of the labels ("Tokyo" written in white) in the following output.
You were so close. The label can be removed by including this:
label: {
enabled: false,
},
in your series, or in the plotOptions if you want to remove all labels.
You typed labels with an s, which is unfortunately not correct.
API on series label: https://api.highcharts.com/highcharts/plotOptions.series.label
https://api.highcharts.com/highcharts/series.line.label
Go through this docs.
You need to make series.lable.enabled = false;
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/
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
}]
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.