Chart.js – Visual Analysis Software

by Taha Sıvacı · August 7, 2018

With this free java script (Chart.js) application created by English-language software and designer Nick Downie, you can make beautiful and animated visual analysis of each other. You can start using 6 different chart types right away.

First of all, the web page for Chart.js is in perfect simplicity like the application. The documentation pages are so beautifully prepared that you can easily integrate Chart.js into your site or presentation, even if you are away from them. It will take a few minutes to master the application with the examples and details contained in the documentation.

What can you do with Chart.js?

You can present your visuals with 6 different graphics. All animated, customizable and retina compatible.

HTML 5 Based:

All charts you create with Chart.js use HTML5 elements. It works seamlessly with all modern browsers.

Simple and Flexible:

Chart.js is completely free, it is encoded in a very light structure and offers many customization possibilities.

Add Pie in Project

You first need to get the Chart.bundle.js file.
Then add the utils.js file.

File:index.html

<!doctype html>

<html>

<head>

<title>Pie Chart</title>

</head>

<body>

</div>

<button id="randomizeData">Randomize Data</button>

<button id="addDataset">Add Dataset</button>

<button id="removeDataset">Remove Dataset</button>

</body>

</html>

the above operations;

We will delete the chart object added with the remove button.
We will create a new chart object with add button
We will assign random values to the chart object with the random button

the script codes that we have created are below

var randomScalingFactor = function () {

return Math.round(Math.random() * 100);

};

var config = {

type: 'pie',

data: {

datasets: [{

data: [

randomScalingFactor(),

backgroundColor: [

window.chartColors.red,

window.chartColors.orange,

window.chartColors.yellow,

window.chartColors.green,

window.chartColors.blue,

label: 'Dataset 1'

}],

labels: [

'Red',

'Orange',

'Yellow',

'Green',

'Blue'

]

options: {

responsive: true

}

};

window.onload = function () {

var ctx = document.getElementById('chart-area').getContext('2d');

window.myPie = new Chart(ctx, config);

};

document.getElementById('randomizeData').addEventListener('click', function () {

config.data.datasets.forEach(function (dataset) {

dataset.data = dataset.data.map(function () {

return randomScalingFactor();

});

window.myPie.update();

});

var colorNames = Object.keys(window.chartColors);

document.getElementById('addDataset').addEventListener('click', function () {

var newDataset = {

backgroundColor: [],

data: [],

label: 'New dataset ' + config.data.datasets.length,

};

for (var index = 0; index < config.data.labels.length; ++index) {

newDataset.data.push(randomScalingFactor());

var colorName = colorNames[index % colorNames.length];

var newColor = window.chartColors[colorName];

newDataset.backgroundColor.push(newColor);

}

config.data.datasets.push(newDataset);

window.myPie.update();

});

document.getElementById('removeDataset').addEventListener('click', function () {

config.data.datasets.splice(0, 1);

window.myPie.update();

});

</script>

You can put the above script into html.

For Example:

<html>

<head>

<title>Pie Chart</title>

</head>

<body>

</div>

<button id="randomizeData">Randomize Data</button>

<button id="addDataset">Add Dataset</button>

<button id="removeDataset">Remove Dataset</button>

var randomScalingFactor = function() {

return Math.round(Math.random() * 100);

};

var config = {

type: 'pie',

data: {

datasets: [{

data: [

randomScalingFactor(),

backgroundColor: [

window.chartColors.red,

window.chartColors.orange,

window.chartColors.yellow,

window.chartColors.green,

window.chartColors.blue,

label: 'Dataset 1'

}],

labels: [

'Red',

'Orange',

'Yellow',

'Green',

'Blue'

]

options: {

responsive: true

}

};

window.onload = function() {

var ctx = document.getElementById('chart-area').getContext('2d');

window.myPie = new Chart(ctx, config);

};

document.getElementById('randomizeData').addEventListener('click', function() {

config.data.datasets.forEach(function(dataset) {

dataset.data = dataset.data.map(function() {

return randomScalingFactor();

});

window.myPie.update();

});

var colorNames = Object.keys(window.chartColors);

document.getElementById('addDataset').addEventListener('click', function() {

var newDataset = {

backgroundColor: [],

data: [],

label: 'New dataset ' + config.data.datasets.length,

};

for (var index = 0; index < config.data.labels.length; ++index) {

newDataset.data.push(randomScalingFactor());

var colorName = colorNames[index % colorNames.length];

var newColor = window.chartColors[colorName];

newDataset.backgroundColor.push(newColor);

}

config.data.datasets.push(newDataset);

window.myPie.update();

});

document.getElementById('removeDataset').addEventListener('click', function() {

config.data.datasets.splice(0, 1);

window.myPie.update();

});

</script>

</body>

</html>

where the array pie defined in the data fills our data

data: [

randomScalingFactor(),

You can change the colors you define in utils.js

backgroundColor: [

window.chartColors.red,

window.chartColors.orange,

window.chartColors.yellow,

window.chartColors.green,

window.chartColors.blue,

You can make settings like this in utils.js as you like.

window.chartColors = {

red: 'rgb(255, 99, 132)',

orange: 'rgb(255, 159, 64)',

yellow: 'rgb(255, 205, 86)',

green: 'rgb(75, 192, 192)',

blue: 'rgb(54, 162, 235)',

purple: 'rgb(153, 102, 255)',

grey: 'rgb(201, 203, 207)'

};

Demo

if you have question do not forget to write from the chat button next to it or from the comment

Chart.js – Visual Analysis Software