Dynamic Stacked Column

[Frank Casali]

Hello Syncfusion,

I am trying to build a stacked column graph, dynamically. Please see attached image. This image is the graph that I want to build in Vue Js using the Syncfusion chart tools.

The data along the x-axis varies. The data along the y-axis varies. And most importantly, the number of stacked portions on any given stacked column on any given month/year varies and this is circled in the image. This is key, because I will not know ahead of time how many users will need to be mapped.

How does one build these stacked columns dynamically using the Syncfusion chart tools? Please provide a simple example in Vue.js using the Syncfusion stacked column tool.

Thanks,

Frank Casali

[email protected]

Attachment: Dynamic_Stacked_Columns_6bed9f02.zip

[Durga Gopalakrishnan]

Hi Frank, 

Greetings from Syncfusion. 

We request you to use v-for in chart series tag to render multiple series dynamically. We have prepared sample based on your requirement. Please check with below snippet and sample. 

<ejs-chart > 

        <e-series-collection> 

                <e-series v-for="d in chartData" 

                             :dataSource=d.dataSource 

                             :type=d.type  

                              :xName=d.xName  

                              :yName=d.yName 

                             :name=d.name  

                               legendShape='Circle'> 

              </e-series> 

      </e-series-collection> 

</ejs-chart> 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/StackingColumn-253459798.zip 

Please revert us if you have any concerns. 

Regards, 

Durga G

[Frank Casali]

Durga,

Please show what the data model that would populate this loop that you coded above.

Thanks,

Frank

[Durga Gopalakrishnan]

Hi Frank, 

We have used array collection to push the chart series and data points required for chart. Please check with the below snippet which is used to populate the data and this snippet is also available in App.vue file under src folder of attached sample. 

let seriesCollection =  []; 

let value = 80; 

for (let i = 1; i <= 100; i++) { 

    let data =[]; 

            for(let j = 1; j<= 4; j++){ 

              if (Math.random() > .5)  

                     value += Math.random(); 

              else 

                     value -= Math.random();                          

              data.push({ x: new Date(1960, (j + 1), j), y: Math.round(value) }); 

          } 

    let series = {  

      type : 'StackingColumn',  

      dataSource: data,                    

      xName: 'x',  

      yName: 'y', 

      name: "Series "+ i,                 

    }; 

    seriesCollection.push(series);   

} 

export default Vue.extend({ 

  data: function() { 

   return { 

              chartData: seriesCollection 

        } 

    } 

}); 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/StackingColumn-253459798.zip 

Please revert us if you have any concerns. 

Regards, 

Durga G