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.
|
<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> dataSource = new 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();
}
}
|
|
Initial rendering |
Re-rendering |
 |
 |
