Develop Reference

How to get dynamic data from API to render a fusion Gantt chart

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.

How to customize the fusion Gantt chart?

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/

Matrix design for d3 chords

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,.

How to parse events in json format in fullcalendar?

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

Indexing last number of a JSON Object

So I have a JSON object, here it is:
{
"868": {
"header": "New limited",
"lite": "1337 Gaming Headset",
"icon": "",
"items": { "Stock": "1,337", "Price": "R$750" },
"extra": { "product": 25355494 },
"url": "",
"id": 868,
"added": 1438542256903
},
"869": {
"header": "New Face",
"lite": "Furious George",
"icon": "",
"items": { "Price": "R$200" },
"extra": { "product": 25355932 },
"url": "",
"id": 869,
"added": 1438543456863
},
"870": {
"header": "Almost sold out",
"lite": "1337 Gaming Headset",
"icon": "",
"items": { "Stock": "1,337", "Remaining": "133", "Price": "R$750" },
"extra": { "product": 25355494 },
"url": "",
"id": 870,
"added": 1438544588831
},
"871": {
"header": "Sold out",
"lite": "1337 Gaming Headset",
"icon": "",
"items": { "Price": "R$750" },
"extra": { },
"url": "",
"id": 871,
"added": 1438544704049
},
"872": {
"header": "New Hat",
"lite": "Elite Spy Eye",
"icon": "",
"items": { "Price": "R$250" },
"extra": { "product": 25356879 },
"url": "",
"id": 872,
"added": 1438545677167
}
}
I want to know how to index the last thing of this json object. I can't describe it any more but it might be the key.
I want to basically index the last object in the object, so that would be the bit where it says "872":{"header":"New Hat" near the bottom
So basically it's the biggest number I want to index. I already tried to index the last one with [4] as an index but it came up with undefined.

I suppose that you might want this:
var str = '{"868":{"header":"New limited","lite":"1337 Gaming Headset","icon":"","items":{"Stock":"1,337","Price":"R$750"},"extra":{"product":25355494},"url":"","id":868,"added":1438542256903},"869":{"header":"New Face","lite":"Furious George","icon":"","items":{"Price":"R$200"},"extra":{"product":25355932},"url":"","id":869,"added":1438543456863},"870":{"header":"Almost sold out","lite":"1337 Gaming Headset","icon":"","items":{"Stock":"1,337","Remaining":"133","Price":"R$750"},"extra":{"product":25355494},"url":"","id":870,"added":1438544588831},"871":{"header":"Sold out","lite":"1337 Gaming Headset","icon":"","items":{"Price":"R$750"},"extra":{},"url":"","id":871,"added":1438544704049},"872":{"header":"New Hat","lite":"Elite Spy Eye","icon":"","items":{"Price":"R$250"},"extra":{"product":25356879},"url":"","id":872,"added":1438545677167}}';
var obj = JSON.parse(str);
var last = Object.keys(obj).sort(function(a, b) {
return parseInt(b) - parseInt(a);
})[0]; // suppose to be "872" in this case
console.log('"' + last + '": ' + JSON.stringify(obj[last]));

var json = {
"868": {
"header": "New limited",
"lite": "1337 Gaming Headset",
"icon": "",
"items": { "Stock": "1,337", "Price": "R$750" },
"extra": { "product": 25355494 },
"url": "",
"id": 868,
"added": 1438542256903
},
"869": {
"header": "New Face",
"lite": "Furious George",
"icon": "",
"items": { "Price": "R$200" },
"extra": { "product": 25355932 },
"url": "",
"id": 869,
"added": 1438543456863
},
"870": {
"header": "Almost sold out",
"lite": "1337 Gaming Headset",
"icon": "",
"items": { "Stock": "1,337", "Remaining": "133", "Price": "R$750" },
"extra": { "product": 25355494 },
"url": "",
"id": 870,
"added": 1438544588831
},
"871": {
"header": "Sold out",
"lite": "1337 Gaming Headset",
"icon": "",
"items": { "Price": "R$750" },
"extra": {},
"url": "",
"id": 871,
"added": 1438544704049
},
"872": {
"header": "New Hat",
"lite": "Elite Spy Eye",
"icon": "",
"items": { "Price": "R$250" },
"extra": { "product": 25356879 },
"url": "",
"id": 872,
"added": 1438545677167
}
}
var keys = Object.keys(json);
var last = keys[keys.length - 1];
document.write('"' + last + '": ' + JSON.stringify(json[last]));