Just wondering if anyone has done this and how did they go?
What will be the best way to present a dashboard/charts in sharepoint online from data coming from a list or sql azure?

Thanks for any info and tips in advance

https://github.com/nnnick/Chart.js

Add reference to JQuery and Chart.js

Create a field called Status in your list with following values "Completed", "In Progress" and "Not Started"

Sample code for Chart
$(document).ready(function () {
    getItems("caml", "list title");
});

window.onload = function () {
    renderChart();
}

var doughnutData = [{ value: 0, color: "#5AD3D1", highlight: "#5AD3D1", label: "Completed" },
                    { value: 0, color: "#FFC870", highlight: "#FFC870", label: "In Progress" },
                    { value: 0, color: "#FF5A5E", highlight: "#FF5A5E", label: "Not Started" }
];

function renderChart() {
    var ctx = document.getElementById("canvas1").getContext("2d");
    window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, { responsive: true });
}

function getItems(caml, listName) {
    var endpoint = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('" + listName + "')/GetItems";
    var requestData = { query: { __metadata: { 'type': 'SP.CamlQuery' }, ViewXml: caml } };
    $.ajax({
        url: endpoint,
        type: "POST",
        data: JSON.stringify(requestData),
        headers: {
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "Accept": "application/json; odata=verbose",
            "Content-Type": "application/json; odata=verbose"
        },
        success: successHandler,
        error: errorHandler
    });
}

function successHandler(data) {
    getChartData(data.d.results);
}
//Error
function errorHandler(data, errorCode, errorMessage) {
    alert(errorMessage);
}

function getChartData(data) {
    if (data.length !== 0) {
        for (var i = 0; i < data.length; i++) {
            var arr = 0;
            if (data[i]['Status'] == "Completed") {
                arr = 0;
            }
            else if (data[i]['Status'] == "In Progress") {
                arr = 1;
            }
            else if (data[i]['Status'] == "Not Started") {
                arr = 2;
            }
            doughnutData[arr].value = doughnutData[arr].value + 1;
        }
    }
}

Thanks Sundur I have actually chart plugins before.
I was wondering if there is a plugin in SharePoint Online that could do it.

Also can I retrieve sql azure data as API in sharepoint online

Cheers

Hi Patrick,

I am not sure about the built-in plugin for charts in SharePoint online.

You can create External content type to pull data from SQL Azure and can use BDC REST service 

https://support.office.com/en-us/article/Make-an-External-List-from-a-SQL-Azure-table-with-Business-Connectivity-Services-and-Secure-Store-466f3809-fde7-41f2-87f7-77d9fdadfc95

This may be useful for requirement 

https://support.office.com/en-us/article/Business-intelligence-in-Excel-and-Excel-Services-SharePoint-Server-2013-2740f10c-579d-4b40-a1d9-7beb5d38547c?CTT=1&CorrelationId=b1080a10-f6df-4458-a34c-4ac4ce71172a&ui=en-US&rs=en-US&ad=US

Thanks Sundarbalu
So if the content is in Sql Azure via BCS I can still use REST?
Cheers

Patrick

Thanks but this is SharePoint Online