convert bar chart to pie chart …..i am calling canvas is .cs file based on id

[vijay@kumar]

function bindIcActivityOverviewICD() {
$.ajax({
type: “POST”,
url: “../Dashboard.aspx/GetDashboardActivityOverviewIC”,
data: ‘{ }’,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (result) {
var data = result.d;
data = $.parseJSON(data);
var Lables = [];

var workmen = {};

for (i = 0; i < data.length; i++) {
var groupWorkmen = “icd” + data[i][“ICId”];
if (!workmen[groupWorkmen]) {
workmen[groupWorkmen] = [];
}

workmen[groupWorkmen].push(data[i][“NoofWorkmen”]);
Lables.push(data[i][“PlannedDate”]);

}

var color = Chart.helpers.color;
for (var groupWorkmen in workmen) {
var barChartData = {
labels: Lables.unique(),
datasets: [{
type: ‘bar’,
label: ‘No of Workmen’,
backgroundColor: color(window.chartColors.red).alpha(7).rgbString(),
borderColor: “blue”,
data: workmen[groupWorkmen]
}
]
};
var ctx = document.getElementById(groupWorkmen).getContext(“2d”);
window.myBar = new Chart(ctx, {
type: ‘bar’,
data: barChartData,
options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: false,
text: ‘Job’
},
tooltips: {
mode: ‘index’,
},
hover: {
mode: ‘index’
},
scales: {
yAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: ‘Count’
},
ticks: {
beginAtZero: true // minimum value will be 0.
}
}]
}
}
});
}
},
failure: function () {
alert(“Failed!”);
}
});
}
Array.prototype.unique = function () {
var arr = this;
return $.grep(arr, function (v, i) {
return $.inArray(v, arr) === i;
});
}

this is .cs data
//” <div style = ‘height: 200px’ ></div> ” +
” <canvas id=’icpie” + items_dt.Rows[i][“ICId”].ToString() + “‘ style=’height: 200px; margin: 0px auto; !important’></canvas>” +
” </div> ” +
” </div>

• This topic was modified 5 years, 6 months ago by vijay@kumar.

[Vishwas R]

@vijaykumar-2,

You can change type of chart from bar to pie in CanvasJS by just changing type property from ‘bar’ to ‘pie’.

We don’t see code that includes CanvasJS in the snippet that you have shared. If you are still facing any issue in changing chart-type in CanvasJS, kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code, understand the scenario better and help you out.

—
Vishwas R
Team CanvasJS