We Keep Coding

Gantt Chart in HighChart?

I am using a high chart (Gantt Chart)in my application below are the code
#extends('layouts.admin')
#section('content')
<script src="https://github.highcharts.com/gantt/highcharts-gantt.src.js"></script>
<div class="card-body">
<div class="tab-content" id="project-tabContent">
<div id="container"></div>
</div>
</div>
<script type="text/javascript">
var activities = {!! json_encode($activities->toArray()) !!};
Highcharts.ganttChart('container', {
title: {
text: activities[0].project_id
},
xAxis: {
tickPixelInterval: 70
},
yAxis: {
type: 'category',
grid: {
enabled: true,
borderColor: 'rgba(0,0,0,0.3)',
borderWidth: 1,
columns: [{
title: {
text: 'Title'
},
labels: {
format: '{point.title}'
}
}, {
title: {
text: 'Budget'
},
labels: {
format: '{point.budget}'
}
},
{
title: {
text: 'Target'
},
labels: {
format: '{point.target}'
}
}]
}
},
series: [{
data: [
{
title: activities[0].title,
budget: activities[0].budget,
target: activities[0].total_target,
start:Date.UTC(2017, 10, 23),
end: Date.UTC(2018, 10, 23),
y: 0
},
]
}],
Now i like to Loop on Data it show the error Uncaught SyntaxError: Unexpected token 'for' if i loop above the series same , how to loop my activities array here in gantt chat using highcharts
series: [{
data: [
for(var x=0;x<activities.length;x++)
{
title: activities[x].title,
budget: activities[x].budget,
target: activities[x].total_target,
start:Date.UTC(2017, 10, 23),
end: Date.UTC(2018, 10, 23),
y: x
},
}
or you can suggest me another method to use the loop thanks

Data is the place for the array of points for the series. It's not a place where you can write JS code.
You can pass your data above the chart for example like that: https://jsfiddle.net/BlackLabel/L2b7zo05/
let data = [{}]
for (let x = 0; x < activities.length; x++) {
data.push({
name: activities[x].title,
budget: activities[x].budget,
target: activities[x].total_target,
start: activities[x].start,
end: activities[x].end
})
};
Highcharts.ganttChart('container', {
xAxis: {
min: Date.UTC(2014, 10, 17),
max: Date.UTC(2014, 10, 30),
gridLineWidth: 1
},
series: [{
data: data
}]
});
For the future please do not duplicate the same topic on multiple support channels (https://www.highcharts.com/forum/viewtopic.php?f=19&p=169191#p169191).

Highcharts column category in X-axis using different Y-axis

I'm using a column chart to display average result. On the X-axis, I want to show the average vital of female users, male users and also both genders. However, the Y-axis range is quite different as the smallest reading is < 30 and the largest reading is > 1000 (BMR). This make the chart became harder to read as the columns of < 30 readings are almost invisible. How can I make the reading of > 1000(BMR) to use another Y-axis?
I've tried to use linkedTo in series
{
name: 'Male',
linkedTo: ':previous',
stack: 10,
yAxis: 1,
tooltip: { valueSuffix: ` of total {point.numOfUser} users` },
dataLabels: { enabled: true },
data: [this.state.maleAvrBmr],
}, {
name: 'Female',
linkedTo: ':previous',
stack: 11,
yAxis: 1,
tooltip: { valueSuffix: ` of total {point.numOfUser} users` },
dataLabels: { enabled: true },
data: [this.state.femaleAvrBmr],
}, {
name: 'Male & Female',
linkedTo: ':previous',
stack: 12,
yAxis: 1,
tooltip: { valueSuffix: ` of total {point.numOfUser} users` },
dataLabels: { enabled: true },
data: [this.state.allAvrBmr],
}
but the X-axis categories is messed up as shown.
Any help is appreciated. Thanks in advance and sorry for my english.

This issue is quite difficult because each series can be bind to separate yAxis but there is no way to bind particular points in one series. The workaround is to add an additional series with null points so that one group of columns can be bind to the second yAxis:
series: [{
name: 'Tokyo',
id: 'Tokyo',
color: '#7BB5EC',
data: [49.9, 71.5, null, 129.2]
}, {
name: 'New York',
id: 'New York',
color: '#000',
data: [83.6, 78.8, null, 93.4]
}, {
name: 'London',
id: 'London',
color: '#90ED7D',
data: [48.9, 38.8, null, 41.4]
}, {
name: 'Berlin',
id: 'Berlin',
color: '#F7A35B',
data: [42.4, 33.2, null, 39.7]
}, {
linkedTo: 'Tokyo',
yAxis: 1,
color: '#7BB5EC',
data: [null, null, 1006.4, null]
}, {
linkedTo: 'New York',
yAxis: 1,
color: '#000',
data: [null, null, 906.2, null]
}, {
linkedTo: 'London',
yAxis: 1,
color: '#90ED7D',
data: [null, null, 553.1, null]
}, {
linkedTo: 'Berlin',
yAxis: 1,
color: '#F7A35B',
data: [null, null, 696.8, null]
}]
Demo:
https://jsfiddle.net/BlackLabel/uotprsh7/
However, it causes another problem. The groups of columns are not properly centered, because null points take space. This issue can be resolved by adding a custom logic that will center the group without computing space for null points. Check demo and code posted below.
Code:
function centerColumns(chart) {
var xAxis = chart.xAxis[0],
categories = xAxis.categories,
catLen = categories.length,
catOffset = xAxis.width / catLen,
catStart = catOffset / 2,
sortedPoints = {},
tempPoint1 = chart.series[0].points[0],
tempPoint2 = chart.series[1].points[0],
pointWidth = tempPoint1.pointWidth,
spaceWidth = tempPoint2.barX - tempPoint1.barX - pointWidth,
category,
pointsLen,
groupWidth,
point,
newX,
cat,
key,
i;
for (i = 0; i < catLen; i++) {
sortedPoints[categories[i]] = {
plotLeft: catStart + i * catOffset,
points: []
}
}
chart.series.forEach(function(series) {
series.points.forEach(function(p) {
cat = p.category;
if (!p.isNull) {
sortedPoints[cat].points.push(p);
}
});
});
for (key in sortedPoints) {
category = sortedPoints[key];
pointsLen = category.points.length;
groupWidth =
pointsLen * pointWidth + (pointsLen - 1) * spaceWidth;
for (i = 0; i < pointsLen; i++) {
point = category.points[i];
newX = category.plotLeft - groupWidth / 2 +
i * (pointWidth + spaceWidth);
point.graphic.attr({
x: newX
});
}
}
}
...
chart: {
type: 'column',
height: 300,
events: {
render: function() {
centerColumns(this);
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/c2u1Ldft/

How can I add custom text to the bars in echarts and modify the color of the hovering ?

I am new using this library, and basically I would like to change the texts that are shown in the tooltip and in the label of the bars. I would also like to know how to modify the color of the bars to my liking.
To try to change the text, I am putting an array of test texts so that when I do a hovering on the bar, the text corresponds to the position of the data.
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
for(var i in data){
text_toltip.push("my text"+i);
}
this is my code:
var chart = echarts.init(document.getElementById('main'));
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a','10a','11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'];
var days = ['Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
var text_toltip=[];
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
for(var i in data){
text_toltip.push("my text"+i);
}
chart.setOption({
backgroundColor: '#fff',
tooltip: {},
visualMap: {
max: 20,
color: ['#d94e5d','#eac736','#50a3ba']
},
xAxis3D: {
type: 'category',
data: hours
},
yAxis3D: {
type: 'category',
data: days
},
zAxis3D: {
type: 'value',
min: 1
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
environment: 'none',
viewControl: {
// projection: 'orthographic'
},
light: {
main: {
shadow: true
},
ambient: {
intensity: 0
},
ambientCubemap: {
texture: 'asset/pisa.hdr',
diffuseIntensity: 1
}
}
},
series: [{
type: 'bar3D',
data: data.map(function (item) {
return {
value: [item[1], item[0], item[2]],
label: {
show: item[2] != 0
}
}
}),
shading: 'lambert',
label: {
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
emphasis: {
label: {
textStyle: {
fontSize: 20,
color: '#900'
}
},
itemStyle: {
color: '#900'
}
}
}]
});
how can I do it?
https://plnkr.co/edit/LZnJdUDRQHdCRKnldWCL?p=preview

So if I understand your questions correctly:
to change visualMap.color property which specifies colors used for gradient
e.g.
visualMap: {
max: 20,
color: ['#00ff00','#0000ff'] // start and end colors for gradient
},
You can add name property to each of your axises
e.g.
yAxis3D: {
type: 'category',
data: days,
name: 'days'
},
to change text of your tooltips you add tooltip with formatter
e.g.
tooltip: {
formatter: 'my custom text and {a}, {b}, {c}, {d} and {e}'
},
alternatively formatter can be provided as a callback:
tooltip: {
formatter: function(params, ticket, callback) {
return "my text, value: " + params.value;
}
}
Using callback you can get detailed text from the server.
I also forked your plnkr: https://plnkr.co/edit/fpyhLHUZ2VAPdeQWnw4E?p=preview
UPDATE: https://plnkr.co/edit/JJMoWpZVhfyQOjdTYDvB?p=preview - this version uses your array of tooltips
Basically what you need in your case is params.dataIndex property:
tooltip: {
formatter: function(params) {
return " " + params.value + ", " + text_toltip[params.dataIndex];
}
},

Highchart reloading upon call issue - javascript

Hi I'm trying to update my piechart LIVE without redrawing the piechart, any advice?
this is the function that is being called
var i = 0;
setInterval(function(){
piecharts(i, 1, 2, 3, 4, 5);
i++;
},5000);
function piecharts(sector0Data, sector1Data, sector2Data, sector3Data, sector4Data, sector5Data)
{
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
options3d: {
enabled: false,
alpha: 45,
beta: 0
}
},
title: {
text: 'Number of person in each sector'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y} ', //change percentage to y for decimal value
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Avg number of person in this sector over the total of ',
colorByPoint: true,
data: [{
name: 'Sector0',
y: sector0Data
},{
name: 'Sector1',
y: sector1Data
},{
name: 'Sector2',
y: sector2Data
},{
name: 'Sector3',
y: sector3Data
},{
name: 'Sector4',
y: sector4Data
}, {
name: 'Sector5',
y: sector5Data
}]
}]
});
}
For every 5 second, my i will increase by 1 and my pie-chart will be drawn, this works fine but it kept redrawing my chart. any advice? thanks. also, i'm using v4.1.8 of highchart

You should use the update() method for this. Init your chart on the DOM ready event and just call a function in order to update data :
Demo
function updatePiechart(sector0Data, sector1Data, sector2Data, sector3Data, sector4Data, sector5Data)
{
var chart = $('#container').highcharts();
chart.series[0].update({
data: [{
name: 'Sector0',
y: sector0Data
},{
name: 'Sector1',
y: sector1Data
},{
name: 'Sector2',
y: sector2Data
},{
name: 'Sector3',
y: sector3Data
},{
name: 'Sector4',
y: sector4Data
}, {
name: 'Sector5',
y: sector5Data
}]
})
}

The reason for the re-render is that you create a new chart every five seconds instead of updating its data.
You need to call the update method for your y point on your chart series data:
chart.series[0].data[0].update(y);
Here is a simple example on how to update the data: Update pie data jsfiddle
Or have a look at the documentation for live data

ng-style not working in div which is rendering Highchart

I am trying to dynamically change the height of the chart depending upon the number of horizontal bars displayed in the chart.
I am using ng-style to pass css dynamically. ng-style works fine (http://jsfiddle.net/7veB2/) if I am not rendering the chart.
The link (http://jsfiddle.net/gsthilak/atwyh073/) has a working highcharts bar chart in horizontal fashion.
I am trying to render the chart in id="container" in the JSFiddle link below, but it does not render the chart.
JSFiddle (not working) link: http://jsfiddle.net/gsthilak/7veB2/19/
I am trying to change the height of the chart dynamically because the chart looks cramped if there are too many bars within small space.
JS Code looks like:
var app = angular.module('myApp', []);
function ctrl($scope){
$scope.myStyle= {
"width":"900px",
"background":"red"
}
$scope.chartHeight = 400+"px"
$scope.chartStyle = {
"height":$scope.chartHeight,
"margin":"0 auto",
"min-width":"310px",
"max-width":"624px"
}
}
var baseValue = 0;
var shadowBaseValue = 0;
var outputTitle = "Net Sales";
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
credits: {},
exporting: {},
legend: {},
title: {
text: outputTitle
},
subtitle: {
text: "MM $"
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function () {
var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
if (this.series.userOptions.labels === undefined) {
return this.y + baseValue;
}
return this.key === "Combined Uncertainty" || this.key === "" ? "" : this.series.userOptions.labels[index];
}
}
}
},
xAxis: {
title: {
text: 'Factor'
},
allowDecimals: false,
categories: ['Annual Revenue', 'Number of Years', 'Annual Costs', 'Combined Uncertainty', '']
},
yAxis: [{
title: {
text: 'MM $'
},
labels: {
formatter: function () {
return this.value + baseValue;
}
}
}],
series: [{
threshold: 29.5,
name: 'Low',
grouping: false,
type: 'bar',
data: [{
x: 0,
y: 12.15 - baseValue,
}, {
x: 1,
y: 15.45 - baseValue,
}, {
x: 2,
y: 31.25 - baseValue,
}, {
x: 3,
y: 12.15 - baseValue,
}],
labels: [10, 5, 1, 2]
}, {
threshold: 29.5,
name: 'High',
grouping: false,
type: 'bar',
data: [{
x: 0,
y: 46.86 - baseValue,
}, {
x: 1,
y: 42.28 - baseValue,
}, {
x: 2,
y: 27.77 - baseValue,
}, {
x: 3,
y: 46.86 - baseValue,
}],
labels: [30, 10, 3, 4]
}]
});
HTML code looks like:
<div ng-app="myApp" ng-controller="ctrl">
<div id="container" ng-style="chartStyle"></div>
<div style="width: 250px; overflow: scroll; " >
<div ng-style="myStyle">Hello!</div>
</div>
</div>
Please help me to solve this problem. Thanks!