We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

re randering chart when data updated

Thread ID:

Created:

Updated:

Platform:

Replies:

145055 Jun 4,2019 12:26 PM UTC Jun 6,2019 04:18 AM UTC Blazor 3
loading
Tags: Charts
Moshe Habas
Asked On June 4, 2019 12:26 PM UTC

I create a simple pie chart and load the information with the dataSource object.

When the information changes within the object the graph is not updated
Is there a way to make the graph re-create itself?

my code:

<EjsAccumulationChart id="container" theme="AccumulationTheme.Bootstrap4" enableAnimation="false" center="@piecenter" tooltip="@tooltip" legendsettings="@legendsettings">
     <AccumulationSeries>
          <AccumulationChartAccumulationSeries dataSource="@dataSource" palettes="@palettes" radius="80%" innerradius="50%" xName="xValue" yName="yValue" name="-Data-"                                    explodeIndex="0" explode="true" xplodeOffset="10%" dataLabel="@dataLabel">
          </AccumulationChartAccumulationSeries>
     </AccumulationSeries>
</EjsAccumulationChart>
@functions{

          public class PieData1
          {
               public string xValue;
               public double yValue;
          }
          public Object tooltip = new { enable = true };
          public object piecenter = new { x = "50%", y = "50%" };
          public object legendsettings = new { visible = false };
public object dataLabel = new { name = "xValue", visible = true, position = "Outside" };
public string[] palettes = new string[4] { "#62c1e9", "#4b8acb", "#ac3895", "#eeeeee" };

          public object dataSource;
dataSource = new List<object> {
            new PieData1 { xValue = "Opportunity",    yValue = opportunity},
            new PieData1 { xValue = "Deal Won",  yValue = won},
            new PieData1 { xValue = "Deal Lost", yValue = lost},
        };
          

}


Kalaimathi Chellaiah [Syncfusion]
Replied On June 5, 2019 09:04 AM UTC

Hi Moshe, 
 
Greetings from Syncfusion. 
  
We have analysed your query with the attached code snippet. As of now, we don’t have these binding support in blazor and will fix this binding issue in our Volume 2 2019 which is expected to be rolled out at the end of June. However, we will suggest an alternate solution to resolve this problem in work around. In that, we have changed dataSource value and call dataBind using button click for re-render the chart. The chart is updating properly. Please find below code snippet and sample, 
 
Code snippet: 
<EjsAccumulationChart id="container" ref="datachart" theme="AccumulationTheme.Bootstrap4" enableAnimation="false" center="@piecenter" tooltip="@tooltip" legendsettings="@legendsettings"> 
     <AccumulationSeries> 
<AccumulationChartAccumulationSeries dataSource="@dataSource" palettes="@palettes" radius="80%" innerradius="50%" xName="xValue" yName="yValue" name="-Data-"  explodeIndex="0" explode="true" explodeOffset="10%" dataLabel="@dataLabel"> 
          </AccumulationChartAccumulationSeries> 
     </AccumulationSeries> 
</EjsAccumulationChart> 
 
<button onclick="@onClick"> Click to Change</button> 
 
@functions{ 
    EjsAccumulationChart datachart; 
    public class PieData1 
    { 
        public string xValue; 
       public double yValue; 
    } 
    private static int opportunity { get; set; } = 26; 
    private static int won { get; set; } = 36; 
    private static int lost { get; set; } = 26; 
        public Object tooltip = new { enable = true }; 
        public object piecenter = new { x = "50%", y = "50%" }; 
        public object legendsettings = new { visible = false }; 
        public object dataLabel = new { name = "xValue", visible = true, position = "Outside" }; 
        public string[] palettes = new string[4] { "#62c1e9", "#4b8acb", "#ac3895", "#eeeeee" }; 
 
    List<PieData1> dataSourcenew List < PieData1 > { 
            new PieData1 { xValue = "Opportunity", yValue = opportunity}, 
            new PieData1 { xValue = "Deal Won",  yValue = won}, 
            new PieData1 { xValue = "Deal Lost", yValue = lost}, 
 
    }; 
    private void onClick() { 
        opportunity = 4; 
        won = 1; 
        lost = 30; 
     this.dataSource[0].yValue = opportunity; 
     this.dataSource[1].yValue = won; 
     this.dataSource[2].yValue = lost; 
    this.datachart.DataBind(); 
    } 
} 
 
 
Screenshots: 
Initial rendering 
Re-rendering 
 
 
 
 
Kindly check the above sample and code snippet and revert us with more information, if you have any concerns. 
  
Regards, 
Kalai. 
 


Moshe Habas
Replied On June 5, 2019 11:08 AM UTC

Thank you very much it works now.

Kalaimathi Chellaiah [Syncfusion]
Replied On June 6, 2019 04:18 AM UTC

Hi Moshe, 
  
Most welcome. Kindly get in touch with us, if you would require further assistance. We are always happy in assisting you.   
Thanks,   
Kalai.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon