Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140131

How to check pie chart creation possible or not using with dynamic data?

$
0
0

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;


Viewing all articles
Browse latest Browse all 140131

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>