SharePoint Cool Charts

This series explores integration of Beautiful Charts with SharePoint.

Canvas JS

Below is a simple code which displays the data of Fruits in Chart Form.

<!DOCTYPE HTML>

<html>

<head>

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {

theme: "theme2",//theme1

title:{

text: "Basic Column Chart - CanvasJS"

animationEnabled: false, // change to true

data: [

{

// Change type to "bar", "area", "spline", "pie",etc.

type: "column",

dataPoints: [

{ label: "apple", y: 10 },

{ label: "orange", y: 15 },

{ label: "banana", y: 25 },

{ label: "mango", y: 30 },

{ label: "grape", y: 28 }

]

}

]

});

chart.render();

}

</script>

</head>

<body>

</body>

</html>

Hurray, Step 1 was done and was glad to see the chart in action. Next step was to get the values dynamically.Below is the code.

<!DOCTYPE HTML>

<html>

<head>

var dataChart = [{ label: 'apple', y: 10 },{ label: 'banana', y: 25 }];

dataChart.push({ label: 'kiwi', y: 25 });

alert(dataChart);

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {

theme: "theme2",//theme1

title:{

text: "Basic Column Chart - CanvasJS"

animationEnabled: false, // change to true

data: [

{

// Change type to "bar", "area", "spline", "pie",etc.

type: "column",

dataPoints: dataChart

}

]

});

chart.render();

}

</script>

</head>

<body>

</body>

</html>

The data section of the HTML code for Chart needs to be replaced with SharePoint List data. A list called Fruits is created in the site

Fruits
Title	Value
Apple	10
Orange	20
Kiwi	30

If the above list is not created, please create a “Fruits” list of “Custom List” type.

Then , create a page to display the chart and Add a Script Editor Web Part with the following code to display SharePoint data

Google Charts Code

Code for Google Charts can be viewed from here:
https://gist.github.com/Thangeswari/a6e2c17662a59e92bb6315e6ebab1140

SharePoint Cool Charts

Wednesday, 16 November 2016

SharePoint CSS Tricks - Rounded Corner

Monday, 14 November 2016

SharePoint Cool Chart with Canvas JS

SharePoint Cool Charts