CODEWITHSUNDEEP
chartsgoogle-visualization
Ahmed Ragab
Ahmed Ragab

Reputation: 37

Google Charts - Exploded pie chart issue while having only 1 input to show

I am using google charts to make exploded pie chart below is the options that i used for the chart

learnersEngagementCtrl.myChartObject.options = {
                        legend: 'none',
                        colors: ['rgb(100, 190, 35)', 'rgb(227, 71, 35)'],
                        slices: {
                          1: { offset: 0.1 }   
                        }

                    };

and this is my data table code 

learnersEngagementCtrl.myChartObject.data = {
   "cols": [
        { id: "t", label: "Topping", type: "string" },
        { id: "s", label: "Slices", type: "number" }
           ], "rows": [
               {
                 c: [
                      { v: "Engaged users" },
                      { v: learnersEngagementCtrl.NumberOfEngagedUsers }
                     ]
                },

                {
                  c: [
                       { v: "Not Engaged users" },
                       { v: learnersEngagementCtrl.NumberOfUnEngagement}
                     ]
                  }
                 ]
                };

this is the output when i am having two inputs which have no issues

enter image description here

but when i have on input .. i face below issue

enter image description here

can you please advice me what to do to solve this issue ?

Upvotes: 1

Views: 53

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

you could only add the offset option, if both values exist.

initialize the other options... 

learnersEngagementCtrl.myChartObject.options = {
  legend: 'none',
  colors: ['rgb(100, 190, 35)', 'rgb(227, 71, 35)']
};

then add the offset if you have both values... 

if ((learnersEngagementCtrl.NumberOfEngagedUsers) && (learnersEngagementCtrl.NumberOfUnEngagement)) {
  learnersEngagementCtrl.myChartObject.options.slices = {
    1: { offset: 0.1 }
  };
} else {
  learnersEngagementCtrl.myChartObject.options.slices = null;
}

Upvotes: 1

Related Questions