How to parse events in json format in fullcalendar? - javascript

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

Related

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 change Gantt Chart data based on date selected

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>

Detect track playing or current time of mixcloud embed?

I have a mixcloud show embedded on my page.
For example:
<iframe width="660" height="180" src="//www.mixcloud.com/widget/iframe/?feed=http%3A%2F%2Fwww.mixcloud.com%2Fdjzhao%2Fjuju-juke-shangaan-footwork%2F&embed_uuid=cd8d4d1b-9940-4548-9aff-1f411f5480c0&replace=0&hide_cover=1&embed_type=widget_standard&hide_tracklist=1" frameborder="0"></iframe>
I'd like to be able to change the text displayed depending on which track is currently being played. Is there a way to detect which track is being played or the current play time and change the text accordingly?
The mixcloud api can return the information for a cloudcast that includes the track list and time at which they start like so:
{
"description": "Given I'm on the Mixcloud team, I thought I really should have something up here. Here's an hour's worth of funky music to get you ready for partying, enjoy the music and ignore the quality (or lack thereof) of the DJ!",
"tags": [
{
"url": "http://www.mixcloud.com/tag/funky-house/",
"name": "Funky house",
"key": "/tag/funky-house/"
},
{
"url": "http://www.mixcloud.com/tag/funk/",
"name": "Funk",
"key": "/tag/funk/"
},
{
"url": "http://www.mixcloud.com/tag/soul/",
"name": "Soul",
"key": "/tag/soul/"
}
],
"play_count": 1864,
"user": {
"url": "http://www.mixcloud.com/spartacus/",
"username": "spartacus",
"name": "Spartacus",
"key": "/spartacus/",
"pictures": {
"medium": "http://images-mix.netdna-ssl.com/w/100/h/100/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg",
"320wx320h": "http://images-mix.netdna-ssl.com/w/320/h/320/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg",
"extra_large": "http://images-mix.netdna-ssl.com/w/600/h/600/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg",
"large": "http://images-mix.netdna-ssl.com/w/300/h/300/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg",
"640wx640h": "http://images-mix.netdna-ssl.com/w/640/h/640/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg",
"medium_mobile": "http://images-mix.netdna-ssl.com/w/80/h/80/q/75/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg",
"small": "http://images-mix.netdna-ssl.com/w/25/h/25/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg",
"thumbnail": "http://images-mix.netdna-ssl.com/w/50/h/50/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg"
}
},
"key": "/spartacus/party-time/",
"created_time": "2009-08-02T16:55:01Z",
"audio_length": 3361,
"slug": "party-time",
"favorite_count": 11,
"listener_count": 90,
"name": "Party Time",
"url": "http://www.mixcloud.com/spartacus/party-time/",
"pictures": {
"medium": "http://images-mix.netdna-ssl.com/w/100/h/100/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png",
"320wx320h": "http://images-mix.netdna-ssl.com/w/320/h/320/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png",
"extra_large": "http://images-mix.netdna-ssl.com/w/600/h/600/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png",
"large": "http://images-mix.netdna-ssl.com/w/300/h/300/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png",
"640wx640h": "http://images-mix.netdna-ssl.com/w/640/h/640/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png",
"medium_mobile": "http://images-mix.netdna-ssl.com/w/80/h/80/q/75/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png",
"small": "http://images-mix.netdna-ssl.com/w/25/h/25/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png",
"thumbnail": "http://images-mix.netdna-ssl.com/w/50/h/50/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png"
},
"updated_time": "2013-10-15T13:48:53Z",
"comment_count": 3,
"sections": [
{
"track": {
"url": "http://www.mixcloud.com/track/jazztronik/samurai-12-mix/",
"artist": {
"url": "http://www.mixcloud.com/artist/jazztronik/",
"name": "Jazztronik",
"key": "/artist/jazztronik/",
"slug": "jazztronik"
},
"name": "Samurai (12\" Mix)",
"key": "/track/jazztronik/samurai-12-mix/",
"slug": "samurai-12-mix"
},
"position": 1,
"start_time": 0,
"section_type": "track"
},
{
"track": {
"url": "http://www.mixcloud.com/track/time-of-your-life/refresher/",
"artist": {
"url": "http://www.mixcloud.com/artist/time-of-your-life/",
"name": "Time of your life",
"key": "/artist/time-of-your-life/",
"slug": "time-of-your-life"
},
"name": "Refresher",
"key": "/track/time-of-your-life/refresher/",
"slug": "refresher"
},
"position": 2,
"start_time": 416,
"section_type": "track"
},
{
"track": {
"url": "http://www.mixcloud.com/track/dutch/my-time-feat-crystal-waters/",
"artist": {
"url": "http://www.mixcloud.com/artist/dutch/",
"name": "Dutch",
"key": "/artist/dutch/",
"slug": "dutch"
},
"name": "My time (feat. Crystal Waters)",
"key": "/track/dutch/my-time-feat-crystal-waters/",
"slug": "my-time-feat-crystal-waters"
},
"position": 3,
"start_time": 716,
"section_type": "track"
},
{
"track": {
"url": "http://www.mixcloud.com/track/minimal-funk/definition-of-house/",
"artist": {
"url": "http://www.mixcloud.com/artist/minimal-funk/",
"name": "Minimal Funk",
"key": "/artist/minimal-funk/",
"slug": "minimal-funk"
},
"name": "Definition of House",
"key": "/track/minimal-funk/definition-of-house/",
"slug": "definition-of-house"
},
"position": 4,
"start_time": 1061,
"section_type": "track"
},
{
"track": {
"url": "http://www.mixcloud.com/track/mint-royale/i-dont-know/",
"artist": {
"url": "http://www.mixcloud.com/artist/mint-royale/",
"name": "Mint Royale",
"key": "/artist/mint-royale/",
"slug": "mint-royale"
},
"name": "I dont know",
"key": "/track/mint-royale/i-dont-know/",
"slug": "i-dont-know"
},
"position": 5,
"start_time": 1500,
"section_type": "track"
},
{
"track": {
"url": "http://www.mixcloud.com/track/michael-jackson/thrill-her/",
"artist": {
"url": "http://www.mixcloud.com/artist/michael-jackson/",
"name": "Michael Jackson",
"key": "/artist/michael-jackson/",
"slug": "michael-jackson"
},
"name": "Thrill Her",
"key": "/track/michael-jackson/thrill-her/",
"slug": "thrill-her"
},
"position": 6,
"start_time": 1763,
"section_type": "track"
},
{
"track": {
"url": "http://www.mixcloud.com/track/elio-isola/happy-featcharlise/",
"artist": {
"url": "http://www.mixcloud.com/artist/elio-isola/",
"name": "Elio Isola",
"key": "/artist/elio-isola/",
"slug": "elio-isola"
},
"name": "Happy (feat.Charlise)",
"key": "/track/elio-isola/happy-featcharlise/",
"slug": "happy-featcharlise"
},
"position": 7,
"start_time": 2123,
"section_type": "track"
},
{
"track": {
"url": "http://www.mixcloud.com/track/erick-morillo-harry-romero-jose-nunez-feat-jessica-eve/dancin/",
"artist": {
"url": "http://www.mixcloud.com/artist/erick-morillo-harry-romero-jose-nunez-feat-jessica-eve/",
"name": "Erick Morillo, Harry Romero & Jose Nunez feat. Jessica Eve",
"key": "/artist/erick-morillo-harry-romero-jose-nunez-feat-jessica-eve/",
"slug": "erick-morillo-harry-romero-jose-nunez-feat-jessica-eve"
},
"name": "Dancin",
"key": "/track/erick-morillo-harry-romero-jose-nunez-feat-jessica-eve/dancin/",
"slug": "dancin"
},
"position": 8,
"start_time": 2442,
"section_type": "track"
},
{
"track": {
"url": "http://www.mixcloud.com/track/kosheen/all-in-my-head/",
"artist": {
"url": "http://www.mixcloud.com/artist/kosheen/",
"name": "Kosheen",
"key": "/artist/kosheen/",
"slug": "kosheen"
},
"name": "All in my head",
"key": "/track/kosheen/all-in-my-head/",
"slug": "all-in-my-head"
},
"position": 9,
"start_time": 2738,
"section_type": "track"
}
]
}
Thanks for any help
MixCloud released in 2014 a JavaScript API/SDK which communicates with the iframe:
https://www.mixcloud.com/developers/widget/
It uses window.postMessage for all communication with the iframe.
For example:
<iframe id="mixcloud-iframe" width="100%" height="60" src="https://www.mixcloud.com/widget/iframe/?feed=https://www.mixcloud.com/thisgreedypig/the-pigs-ear-money-ex-records-show-case/&hide_cover=1&mini=1&light=1" frameborder="0"></iframe>
<script src="//widget.mixcloud.com/media/js/widgetApi.js" type="text/javascript"></script>
<script type="text/javascript">
var widget = Mixcloud.PlayerWidget(document.getElementById('mixcloud-iframe'));
function togglePlayPause () {
// handle the ui
}
widget.ready.then(function() {
widget.events.pause.on(togglePlayPause);
widget.events.play.on(togglePlayPause);
});
</script>

Categories

Resources