CODEWITHSUNDEEP
angularapexcharts
Castle
Castle

Reputation: 427

Im trying to fill an apex chart with real time data but it never fills

I am trying to fill an apex chart with some data that im gathering from an Angular service but something is going wrong and I dont know what is it exactly

The code to get the data:

this.getFloatingPnlData.subscribe((graph_data: any) => {

this.graph_data = graph_data; // brokerBBook brokerGlobal potentialCapture
if (this.graph_data.length > 0) {

    //Adding color property to dataset
    let g_data = [];

        this.graph_data.slice(0, 5).forEach((data, index) => {
                // let test = this.statusService.getFilteredSeries(obj.label)
                let obj = {
                    
                     x: data.floatingPnl,
                     y: data.symbol, 
                };

                g_data.push(obj);

                // console.log(obj.data)
        
        });

        this.apexdataseries = g_data;
    
    this.copyApexdataseries = g_data;
    this.setOptions();
} else {
    console.log("No data was returned");
}
});

as you can see im creating and object called "obj" and im pushing the object to an array for every iteration. enter image description here

this image shows a console.log of the array

THE PROBLEM:

When I try to set that array to the apex chart series the chart keeps empty and i dont know why:

public setOptions() {
        this.chartOptions = {
             series:[
                this.apexdataseries
              ],
              
            chart:{
            type: "bar",
            height: 400,
            toolbar:{
                show:false
            }
        },

            fill: {
            colors:["#1d77ff","#7c5efd","#07cbe8"],

            type: 'gradient',
            gradient: {
              shade: 'dark',
              type: "vertical",
              shadeIntensity: 0,
              gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
              inverseColors: true,
              opacityFrom: 0.7,
              opacityTo: 0.23,
              stops: [0, 40, 100],
              
            }
        },

        stroke:{
            show: true,
            curve: 'smooth',
            colors:["#1d77ff","#7c5efd","#07cbe8"],
            width: 1,
            dashArray: 0,      

        },

            xaxis: {
                type:'category',
                
                  labels:{
                      show: true,
                 }
            },
            plotOptions:{
                bar:{
                    barHeight: '100%',
                    borderRadius: 2,
                    colors:{
                        backgroundBarOpacity: 0.5,
                        backgroundBarRadius: 8
                    }
                },
                
            },
            title:{
                text: "Placeholder chart"
            },
            dataLabels: {
                enabled: false,
                offsetX: -6,
                style: {
                  fontSize: '12px',
                  colors:['#F44336', '#E91E63', '#9C27B0'],
                },
            }
    
        };
    }

Upvotes: 0

Views: 1498

Answers (1)

Mihai Paraschivescu
Mihai Paraschivescu

Reputation: 1548

If you go through the angular example on their site (here) you'll see that series field is an array of objects, each object having a name (string) and data (array) fields.

constructor() {
    this.chartOptions = {
      series: [
        {
          name: "My-series",
          data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }
      ],
    ............

But in your code you have

let g_data = [];
................
this.apexdataseries = g_data;

So most likely you aren't providing the expected data structure. It should fix it if you change it like this:

public setOptions() {
        this.chartOptions = {
             series:[{
                 name: 'Some-series',
                 data: this.apexdataseries
             }],

Upvotes: 1

Related Questions