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.
|
<asp:Content ID="Content1" runat="server"ContentPlaceHolderID="PropertySection">
<div id="sampleProperties">
<div class="prop-grid">
<div class="row">
<div class="col-md-3" style="width: 75px; padding-top: 3px;margin-top: 18px">
DataSource
</div>
<div class="col-md-3" style="margin-top: 17px">
<select id="dataSourceType">
<option value="today">Today</option>
<option value="thisWeek">This Week</option>
<option value="thisMonth">This Month</option>
<option value="thisyear">This Year</option>
</select>
</div>
</div>
</div>
</div>
</asp:Content> |
|
<asp:Content ID="ScriptContent" runat="server"ContentPlaceHolderID="ScriptSection">
<script>
$(function () {
$("#sampleProperties").ejPropertiesPanel();
$("#dataSourceType").ejDropDownList({
width: "110px"
}); //Dropdownlist widget
$("#dataSourceType").ejDropDownList("option", "change","DataSourceChanged"); //Event for dropdownlist changes
});
function DataSourceChanged(args) {
var ddlvalue = args.value.toLowerCase();
$(".e-pivotchart").remove();
var chartPanel = ej.buildTag("div#PivotChart1", "", {})[0].outerHTML;
$(chartPanel).appendTo("#ControlRegion")
$("#PivotChart1").ejPivotChart({
url: "../api/RelationalChart",
type: ej.PivotChart.ChartTypes.Column,
customObject:ddlvalue, //Refresh PivotChart with custom object value
commonSeriesOptions: {
enableAnimation: true,
type: ej.PivotChart.ChartTypes.Column, tooltip: { visible: true }
},
size: { height: "460px", width: "100%" }, legend: { visible: true },
load: "loadTheme"
});
}
</script>
</asp:Content> |
|
[System.Web.Http.ActionName("InitializeChart")]
[System.Web.Http.HttpPost]
public Dictionary<string, object> InitializeChart(Dictionary<string, object> jsonResult)
{
string customData = null;
if (jsonResult["customObject"].ToString() == "{}")
customData = jsonResult["customObject"].ToString();
else
customData = serializer.Deserialize<dynamic>(jsonResult["customObject"].ToString());
this.BindData(customData); // Pass the dropdownlist value here (custom object)
return PivotChart.GetJsonData(jsonResult["action"].ToString(), ProductSales.GetSalesData());
}
private void BindData(string dataSourceValue) //You can customize the datasource as per your requirement
{
if(dataSourceValue == "today")
this.PivotChart.PivotEngine.PivotRows.Add(new PivotItem { FieldMappingName ="Country", FieldHeader = "Country", TotalHeader = "Total", ShowSubTotal = false});
else if (dataSourceValue == "thisweek")
this.PivotChart.PivotEngine.PivotRows.Add(new PivotItem { FieldMappingName ="State", FieldHeader = "State", TotalHeader = "Total" });
else if (dataSourceValue == "thismonth")
this.PivotChart.PivotEngine.PivotRows.Add(new PivotItem { FieldMappingName ="Date", FieldHeader = "Date", TotalHeader = "Total" });
else if (dataSourceValue == "thisyear")
this.PivotChart.PivotEngine.PivotRows.Add(new PivotItem { FieldMappingName ="Quantity", FieldHeader = "Quantity", TotalHeader = "Total" });
else
this.PivotChart.PivotEngine.PivotRows.Add(new PivotItem { FieldMappingName ="State", FieldHeader = "State", TotalHeader = "Total" });
this.PivotChart.PivotEngine.PivotColumns.Add(new PivotItem { FieldMappingName = "Product", FieldHeader = "Product", TotalHeader = "Total", ShowSubTotal =false });
this.PivotChart.PivotEngine.PivotCalculations.Add(new PivotComputationInfo { CalculationName = "Amount", Description = "Amount", FieldHeader = "Amount", FieldName = "Amount", Format = "C", SummaryType = Syncfusion.PivotAnalysis.Base.SummaryType.DoubleTotalSum });
} |
|
<ej:PivotChart ID="PivotChart1" runat="server" Locale="en-US" Url="../api/RelationalChart" IsResponsive="true" ClientIDMode="Static">
<CommonSeriesOptions Type="Column" EnableAnimation="True" Tooltip-Visible="true"/>
<ClientSideEvents Load="loadTheme" RenderSuccess="renderSuccess"/>
<Size Width="100%" Height="460px"></Size>
</ej:PivotChart> |
|
function renderSuccess(args) {
if (!ej.isNullOrUndefined(args.getOlapReport()) && JSON.parse(args.getOlapReport()).values == "[]") //Check empty values here. You can get rows and columns information through the following codes respectively. JSON.parse(args.getOlapReport()).rows, JSON.parse(args.getOlapReport()).columns
{
$(".e-dialog, .e-clientDialog, .e-tableDlg").remove();
var dialogContent = ej.buildTag("div#" + this._id + "_tableDlg.e-tableDlg","No Records Found")[0].outerHTML;
var ejDialog = ej.buildTag("div#clientDialog.e-clientDialog", dialogContent, { "opacity": "1" }).attr("title", "Empty records")[0].outerHTML;
$(ejDialog).appendTo("#PivotChart1");
args.element.find(".e-clientDialog").ejDialog({ width: "25%", content: "#" + args._id, enableResize: false, close: ej.proxy(ej.Pivot.closePreventPanel, this) });
}
}
function DataSourceChanged(args) {
$("#PivotChart1").ejPivotChart({
//….
load: "loadTheme",
renderSuccess:"renderSuccess" // Trigger event here also
});
} |
