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
Related
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.chart('container', {
chart: {
type: 'arearange',
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
//type: 'datetime',
accessibility: {
rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled:true
}
},
plotOptions: {
arearange: {
dataLabels: {
enabled: true,
yLow: 5,
verticalAlign: 'bottom',
inside: true,
color: 'black',
formatter: function(e) {
if((this.x==0) && (this.point.low==this.y))
return this.series.name
}
}
}
},
legend: {
enabled: false
},
series: [{
name: "AREA 1",
data: [
[0, 10],
[0, 10],
],
borderColor: 'black',
borderWidth: 0.2,
},
{
name: "AREA 2",
data: [
[20, 40],
[20, 40],
]
}]
});
Above is a sample piece of code that I have plotted using the arearange chart. The graph is plotted successfully just as I wanted it to be. But there seems to be a problem. I want the series name "AREA1" and "AREA2" to be shown in the midpoint of the respective y-axis values. ie "Area 1" should be shown at 5(midpoint of 0 and 10) and "Area 2" should be shown at 30(midpoint of 20 and 40). Is there any way to do that? I've tried with specifying yLow value in the plotOptions. But it didn't work for me since the series data is dynamic.
The chart I'm using is highcharts and version is 4.1.5
Please help!! Thanks in advance
You can add mocked scatter series with disabled markers and enabled data labels to show the series name in the proper place:
series: [..., {
linkedTo: 0,
dataLabels: {
format: 'AREA 1'
},
type: 'scatter',
data: [(area1Data[0][0] + area1Data[0][1]) / 2]
}, {
linkedTo: 1,
dataLabels: {
format: 'AREA 2'
},
type: 'scatter',
data: [(area2Data[0][0] + area2Data[0][1]) / 2]
}
]
Live demo: http://jsfiddle.net/BlackLabel/d01e2ymx/
API Reference: https://api.highcharts.com/highcharts/series.scatter
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
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 building a dashboard in Ruby on Rails that creates charts/graphs for analysis out of google analytics data using HighchartsJS. I am following this example from Highcharts for Ajax Data implementation. The csv data they are using to create the line graph is here.
Currently I am retrieving google analytics data using Core Client API V3 and gives me a result back the form of
[[Year, Month, Day, Session Hits, Unique Hits], [Year, Month, Day, Session Hits, Unique Hits], [Year, Month, Day, Session Hits, Unique Hits], ...]
An example
[["2014", "11", "24", "21","2"], [2014", "11", "25", "8", "0"],["2014", "11", "26", "11", "3"], [2014", "11", "27", "5", "1"]]
I want to convert this data into a form just like the csv data Highcharts is using as I want a graph that looks exactly like this example.
I tried converting it as such
def web_traffic_results
#Instantiate array of datapoints to be returned for campaign traffic chart
wt_datapoints = "Day,Visits,Unique Visitors"
#for each element in ga queried results parse the data into highcharts example format
traffic_query.each do |rowContent|
row_year = rowContent[0]
row_month = rowContent[1]
row_day = rowContent[2]
row_date = "#{row_day}/#{row_month}/#{row_year}"
total_hits = rowContent[3]
new_hits = rowContent[4]
wt_datapoints = wt_datapoints + "\n#{row_date},#{total_hits},#{new_hits}"
end
return [wt_datapoints]
end
In the reference in which I am rendering the data, [wt_datapoints] renders like this
["Day,Visits,Unique Visitors\n11/04/2014,2,0\n11/13/2014,1,0\n11/20/2014,2,0\n11/21/2014,1,0\n11/24/2014,21,0\n11/25/2014,8,0"]
Here is where I call the chart render and pipe the data
<script>
$(document).ready(function() {
WebTrafficChart.render('/mgt/web/<%= #id %>/graphs/traffic', '#web_traffic_chart');
});
</script>
This calls the below which is mostly taken from the example linked on the top except for the data
window.WebCampaignTrafficChart = {
render: function(data, selector) {
// Get the CSV and create the chart
$.getJSON(data, function (csv) {
// transform
// {data: []}
$('#web_traffic_chart').highcharts({
data: {
csv: csv
},
title: {
text: 'Total Traffic'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'All visits',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: 'New visitors'
}]
});
});
}
}
This implementation does not work and I was wondering if I could get some help and feedback regarding this question. Thanks in advance.