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).
Related
I'm new with Highcharts and stuck with a question. I need to display all dates on x axis, but by default, I'm supposing, only even dates are displaying. How can I display all dates?
Here my code:
const options: Options = {
chart: {
type: 'column',
},
title: {
text: '',
},
xAxis: {
crosshair: false,
type: 'datetime',
title: {
text: 'Days',
},
labels: {
format: LABEL_FORMAT[period],
rotation: 90,
align: 'left',
},
},
legend: {
enabled: true,
},
credits: {
enabled: false,
},
yAxis: {
title: {
text: 'Values',
},
},
series: [
{
name: 'test',
type: 'column',
data: [
[1651363200000, 10],
[1651449600000, 15],
[1651536000000, 5],
...
],
},
{
name: 'test 2',
type: 'column',
data: [
[1651363200000, 10],
[1651449600000, 20],
[1651536000000, 30],
...
],
},
],
},
};
This chart is not only used for to display day, but also for months and years.
Please, answer my question
Use the xAxis.tickInterval option. In this case:
xAxis: {
tickInterval: 24 * 3600 * 1000,
type: 'datetime',
labels: {
format: '{value:%Y-%m-%d}',
rotation: 90,
align: 'left'
},
}
Demo:
https://jsfiddle.net/BlackLabel/t0Lohusx/
API Reference:
https://api.highcharts.com/highcharts/xAxis.tickInterval
I have included a Highcharts chart embed on my website. Now I would like to create many additional charts using other series data. However, I would like all of these additional charts have exactly the same styling and be the same type as my chart1. The only things I will have to change in each chart is the subtitle and series name. I can easily just copy my chart1 code and rename it chart2, chart3 etc. and this works fine. However, I would very much like to just replicate my chart1 for the other data series while only changing subtitles and series name for each data series (CHART1 SUBTITLE and CHART1 SERIESNAME).
I have tried different solutions but none worked so far. Below is the code I have made for my chart1.
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'CHARTNAME',
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 30,
fontSize: '22px'
}
},
subtitle: {
text: 'CHART1 SUBTITLE',
align: 'left',
x: 55,
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 25,
color: "#000",
fontSize: '14px'
}
},
xAxis: {
categories: [],
labels: {
rotation: -20,
}
},
yAxis: {
title: {
text: 'TITLETEXT',
rotation: 270,
y: -30
},
},
series: [{
name: 'CHART1 SERIESNAME',
color: '#006699',
data: []
}],
tooltip: {
}
},
};
Below is the code I use to initialize the series data in chart1. Here I have added a 'chart2' and I essentially hoped it would somehow be able to initialize that in 'chart1' and somehow also changing the chart subtitle and series name.
$('chart').ready(function() {
var tableName = '<?php echo $tableName; ?>'
$.getJSON("../companychart/chartdataNew.php", {id: escape(tableName)}, function(json) {
chartOptions.chart1.xAxis.categories = json['XAXIS NAME']['data'];
chartOptions.chart1.series[0].data = json['SERIES 1']['data'];
chartOptions.chart2.xAxis.categories = json['XAXIS NAME']['data'];
chartOptions.chart2.series[0].data = json['SERIES 2']['data'];
});
You can use Highcharts.merge method to extend default options (used in each chart) by particular chart options (series, subtitle). Check the demo posted below.
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
JS:
var chart1 = {
subtitle: {
text: 'CHART1 SUBTITLE',
},
series: [{
name: 'CHART1 SERIESNAME',
color: '#006699',
data: [1, 2, 3, 4, 5]
}]
},
chart2 = {
subtitle: {
text: 'CHART2 SUBTITLE',
},
series: [{
name: 'CHART2 SERIESNAME',
color: '#0034ef',
data: [5, 1, 2, 6, 2]
}]
},
chart3 = {
subtitle: {
text: 'CHART3 SUBTITLE',
},
series: [{
name: 'CHART3 SERIESNAME',
color: '#23ee45',
data: [3, 5, 2, 3, 1]
}]
},
chartDefaultOptions;
chartDefaultOptions = {
chart: {
type: 'column'
},
title: {
text: 'CHARTNAME',
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 30,
fontSize: '22px'
}
},
subtitle: {
align: 'left',
x: 55,
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 25,
color: "#000",
fontSize: '14px'
}
},
xAxis: {
categories: [],
labels: {
rotation: -20,
}
},
yAxis: {
title: {
text: 'TITLETEXT',
rotation: 270,
y: -30
},
}
};
Highcharts.chart('container1', Highcharts.merge(chartDefaultOptions, chart1));
Highcharts.chart('container2', Highcharts.merge(chartDefaultOptions, chart2));
Highcharts.chart('container3', Highcharts.merge(chartDefaultOptions, chart3));
Demo:
https://jsfiddle.net/BlackLabel/7utogs95/
I want to display Data Zoom as Date value instead of category data value so that I added two axis.
Please look # my below java script code :
option = {
dataZoom: {
show: true,
realtime : true,
xAxisIndex: [1],
},
xAxis : [{
type: 'category',
data: ['A','B','C']
},{
type: 'value',
xAxisIndex: 1,
yAxisIndex: 1,
formatter: function(value) {
var dateObj= new Date(value);
return dateObj.format("yyyy-mm-dd HH:MM:ss");
}
}
}
here series: [data] is missing.
add series in option as follows and try.
series: [
{
name: 'Active Minutes',
type: 'pie',
radius: '55%',
center: ['45%', '65%'],
data: [
{ value: jsondata.avgSedentaryTime, name: 'Sedentary' },
{ value: jsondata.avgFairlyActiveTime, name: 'Fairly Active' },
{ value: jsondata.avgLightlyActive, name: 'Lightly Active' },
{ value: jsondata.avgVeryActive, name: 'Very Active' }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
I have two y-axis.
using primary y-axis I have created column chart but when I am trying to create line chart using secondary y-axis with negative percentage data values my line chart is going down from x-axis I don't want that so do anyone know about this please help me as soon as possible ?
$(function () {
$('#container').highcharts({
colors: [ '#24CBE5','#FF9655'],
chart: {
type: 'column'
},
title: {
text: 'combine chart'
},
plotOptions: {
series: {
pointPadding:0,
groupPadding:0.3,
borderWidth: 1,
//shadow: false
}
},
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
categories: ['Oct 15', 'Nov 15', 'Dec 15', 'Jan 15', 'Feb 15','March 15'],
},
yAxis: [{ // Primary yAxis
min: 0,
max: 4,
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
formatter: function () {
return this.value + '$';
}
},
title: {
text: 'Million',
}
}, { // Secondary yAxis
tickInterval:5, //set ticks to 20
min: -30,
max: 10,
column :{
stacking:'percent'
},
title: {
text: '% Percantage',
},
labels: {
formatter: function () {
return this.value + '%';
}
},
opposite: true
}],
series: [
{
type: 'column',
name: 'AB',
data: [3, 3.5, 3.3, 3.6, 2.5,2]
}, {
type: 'column',
name: 'BC',
data: [3.3, 2, 3.3, 3.4, 2.9,3]
}, {
// USE THIS CODE TO GENERATE LINE CHART (I HAVE USED ONLY MILION AND CREATED LINE CHART BUT INSTEAD I WANT TO USE percentage )
type: 'line',
name: '% Percantage',
data: [0.5, 2, 0, 4, 3.7,2.6],
color: '#000000',
//border: 1,
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null // inherit from series
}
}]
});
});
You need to set alignTicks as false.
chart:{
alignTicks: false
}
I am creating a gantt chart using Highcharts for a process that has three phase Request, Submission and Approval. It has two stacks for Planned and Actual.
I used the highcharts stacked bars to represent the data plotted like this jsFiddle of Gantt
Instead of data as
series: [{
name: 'Requested',
data: [1,3,4,5,6],
stack: 'Planned'
}, {
name: 'Requested',
data: [2,4,5,7,8],
stack: 'Actual'
}, {
name: 'Submitted',
data: [2,3,2,3,4],
stack: 'Planned'
}, {
name: 'Submitted',
data: [3,5,2,3,4],
stack: 'Actual'
}, {
name: 'Approved',
data: [6,3,2,3,4],
stack: 'Planned'
}, {
name: 'Approved',
data: [2,4,2,3,4],
stack: 'Actual'
}]
I want the data as dates here I have the first,second and third dates respectively for Requested,Submission and Approval.
series: [{
name: 'Part1',
data: [Date.UTC(2013,01,12),Date.UTC(2013,01,23),Date.UTC(2013,02,05)],
stack: 'Planned'
}, {
name: 'Part1',
data: [Date.UTC(2013,01,15),Date.UTC(2013,01,29),Date.UTC(2013,02,05)],
stack: 'Actual'
},]
I need the series name on y-axis to be taken from the data in series
xAxis: {
categories: ['Part1', 'Part2', 'Part3', 'Part4', 'Part5']
},
and
1. the start should be from the data[0] instead hence it will contain two bars and three points.
2. I need difference of dates in the bar so hence I can show the time for each activity.
I tried a with time in millisecondsjsfiddle but couldn't come to anything substantial
You can use "low" and "y" properties in the data so an X offset is rendered and therefore you can have the "Gantt effect" you need:
Please check this example:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Gantt module development plan'
},
subtitle: {
text: 'Using fake data'
},
xAxis: {
categories: ['Planning', 'Development', 'Testing', 'Documentation']
},
yAxis: {
type: 'datetime',
min: Date.UTC(2012, 0, 1)
},
tooltip: {
formatter: function() {
console.log(this.point);
var point = this.point;
return '<b>'+ point.category +'</b><br/>'+
Highcharts.dateFormat('%b %e, %Y', point.low) + ' - ' +
Highcharts.dateFormat('%b %e, %Y', point.y);
}
},
series: [{
data: [{
low: Date.UTC(2011, 11, 20),
y: Date.UTC(2012, 0, 15)
}, {
low: Date.UTC(2012, 0, 10),
y: Date.UTC(2012, 4, 28)
}, {
low: Date.UTC(2012, 3, 15),
y: Date.UTC(2012, 4, 28)
}, {
low: Date.UTC(2012, 4, 15),
y: Date.UTC(2012, 4, 28)
}]
}]
});
Cheers
Fran