Changing the chart data in a dashboard panel

[Rajesh GS]

Hi

I followed the example from Vue Dynamic Dashboard Layout. And inserted some panels with charts onto the dashboard layout successfully. However I was not able to update the chart data in the panel ?

could I do something like

import pietemplate from './components/pietemplate.vue'

         data: {

           panel: {}, // to hold the panel data

           pie: {return this.pietemplate;},

           ....

           ....

         }

         mounted() {

    panel = { row:0, col:0. sizeX: 1. sizeY:1, header: 'Chart 1', content: this.pie};

              ...

         }, 

         methods: {

           someButtonClickEvent() { //somewhere in code, I can update the panel chart data on button click event

               panel.content.propname = {some:new, value: here};

           }

        }

       

Regards

[Sowmiya Padmanaban]

Hi Rajesh GS,  

 

Greetings from Syncfusion support. 

 

Based on shared details, we suspect that your requirement is to change the datasource of Chart component. You can change the data source of Chart component by using datasource property. Refer the below code snippet. 

 

  methods: { 

         Change_Datasource: function(args){ 

      this.$refs.DashbordInstance.$el.querySelector(".chart-content").ej2_instances[0].series[0].dataSource = [ 

        { x: new Date(2002, 0, 1), y: 2 }, { x: new Date(2003, 0, 1), y: 1.7 }, 

        { x: new Date(2004, 0, 1), y: 1.8 }, { x: new Date(2005, 0, 1), y: 2.1 }, 

        { x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 1.6 }, 

        { x: new Date(2008, 0, 1), y: 1.5 }, { x: new Date(2009, 0, 1), y: 2.7 }, 

        { x: new Date(2010, 0, 1), y: 1.5 }, { x: new Date(2011, 0, 1), y: 2.2 } 

      ]; 

      }, 

} 

 

Refer the sample link below. 

 

https://www.syncfusion.com/downloads/support/forum/157553/ze/Dashboard_layout-1054533299.zip 

 

Refer to the below link to know more about the DashboardLayout component. 

 

UG documentation- https://ej2.syncfusion.com/vue/documentation/dashboard-layout/getting-started/ 

 

Demo link- https://ej2.syncfusion.com/vue/demos/#/material/dashboard-layout/api.html 

 

API reference- https://ej2.syncfusion.com/vue/documentation/api/dashboard-layout/ 

 

If we misunderstood your requirement, could you please share the more details regarding your requirement. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P