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

This topic contains 1 reply, has 2 voices, and was last updated by  Vishwas R 4 months, 4 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #25242

    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 months ago by  vijay@kumar.
    #25258

    @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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.