Search code examples
javascripthtmlangularjscanvasjs

Two chart forming instead of one chart


I am making a doughnut chart using canvas js. I am using a custom js code where I am taking a response from XML and then pointing the data points

Here when I am changing the type of chart to "line" the graph is behaving as it should but when I am changing the chart type to “pie” or “doughnut” so now instead of one chart it is giving me two charts. How it working could someone please through a light?

My code is

$scope.loadChartValue = function (data, scopes) {
        scopes.data_id = [];
        scopes.legend_text = "";
        scopes.inner_chart_data = [];

        for (var i = 0; i <= data.length; i++) {
            var arrayvalue = data[0].data[i]._attr;
            if (existsInArray(scopes.data_id, arrayvalue.label._value) == false) {
                scopes.data_id.push(arrayvalue.label._value);
            }
        }
        for (var i = 0; i < scopes.data_id.length; i++) {
            scopes.inner_chart_data = [];
            for (var j = 0; j <= data.length; j++) {
                if (data[0].data[j]._attr.label._value == scopes.data_id[i]) {

                    scopes.inner_chart_data.push({ label: data[0].data[j]._attr.label._value, y: data[0].data[j]._attr.value._value });
                    scopes.legend_text = data[0].data[j]._attr.label._value;
                }
            }
            scopes.dataset.push(
                       {
                           type: "doughnut",

                           markerType: "circle",
                           markerSize: scopes.markersize,
                           color: scopes.chart_color_value[i],
                           showInLegend: true,
                           name: scopes.legend_text,
                           legendText: scopes.legend_text,
                           dataPoints: scopes.inner_chart_data
                       }
               );
        }
        scopes.data_length = data.length / scopes.data_id.length;
    }

Solution

  • Line, Column and other chart-types supports multi-series whereas pie/doughnut is single series charts.

    You are creating multiple data-series instead of 1 data-series with multiple dataPoints. Creating single series with multiple dataPoints instead of multiple dataSeries will work fine.