I want to create pie chart using plotly library. So basically my app has an option to select labels and values field from a dropdown list and there could be any data. I am passing that to construct a pie chart. Here is the problem arises- when I select proper labels and values then it is showing the pie graph and when I select some other options it is not showing anything. For that scenario I want to show some message like - "PIE CHART CANNOT BE CREATED FOR SELECTED DATAS" or something like that. How could I achieve it?
Here is the code -
let object = {};
object = this.graphService.plotPie(
this.x_axis,
this.y_axis,
this.x_axis_title,
this.y_axis_title
);
Plotly.newPlot(
"myDiv1",
object["data"],
object["layout"],
{ showSendToCloud: true },
{ responsive: true },
{ scrollZoom: true }
);
-----------------------------------------------------------------------------
plotPie(x_axis, y_axis, x_axis_title, y_axis_title) {
var data = [
{
values: [19, 26, 55] || x_axis,
labels: ["Residential", "Non-Residential", "Utility"] || y_axis,
// domain: {column: 0},
name: "Pie",
hoverinfo: "label+value",
hole: 0.4,
type: "pie"
}
];
var layout = {
// title: `Pie Graph ${x_axis_title} vs ${y_axis_title}`,
font: {
family: "Arial Black",
size: "14px"
},
height: 300,
margin: {
l: 50,
t: 40,
b: 40,
r: 40
},
legend: {
orientation: "h",
x: 0,
y: 1.3
},
xaxis: {
showgrid: true,
zeroline: false,
showline: true,
linewidth: 2,
linecolor: "black",
tickfont: {
size: 11
}
},
yaxis: {
showgrid: true,
zeroline: false,
showline: true,
linewidth: 2,
linecolor: "black",
tickfont: {
size: 11
}
},
plot_bgcolor: "white",
paper_bgcolor: "white",
showlegend: true
};
return { data, layout };
}
Actual result would be - For valid data selection it should display the pie chart and for invalid data selection it should display some Error message;