I am trying to implement Gantt Chart in Fusion Chart. But, I am not able to find few customizing options. Following are the options I require to implement on the Fusion Gantt Chart,
How to customize or reduce the size of the milestone?
How to customize the Y-axis data label as hyperlink? [with reference to picture, the labels such as Identify Customers, Survey 500 customers, etc. must be an hyperlink which will help us to drilldown to data level information]
Is there any possible way to change the shape of the milestone to triangle other than polygon or star?
FusionCharts.ready(function() {
var smoPlan = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"captionFontSize": "14",
"subCaption": "Project Plan",
"subCaptionFontSize": "12",
"milestoneFont": "Times New Roman",
"milestoneFontSize": "15",
"labelLink": "http://www.fusioncharts.com/"
},
"categories": [{
"category": [{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
}, {
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
}, {
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
}, {
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
}, {
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
}, {
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
}, {
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
}, {
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"process": [{
"label": "Identify Customers"
}, {
"label": "Survey 500 Customers"
}, {
"label": "Interpret Requirements"
}, {
"label": "Market Analysis"
}, {
"label": "Brainstorm concepts"
}, {
"label": "Define Ad Requirements"
}, {
"label": "Design & Develop"
}, {
"label": "Mock test"
}, {
"label": "Documentation"
}, {
"label": "Start Campaign"
}]
},
"tasks": {
"task": [{
"id": "1",
"start": "08/04/2014",
"end": "08/10/2014",
"color": "#000000",
}, {
"id": "2",
"start": "08/08/2014",
"end": "08/19/2014"
}, {
"id": "3",
"start": "08/19/2014",
"end": "09/02/2014"
}, {
"id": "4",
"start": "08/24/2014",
"end": "09/02/2014"
}, {
"id": "5",
"start": "09/02/2014",
"end": "09/21/2014"
}, {
"id": "6",
"start": "09/21/2014",
"end": "10/06/2014"
}, {
"id": "7",
"start": "10/06/2014",
"end": "01/21/2015"
}, {
"id": "8",
"start": "01/21/2015",
"end": "02/19/2015"
}, {
"id": "9",
"start": "01/28/2015",
"end": "02/24/2015"
}, {
"id": "10",
"start": "02/24/2015",
"end": "03/27/2015"
}]
},
//Adding milestones to task with id 7 and 10
"milestones": {
"milestone": [{
"date": "1/21/2015",
"taskid": "7",
"color": "#f8bd19",
"shape": "star",
"tooltext": "Successful Completion of Development",
"label": "Development Complete",
"color": "#587B17"
}, {
"date": "3/28/2015",
"taskid": "10",
"color": "#f8bd19",
"shape": "star",
"tooltext": "Successful Completion of Campaign",
"label": "Campaign Complete",
"color": "#4838D2"
}]
}
}
}).render();
});
HTML Code
-->
<div id="chart-container">FusionCharts will render here</div>
You can customize or reduce the size of the milestone by using the "radius" attribute under the "milestone" object like radius: 5
You can customize the Y-axis data label as hyperlink by using the "link" attribute under the "process" object like link: "https://www.fusioncharts.com/". This attribute supports all kinds of FusionCharts link formats.
Reference:
https://www.fusioncharts.com/dev/chart-guide/chart-configurations/drill-down#simple-links
To change the shape of the milestone to triangle you need to set the "shape" attribute to "polygon" and set the "numSides" attribute to "3" under the "milestone" object like numSides: 3
Reference sample: http://jsfiddle.net/srishti_fc/w9bnt24L/3/
Related
Here, I want to render a dynamic fusion Gantt chart. On the below example, I have hard-coded the data for rendering the chart. But I need in an dynamic format. My data is coming from an API, so how can I get that data and pass dynamically?
Also, I want x-axis and y-axis in an dynamic format.
FusionCharts.ready(function() {
var smoPlan = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"dateformat": "mm/dd/yyyy",
"caption": " ",
"captionFontSize": "14",
"subCaption": "Project Plan",
"subCaptionFontSize": "12",
"milestoneFont": "Times New Roman",
"milestoneFontSize": "15"
},
"categories": [{
"category": [{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
}, {
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
}, {
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"process": [{
"label": "Identify Customers"
}, {
"label": "Survey 500 Customers"
}, {
"label": "Interpret Requirements"
}
]
},
"tasks": {
"task": [{
"id": "1",
"start": "08/04/2014",
"end": "08/10/2014"
}, {
"id": "2",
"start": "08/08/2014",
"end": "08/19/2014"
}, {
"id": "3",
"start": "08/19/2014",
"end": "09/02/2014"
}]
},
//Adding milestones to task with id 1 and 3
"milestones": {
"milestone": [{
"date": "8/06/2014",
"taskid": "1",
"color": "#f8bd19",
"shape": "rhombus",
"tooltext": "Successful Completion of Development",
"label": " ",
"color": "#587B17"
}, {
"date": "8/25/2014",
"taskid": "3",
"color": "#f8bd19",
"shape": "triangle",
"tooltext": "Successful Completion of Campaign",
"label": " ",
"color": "#4838D2"
}]
}
}
}).render();
});
Please help me to solve this! Thanks in advance.
I would like to draw chords diagram my data is is in two json files stored.
The first one contain the length of each outside fields:
[
{
"color": "#996600",
"id": "chr03",
"len": "35020413",
"label": "chr03"
},
{
"color": "#666600",
"id": "tig00007144",
"len": 40868,
"label": "tig00007144"
},
{
"color": "#666600",
"id": "tig00026480",
"len": 95961,
"label": "tig00026480"
},
...
]
and the relationship are stored in the following json file:
[
{
"source": {
"start": 30824,
"end": 23113,
"id": "tig00007144"
},
"target": {
"start": 33203431,
"end": 33211142,
"id": "chr03"
}
},
{
"source": {
"start": 5564,
"end": 1,
"id": "tig00007144"
},
"target": {
"start": 33172892,
"end": 33178421,
"id": "chr03"
}
},
...
]
How should I design the matrix for d3 to represent the relationships?
The problem was in circle.json. This "len": "35020413", had to be replaced by "len": 35020413,.
I have a script for full calendar listed below. Every thing is working fine. I returned events stored in database from controller in JSON format. Now that the format of json data is changed slightly, i could not parse to show events in calendar. Following is my script;
$('#calendar').fullCalendar({
editable: true,
events: {
url: "{{ route('event_calendar.data') }}"
},
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
var data = event.title;
var start = event.start.format();
var end = event.end.format();
var csrf= "{{csrf_token()}}"
$.post("{{ route('event_update') }}",{title: data, start: start, end: end, _token: csrf}, function (info) { $("#result").html(info); });
},
header: {
center: 'month,thisWeek' // buttons for switching between views
},
views: {
thisWeek: {
type: 'agenda',
duration: { week: 1 },
buttonText: 'This week'
}
}
});
This is my previous data in JSON format which is acquired from url i.e {{ route('event_calendar.data') }}
[{
"id": 9,
"title": "Event 1",
"color": "#af2e0e",
"start": "2017-09-18",
"end": "2017-09-20"
}, {
"id": 10,
"title": "Event 2",
"color": "#0b7c0d",
"start": "2017-09-04",
"end": "0000-00-00"
}, {
"id": 11,
"title": "Event 3",
"color": "#378006",
"start": "2017-09-10",
"end": "2017-09-12"
}, {
"id": 13,
"title": "Publication",
"color": "#378006",
"start": "2017-09-15",
"end": "2017-09-16"
}, {
"id": 14,
"title": "other",
"color": "#378006",
"start": "2017-09-05",
"end": "2017-09-06"
}, {
"id": 18,
"title": "other",
"color": "#378006",
"start": "2017-09-18",
"end": "2017-09-19"
}, {
"id": 19,
"title": "Apple",
"color": "#378006",
"start": "2017-09-08",
"end": "2017-09-09"
}, {
"id": 20,
"title": "Developer",
"color": "#378006",
"start": "0000-00-00",
"end": "0000-00-00"
}, {
"id": 21,
"title": "New event",
"color": "#af2e0e",
"start": "2017-09-28",
"end": "2017-09-30"
}, {
"id": 22,
"title": "asdasd",
"color": "#0b7c0d",
"start": "2017-08-28",
"end": "2017-08-31"
}]
This is my new JSON data acquired from same url. Now as you can see there is a 'data' added at top events didn't show in the calendar. How to parse this form to show events in calendar?
{
"data": [{
"id": 9,
"title": "Event 1",
"color": "#af2e0e",
"start": "2017-09-18",
"end": "2017-09-20"
}, {
"id": 10,
"title": "Event 2",
"color": "#0b7c0d",
"start": "2017-09-04",
"end": "0000-00-00"
}, {
"id": 11,
"title": "Event 3",
"color": "#378006",
"start": "2017-09-10",
"end": "2017-09-12"
}, {
"id": 13,
"title": "Publication",
"color": "#378006",
"start": "2017-09-15",
"end": "2017-09-16"
}, {
"id": 14,
"title": "other",
"color": "#378006",
"start": "2017-09-05",
"end": "2017-09-06"
}, {
"id": 18,
"title": "other",
"color": "#378006",
"start": "2017-09-18",
"end": "2017-09-19"
}, {
"id": 19,
"title": "Apple",
"color": "#378006",
"start": "2017-09-08",
"end": "2017-09-09"
}, {
"id": 20,
"title": "Developer",
"color": "#378006",
"start": "0000-00-00",
"end": "0000-00-00"
}, {
"id": 21,
"title": "New event",
"color": "#af2e0e",
"start": "2017-09-28",
"end": "2017-09-30"
}, {
"id": 22,
"title": "asdasd",
"color": "#0b7c0d",
"start": "2017-08-28",
"end": "2017-08-31"
}]
}
It is probably a better option to have your source return properly formatted data, but if for some reason you can't do that, you can do it in Javascript.
The Fullcalendar docs describe that you can pass normal $.ajax options in your events source. So you can specify a success callback which returns the data in the format you need.
I tried this with your data locally and it works:
$('#calendar').fullCalendar({
// ... your code
events: {
url: "{{ route('event_calendar.data') }}",
success: function(response) {
// Instead of returning the raw response, return only the data
// element Fullcalendar wants
return response.data;
}
},
// ... rest of your Fullcalendar code
If I have multiple charts, say a stacked bar and a pie chart on my page. I would like to interact (e.g. click) on one of it and see some visual update on the other chart.
I tried creating them using FusionCharts in the following manner:
FusionCharts.ready(function() {
var pieChart = new FusionCharts({
type: 'pie2d',
renderAt: 'pieContainer',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Company Revenue",
"enableMultiSlicing": "0",
"bgcolor": "FFFFFF",
"showvalues": "1",
"showpercentvalues": "1",
"showborder": "0",
"showplotborder": "0",
"showlegend": "1",
"legendborder": "0",
"legendposition": "bottom",
"enablesmartlabels": "1",
"use3dlighting": "0",
"showshadow": "0",
"legendbgcolor": "#CCCCCC",
"legendbgalpha": "20",
"legendborderalpha": "0",
"legendshadow": "0",
"legendnumcolumns": "3",
"palettecolors": "#f8bd19,#e44a00,#008ee4,#33bdda,#6baa01,#583e78"
},
"data": [{
"label": "Services",
"value": "26"
}, {
"label": "Hardware",
"value": "32"
}, {
"label": "Software",
"value": "42"
}]
}
}).render();
var stackedBar = new FusionCharts({
type: 'stackedBar2D',
renderAt: 'barContainer',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Company Revenue",
"xaxisname": "Month",
"yaxisname": "Revenue",
"bgcolor": "FFFFFF",
"outcnvbasefontcolor": "666666",
"numberprefix": "$",
"showvalues": "0",
"numvdivlines": "10",
"showalternatevgridcolor": "1",
"alternatevgridcolor": "e1f5ff",
"divlinecolor": "e1f5ff",
"vdivlinecolor": "e1f5ff",
"basefontcolor": "666666",
"tooltipbgcolor": "F3F3F3",
"tooltipbordercolor": "666666",
"canvasbordercolor": "666666",
"canvasborderthickness": "1",
"showplotborder": "1",
"plotfillalpha": "80",
"showborder": "0",
"legendbgcolor": "#CCCCCC",
"legendbgalpha": "20",
"legendborderalpha": "0",
"legendshadow": "0",
"legendnumcolumns": "3"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesname": "Product A",
"data": [{
"value": "27400"
}, {
"value": "29800"
}, {
"value": "25800"
}, {
"value": "26800"
}, {
"value": "29600"
}, {
"value": "32600"
}, {
"value": "31800"
}, {
"value": "36700"
}, {
"value": "29700"
}, {
"value": "31900"
}, {
"value": "34800"
}, {
"value": "24800"
}]
}, {
"seriesname": "Product B",
"data": [{
"value": "10000"
}, {
"value": "11500"
}, {
"value": "12500"
}, {
"value": "15000"
}, {
"value": "11000"
}, {
"value": "9800"
}, {
"value": "11800"
}, {
"value": "19700"
}, {
"value": "21700"
}, {
"value": "21900"
}, {
"value": "22900"
}, {
"value": "20800"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "42000",
"color": "91C728",
"displayvalue": "Target",
"showontop": "1"
}]
}],
"styles": {
"definition": [{
"name": "CanvasAnim",
"type": "animation",
"param": "_xScale",
"start": "0",
"duration": "1"
}],
"application": [{
"toobject": "Canvas",
"styles": "CanvasAnim"
}]
}
}
}).render();
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<div>
<span id="barContainer">FusionCharts XT will load here!</span>
<span id="pieContainer">FusionCharts XT will load here!</span>
</div>
Now how to update the other chart on interacting one of the chart? Say by clicking or hovering plots on one of the chart, has its visual update in another chart.
**Note: ** The data is not relevant in this case. Only the chart to chart interactivity needs to be established. There is no restriction on JS library being used and can be entirely based on the responder choice.Any help is highly appreciable.
With highcharts, you could override the click function, then update whichever properties you want.
See: http://api.highcharts.com/highcharts#chart.events
I do not know how it is with FusionCharts, although I think syncing data between different type of charts should be possible, but I was using a lot amCharts and if you have no restriction on library then I put this quick tips link to show you what you can fairly quickly implement there.
http://www.amcharts.com/tips/automatically-syncing-pie-chart-data-column-chart-hover/
I want to change Gantt Chart data based on date selected in the date (dd:mm:yyyy) picker.
Here is my Screenshot.
Gantt Chart
HTML Code:
<div class="col-sm-8" ng-controller="ReportsController">
<div class="col-sm-12 page-top-actions">
<div class="col-sm-3 day-wise-report">
<input type="date" name="report" tooltip="Day">
</div>
<div class="col-sm-3 show-report">
<button class="btn btn-default" type="submit">Show Report</button>
</div>
</div>
<select ng-init="selectedChart.chart = chartOptions[0]; updateChart()" ng-model="selectedChart.chart"
ng-change="updateChart()" ng-options="c.name for c in chartOptions track by c.id"></select>
<fusioncharts
id="exampleId"
width="800"
height="400"
type="gantt"
datasource="{{productivityReportData}}">
</fusioncharts>
Javascript Code:
app.controller('ReportsController', ['$scope', function ($scope) {
$scope.chartOptions = [{
id: 1,
name: "Day 1"
}, {
id: 2,
name: "Day 2"
}];
$scope.reportsDataSource = {
"chart": {
"dateformat": "mm/dd/yyyy hh:mm:ss",
"outputDateFormat": "ddds mn l, yyyy hh12:mn ampm",
"caption": "Operator Productivity",
"subCaption": "Day 1",
"slackFillColor": "f44336",
"showSlackAsFill": "1",
"canvasBorderAlpha": "30",
"plottooltext": "$processName{br} $label: starting time $start{br} - ending time $end",
"theme": "fint"
},
"categories": [
{
"category": [
{
"start": "09:00:00",
"end": "18:00:00",
"label": "Activity Timeline"
}
]
},
{
"align": "center",
"category": [
{
"start": "11:00:00",
"end": "10:59:59",
"label": "9am-11am"
},
{
"start": "11:00:00",
"end": "12:59:59",
"label": "11am-1pm"
},
{
"start": "13:00:00",
"end": "13:59:59",
"label": "1pm-2pm"
},
{
"start": "14:00:00",
"end": "15:59:59",
"label": "2pm-4pm"
},
{
"start": "16:00:00",
"end": "17:59:59",
"label": "4pm-6pm"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headertext": "Operators",
"headerfontsize": "14",
"headervalign": "middle",
"headeralign": "left",
"process": [
{
"label": "Karthik",
"id": "EMP121"
},
{
"label": "David.G",
"id": "EMP122"
},
{
"label": "Mary.P",
"id": "EMP123"
},
{
"label": "Andrew.H",
"id": "EMP124"
},
{
"label": "Neil.M",
"id": "EMP125"
}
]
},
"tasks": {
"showlabels": "1",
"task": [
{
"processid": "EMP121",
"start": "09:00:00",
"end": "10:00:00",
"label": "Activity1"
},
{
"processid": "EMP121",
"start": "15:00:00",
"end": "14:30:00",
"label": "Activity2"
},
{
"processid": "EMP122",
"start": "10:00:00",
"end": "16:34:17",
"percentComplete": "75",
"label": "Activity3"
},
{
"processid": "EMP123",
"start": "11:00:00",
"end": "12:10:00",
"label": "Activity4"
},
{
"processid": "EMP123",
"start": "15:00:00",
"end": "17:32:00",
"label": "Activity 2"
},
{
"processid": "EMP124",
"start": "10:30:00",
"end": "12:36:00",
"label": "Activity 2"
},
{
"processid": "EMP125",
"start": "14:00:00",
"end": "15:32:00",
"label": "Activity 1"
}
]
}
};
$scope.reportsDataSource2 = {
"chart": {
"dateformat": "mm/dd/yyyy hh:mm:ss",
"outputDateFormat": "ddds mnl, yyyy hh12:mn ampm",
"caption": "Operator Productivity",
"subCaption": "Day 2",
"slackFillColor": "f44336",
"showSlackAsFill": "1",
"canvasBorderAlpha": "30",
"plottooltext": "$processName{br} $label: starting time $start{br} - ending time $end",
"theme": "fint"
},
"categories": [
{
"category": [
{
"start": "09:00:00",
"end": "18:00:00",
"label": "Activity Timeline"
}
]
},
{
"align": "center",
"category": [
{
"start": "09:00:00",
"end": "10:59:59",
"label": "9am-11am"
},
{
"start": "11:00:00",
"end": "12:59:59",
"label": "11am-1pm"
},
{
"start": "13:00:00",
"end": "13:59:59",
"label": "1pm-2pm"
},
{
"start": "14:00:00",
"end": "15:59:59",
"label": "2pm-4pm"
},
{
"start": "16:00:00",
"end": "17:59:59",
"label": "4pm-6pm"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headertext": "Operators",
"headerfontsize": "14",
"headervalign": "middle",
"headeralign": "left",
"process": [
{
"label": "Karthik",
"id": "EMP121"
},
{
"label": "David.G",
"id": "EMP122"
},
{
"label": "Mary.P",
"id": "EMP123"
},
{
"label": "Andrew.H",
"id": "EMP124"
},
{
"label": "Neil.M",
"id": "EMP125"
}
]
},
"tasks": {
"showlabels": "1",
"task": [
{
"processid": "EMP121",
"start": "09:00:00",
"end": "10:00:00",
"label": "Activity1"
},
{
"processid": "EMP121",
"start": "15:00:00",
"end": "14:30:00",
"label": "Activity2"
},
{
"processid": "EMP122",
"start": "10:00:00",
"end": "16:34:17",
"percentComplete": "75",
"label": "Activity3"
},
{
"processid": "EMP123",
"start": "11:00:00",
"end": "12:10:00",
"label": "Activity4"
},
{
"processid": "EMP123",
"start": "15:00:00",
"end": "17:32:00",
"label": "Activity 2"
},
{
"processid": "EMP124",
"start": "10:30:00",
"end": "12:36:00",
"label": "Activity 2"
},
{
"processid": "EMP125",
"start": "14:00:00",
"end": "15:32:00",
"label": "Activity 1"
}
]
}
};
$scope.updateChart = function () {
if ($scope.selectedChart.chart === undefined || $scope.selectedChart.chart.id === 1) {
$scope.productivityReportData = $scope.reportsDataSource;
}
if ($scope.selectedChart.chart !== undefined && $scope.selectedChart.chart.id === 2) {
$scope.productivityReportData = $scope.reportsDataSource2;
}
};
}]);
Please, let me know how to integrate with HTML and generate data for the date, month and year selected.
In order to change the chart on selection of a date you gotta add eventlistener to <input type="date" name="report" tooltip="Day"></div>.
I have changed your code a bit and updated the code.
var app = angular.module('myApp', ["ng-fusioncharts"]),
globalContainer = {},
_intUpdate;
app.controller('ReportsController', ['$scope', function ($scope) {
$scope.chartOptions = [{
id: 1,
name: "Day 1"
}, {
id: 2,
name: "Day 2"
}];
$scope.reportsDataSource = {
"chart": {
"dateformat": "mm/dd/yyyy hh:mm:ss",
"outputDateFormat": "ddds mn l, yyyy hh12:mn ampm",
"caption": "Operator Productivity",
"subCaption": "Day 1",
"slackFillColor": "f44336",
"showSlackAsFill": "1",
"canvasBorderAlpha": "30",
"plottooltext": "$processName{br} $label: starting time $start{br} - ending time $end",
"theme": "fint"
},
"categories": [
{
"category": [
{
"start": "09:00:00",
"end": "18:00:00",
"label": "Activity Timeline"
}
]
},
{
"align": "center",
"category": [
{
"start": "11:00:00",
"end": "10:59:59",
"label": "9am-11am"
},
{
"start": "11:00:00",
"end": "12:59:59",
"label": "11am-1pm"
},
{
"start": "13:00:00",
"end": "13:59:59",
"label": "1pm-2pm"
},
{
"start": "14:00:00",
"end": "15:59:59",
"label": "2pm-4pm"
},
{
"start": "16:00:00",
"end": "17:59:59",
"label": "4pm-6pm"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headertext": "Operators",
"headerfontsize": "14",
"headervalign": "middle",
"headeralign": "left",
"process": [
{
"label": "Karthik",
"id": "EMP121"
},
{
"label": "David.G",
"id": "EMP122"
},
{
"label": "Mary.P",
"id": "EMP123"
},
{
"label": "Andrew.H",
"id": "EMP124"
},
{
"label": "Neil.M",
"id": "EMP125"
}
]
},
"tasks": {
"showlabels": "1",
"task": [
{
"processid": "EMP121",
"start": "09:00:00",
"end": "10:00:00",
"label": "Activity1"
},
{
"processid": "EMP121",
"start": "15:00:00",
"end": "14:30:00",
"label": "Activity2"
},
{
"processid": "EMP122",
"start": "10:00:00",
"end": "16:34:17",
"percentComplete": "75",
"label": "Activity3"
},
{
"processid": "EMP123",
"start": "11:00:00",
"end": "12:10:00",
"label": "Activity4"
},
{
"processid": "EMP123",
"start": "15:00:00",
"end": "17:32:00",
"label": "Activity 2"
},
{
"processid": "EMP124",
"start": "10:30:00",
"end": "12:36:00",
"label": "Activity 2"
},
{
"processid": "EMP125",
"start": "14:00:00",
"end": "15:32:00",
"label": "Activity 1"
}
]
}
};
$scope.reportsDataSource2 = {
"chart": {
"dateformat": "mm/dd/yyyy hh:mm:ss",
"outputDateFormat": "ddds mnl, yyyy hh12:mn ampm",
"caption": "Operator Productivity",
"subCaption": "Day 2",
"slackFillColor": "f44336",
"showSlackAsFill": "1",
"canvasBorderAlpha": "30",
"plottooltext": "$processName{br} $label: starting time $start{br} - ending time $end",
"theme": "fint"
},
"categories": [
{
"category": [
{
"start": "09:00:00",
"end": "18:00:00",
"label": "Activity Timeline"
}
]
},
{
"align": "center",
"category": [
{
"start": "09:00:00",
"end": "10:59:59",
"label": "9am-11am"
},
{
"start": "11:00:00",
"end": "12:59:59",
"label": "11am-1pm"
},
{
"start": "13:00:00",
"end": "13:59:59",
"label": "1pm-2pm"
},
{
"start": "14:00:00",
"end": "15:59:59",
"label": "2pm-4pm"
},
{
"start": "16:00:00",
"end": "17:59:59",
"label": "4pm-6pm"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headertext": "Operators",
"headerfontsize": "14",
"headervalign": "middle",
"headeralign": "left",
"process": [
{
"label": "Karthik",
"id": "EMP121"
},
{
"label": "David.G",
"id": "EMP122"
},
{
"label": "Mary.P",
"id": "EMP123"
},
{
"label": "Andrew.H",
"id": "EMP124"
},
{
"label": "Neil.M",
"id": "EMP125"
}
]
},
"tasks": {
"showlabels": "1",
"task": [
{
"processid": "EMP121",
"start": "09:00:00",
"end": "10:00:00",
"label": "Activity1"
},
{
"processid": "EMP122",
"start": "10:00:00",
"end": "16:34:17",
"percentComplete": "75",
"label": "Activity3"
},
{
"processid": "EMP123",
"start": "11:00:00",
"end": "12:10:00",
"label": "Activity4"
},
{
"processid": "EMP123",
"start": "15:00:00",
"end": "17:32:00",
"label": "Activity 2"
},
{
"processid": "EMP124",
"start": "10:30:00",
"end": "12:36:00",
"label": "Activity 2"
},
{
"processid": "EMP125",
"start": "14:00:00",
"end": "15:32:00",
"label": "Activity 1"
}
]
}
};
$scope.updateChart = function () {
if ($scope.selectedChart.chart === undefined || $scope.selectedChart.chart.id === 1) {
$scope.productivityReportData = $scope.reportsDataSource;
}
if ($scope.selectedChart.chart !== undefined && $scope.selectedChart.chart.id === 2) {
$scope.productivityReportData = $scope.reportsDataSource2;
}
};
$scope._intUpdate = _intUpdate = function(){
$scope.$apply(function(){
$scope.productivityReportData = $scope.reportsDataSource2;
});
}
}]);
function updateChart(){
_intUpdate();
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<div ng-app="myApp">
<div class="col-sm-8" ng-controller="ReportsController">
<div class="col-sm-12 page-top-actions">
<div class="col-sm-3 day-wise-report">
<input type="date" name="report" tooltip="Day" onchange="updateChart()">
</div>
<div class="col-sm-3 show-report">
<button class="btn btn-default" type="submit">Show Report</button>
</div>
</div>
<select ng-init="selectedChart.chart = chartOptions[0]; updateChart()" ng-model="selectedChart.chart"
ng-change="updateChart()" ng-options="c.name for c in chartOptions track by c.id"></select>
<div fusioncharts
id="exampleId"
width="800"
height="400"
type="gantt"
datasource="{{productivityReportData}}">
</div>
</div>