Mar 19, 2020, 3:24 PM
[CLOSED] Config style pie chart
Last edited by fabricio.murta; Mar 26, 2020 at 7:16 PM.
.Label()
with a .Renderer()
within. There, it returns a number transformation with Ext.util.Format.number(text, '0');
; you probably want just text + "%"
.@(Html.X().Viewport()
.ID("ViewPortKPI")
.Layout(LayoutType.Border)
.PaddingSpec("10 10 10 10")
.Items(
Html.X().FormPanel()
.ID("FilterDatPanel")
.Title("Filtros")
.Region(Region.North)
.ColumnWidth(0.25)
.BodyPadding(25)
.Frame(true)
.Layout(LayoutType.Column)
.FieldDefaults((fd) =>
{
fd.MsgTarget = MessageTarget.Side;
fd.LabelWidth = 190;
fd.LabelStyle = "font-weight:bold;";
})
.Buttons(
Html.X().Button()
.Text("Filtrar")
.Disabled(true)
.FormBind(true)
.IconCls("x-fa fa-search")
.ToolTip("<b> Busca Manifiestos </br>")
.DirectEvents(de =>
{
de.Click.Url = Url.Action("FilterData");
de.Click.EventMask.ShowMask = true;
//de.Click.FormID = "FilterDatPanel";
de.Click.Success = "onSuccess(App.ManifestPieChart,App.ManifestBarChart,result);";
})
)
.Items(
Html.X().FieldContainer()
.FieldDefaults((fd) => fd.LabelAlign = LabelAlign.Left)
.DefaultAnchor("100%")
.ColumnWidth(0.25)
.Items(
Html.X().ComboBoxFor(m => m.ReportRequest.VCH_FIRSTCOLUMN)
.FieldLabel("Var. Cualitativa")
.ID("QualitativeCombo")
.EmptyText("Seleccione una variable")
.Items(Model.QualitativeList),
Html.X().DateFieldFor(m => m.ReportRequest.DAT_STARTDATE).ID("StartDateField").FieldLabel("Fecha Desde").MaxDate(DateTime.Today)
),
Html.X().FieldContainer()
.ColumnWidth(0.25)
.Items(
Html.X().ComboBoxFor(m => m.ReportRequest.VCH_FILTER)
.FieldLabel("Filtro")
.ID("FilterCombo")
.EmptyText("Seleccione una opción")
.Items(Model.OptionList),
Html.X().DateFieldFor(m => m.ReportRequest.DAT_ENDDATE).ID("EndDateField").FieldLabel("Fecha Hasta").MaxDate(DateTime.Today)
),
Html.X().FieldContainer()
.ColumnWidth(0.25)
.Items(
Html.X().ComboBoxFor(m => m.ReportRequest.VCH_SECONDCOLUMN)
.FieldLabel("Var. Cuantitativa")
.ID("QuantitativeCombo")
.Editable(false)
.QueryMode(DataLoadMode.Local)
.TriggerAction(TriggerAction.All)
.EmptyText("Seleccione una variable")
.Items(Model.QuantitativeList),
Html.X().FieldContainer()
.Layout(LayoutType.Column)
.Items(
Html.X().ComboBoxFor(m => m.ReportRequest.INT_YEAR).ID("YearsCombo").FieldLabel("Año/Sem.Desde/Sem.Hasta").Items(Model.ListYears).ColumnWidth(0.33).Width(265)
.SelectedItems(new Ext.Net.ListItem() { Value = DateTime.Now.Year.ToString() }),
Html.X().NumberFieldFor(m => m.ReportRequest.INT_STARTWEEK).ID("StartWeek").MinValue(1).MaxValue(52).HideLabel(true).ColumnWidth(0.33).Width(58),
Html.X().NumberFieldFor(m => m.ReportRequest.INT_ENDWEEK).ID("EndWeek").MinValue(1).MaxValue(52).HideLabel(true).ColumnWidth(0.33).Width(58) )
),
Html.X().FieldContainer()
.ColumnWidth(0.15)
.Items(
Html.X().NumberFieldFor(m => m.ReportRequest.INT_TOPREGISTERS).ID("TopRegisters").FieldLabel("Top registros").MinValue(1).MaxValue(1000)
)
),
Html.X().Panel()
.ID("ChartPanel")
.Region(Region.Center)
.Hidden(true)
.Layout(LayoutType.Fit)
.MarginSpec("25px 0 25px 0")
.Scrollable(ScrollableOption.Vertical)
.Items(
Html.X().Panel()
.ID("BarChartPanel")
.Width(500)
.Height(800)
.Padding(50)
.Layout("fit")
.TopBar(Html.X().Toolbar()
.Items(
Html.X().ToolbarFill(),
Html.X().Button()
.Text("Guardar Gráfico")
.Icon(Icon.Disk)
.Handler("saveChart(this,'cartesian');")
)
)
.Items(
Html.X().CartesianChart()
.ID("ManifestBarChart")
.FlipXY(true)
.InsetPadding(40)
.Height(200)
.Theme("custom-theme")
.AnimationConfig(new AnimConfig { Duration = 500, Easing = Easing.EaseOut })
.Store(Html.X().Store()
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("VCH_PROPERTY"),
Html.X().ModelField().Name("DEC_PERCENT"),
Html.X().ModelField().Name("DEC_VALUE")
)
)
)
.Axes(
Html.X().NumericAxis()
.Fields("DEC_PERCENT")
.Position(Position.Bottom)
.Grid(true)
.Maximum(100)
.Renderer(r => r.Handler = "return label.toFixed(0) + '%';"),
Html.X().CategoryAxis()
.Position(Position.Left)
.Fields("VCH_PROPERTY")
.Grid(true)
)
.Series(Html.X().BarSeries()
.XField("VCH_PROPERTY")
.YField("DEC_PERCENT")
.StyleSpec(Html.X().SeriesSprite().Opacity(0.8).MinGapWidth(10))
.HighlightConfig(Html.X().Sprite().FillStyle("#3498DB").StrokeStyle("black").LineWidth(2))
.Tooltip(Html.X().ChartTip()
.TrackMouse(true)
.Renderer(r => r.Handler = "toolTip.setHtml(record.get('VCH_PROPERTY') + ': ' + record.get('DEC_PERCENT') + '%');")
)
.Label(Html.X().ChartLabel()
.FontSize("12")
.FontFamily("Arial")
.Display(SeriesLabelDisplay.Over).Field("DEC_VALUE"))
)
),
Html.X().Panel()
.ColumnWidth(0.5)
.Width(900)
.Height(900)
.ID("P1")
.Layout(LayoutType.Fit)
.Region(Region.Center)
.TopBar(Html.X().Toolbar()
.Items(
Html.X().ToolbarFill(),
Html.X().Button()
.Text("Guardar Gráfico")
.Icon(Icon.Disk)
.Handler("saveChart(this,'polar')")
)
)
.Padding(50)
.Items(
Html.X().PolarChart()
.ID("ManifestPieChart")
.Flex(1)
.Shadow(true)
.Theme("custom-theme")
.InsetPadding(5)
.Layout(LayoutType.Fit)
.InnerPadding(50)
.LegendConfig(Html.X().ChartLegend().Dock(Dock.Right))
.Interactions(
Html.X().ItemHighlightInteraction(),
Html.X().RotateInteraction()
)
.Store(Html.X().Store()
.Model(Html.X().Model().Fields("VCH_PROPERTY", "DEC_VALUE","DEC_PERCENT"))
)
.Series(Html.X().PieSeries()
.AngleField("VCH_PROPERTY")
.ShowInLegend(true)
.Donut(20)
.HighlightMargin(80)
.Label(Html.X().ChartLabel()
.Field("DEC_PERCENT")
.Display(SeriesLabelDisplay.InsideEnd)
.FontSize("12")
.FontFamily("Arial")
.Width(50)
)
.Tooltip(Html.X().ChartTip()
//.TrackMouse(false)
//.Width(140)
//.Height(28)
.Layout(LayoutType.Fit)
.Renderer(r => r.Fn = "tipRenderer")
)
)
)
)
//),
)
)
.AngleField("VCH_PROPERTY")
in line 192..Field("DEC_PERCENT")
, you are trying to show the percentual value (of what is shown in the angle field pointed by line 192?)..Renderer(r => r.Handler = "return text + '%'")
Your test case is not runnable, we would need it to have all information to run, you didn't provide the controller code with the mock data for the fields you show in the code block. Please provide full view and controller (and model if required) of the simplified scenario, so we can run the code on our side. Notice we don't want full proprietary code, we just need a test case highlighting the feature you need and can't make work. Or as close as you could get.@model SLINETWEB.ViewModels.ManifestModule.ReportViewModel
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
}
@section scripts{
<script>
var tipRenderer = function (toolTip, storeItem, item) {
var total = 0;
var percent = storeItem.get('DEC_PERCENT');
toolTip.setTitle(storeItem.get('VCH_PROPERTY') + ': ' + percent.toFixed(2) + '%');
};
var saveChart = function (btn, chart) {
console.log("btn",btn)
console.log("CHART",chart)
Ext.MessageBox.confirm('Confirmar Descarga', '¿Desea descargar el gráfico como una imagen?', function (choice) {
if (choice === 'yes') {
btn.up('panel').down(chart).download();
}
});
};
var onSuccess = function (chart1,chart2,result) {
//console.log(grid.getStore());
console.log("data",result.data)
chart1.getStore().loadData(result.data);
//chart1.getStore().totalCount = result.total
chart2.getStore().loadData(result.data);
App.ChartPanel.show();
//chart2.getStore().totalCount = result.total
};
</script>
}
@(Html.X().ChartTheme()
.ThemeName("custom-theme")
.Colors(new string[] { "#1ABC9C","#F1C40F","#3498DB","#C0392B","#9B59B6","#FF8543","#09D0E7","#FF469A","#7CE538" })
)
@(Html.X().Viewport()
.ID("ViewPortKPI")
.Layout(LayoutType.Border)
.PaddingSpec("10 10 10 10")
.Items(
Html.X().FormPanel()
.ID("FilterDatPanel")
.Title("Filtros")
.Region(Region.North)
//.ColumnWidth(0.25)
.BodyPadding(25)
.Frame(true)
.Layout(LayoutType.Column)
.FieldDefaults((fd) =>
{
fd.MsgTarget = MessageTarget.Qtip;
fd.LabelWidth = 190;
fd.LabelStyle = "font-weight:bold;";
})
.Buttons(
Html.X().Button()
.Text("Filtrar")
.Disabled(true)
.FormBind(true)
.IconCls("x-fa fa-search")
.ToolTip("<b> Busca Manifiestos </br>")
.DirectEvents(de =>
{
de.Click.Url = Url.Action("FilterData");
de.Click.EventMask.ShowMask = true;
//de.Click.FormID = "FilterDatPanel";
de.Click.Success = "onSuccess(App.ManifestPieChart,App.ManifestBarChart,result);";
})
)
.Items(
Html.X().FieldContainer()
.FieldDefaults((fd) => fd.LabelAlign = LabelAlign.Left)
//.DefaultAnchor("100%")
.ColumnWidth(0.25)
.Items(
Html.X().ComboBoxFor(m => m.ReportRequest.VCH_FIRSTCOLUMN)
.FieldLabel("Var. Cualitativa")
.ID("QualitativeCombo")
.EmptyText("Seleccione una variable")
.Items(Model.QualitativeList),
Html.X().DateFieldFor(m => m.ReportRequest.DAT_STARTDATE).ID("StartDateField").FieldLabel("Fecha Desde").MaxDate(DateTime.Today)
),
Html.X().FieldContainer()
.ColumnWidth(0.25)
.Items(
Html.X().ComboBoxFor(m => m.ReportRequest.VCH_FILTER)
.FieldLabel("Filtro")
.ID("FilterCombo")
.EmptyText("Seleccione una opción")
.Items(Model.OptionList),
Html.X().DateFieldFor(m => m.ReportRequest.DAT_ENDDATE).ID("EndDateField").FieldLabel("Fecha Hasta").MaxDate(DateTime.Today)
),
Html.X().FieldContainer()
.ColumnWidth(0.25)
.Items(
Html.X().ComboBoxFor(m => m.ReportRequest.VCH_SECONDCOLUMN)
.FieldLabel("Var. Cuantitativa")
.ID("QuantitativeCombo")
.Editable(false)
.QueryMode(DataLoadMode.Local)
.TriggerAction(TriggerAction.All)
.EmptyText("Seleccione una variable")
.Items(Model.QuantitativeList)
.Width(381),
Html.X().FieldContainer()
.Layout(LayoutType.Column)
.Items(
Html.X().ComboBoxFor(m => m.ReportRequest.INT_YEAR).ID("YearsCombo").FieldLabel("Año/Sem.Desde/Sem.Hasta").Items(Model.ListYears).ColumnWidth(0.33).Width(265)
.SelectedItems(new Ext.Net.ListItem() { Value = DateTime.Now.Year.ToString() }),
Html.X().NumberFieldFor(m => m.ReportRequest.INT_STARTWEEK).ID("StartWeek").MinValue(1).MaxValue(52).HideLabel(true).ColumnWidth(0.33).Width(58),
Html.X().NumberFieldFor(m => m.ReportRequest.INT_ENDWEEK).ID("EndWeek").MinValue(1).MaxValue(52).HideLabel(true).ColumnWidth(0.33).Width(58) )
),
Html.X().FieldContainer()
.ColumnWidth(0.15)
.Items(
Html.X().NumberFieldFor(m => m.ReportRequest.INT_TOPREGISTERS).ID("TopRegisters").FieldLabel("Top registros").MinValue(1).MaxValue(1000)
)
),
Html.X().Panel()
.ID("ChartPanel")
.Region(Region.Center)
.Hidden(true)
.Layout(LayoutType.Fit)
.MarginSpec("25px 0 25px 0")
.Scrollable(ScrollableOption.Vertical)
.Items(
Html.X().Panel()
.ID("BarChartPanel")
//.Width(100)
//.Height(100)
.PaddingSpec("10px 20px 0 0")
.Layout(LayoutType.Fit)
.TopBar(Html.X().Toolbar()
.Items(
Html.X().ToolbarFill(),
Html.X().Button()
.Text("Guardar Gráfico")
.Icon(Icon.Disk)
.Handler("saveChart(this,'cartesian');")
)
)
.Items(
Html.X().CartesianChart()
.ID("ManifestBarChart")
.FlipXY(true)
.InsetPadding(20)
.Flex(1)
.Theme("custom-theme")
.Layout(LayoutType.Fit)
.AnimationConfig(new AnimConfig { Duration = 500, Easing = Easing.EaseOut })
.Store(Html.X().Store()
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("VCH_PROPERTY"),
Html.X().ModelField().Name("DEC_PERCENT"),
Html.X().ModelField().Name("DEC_VALUE")
)
)
)
.Axes(
Html.X().NumericAxis()
.Fields("DEC_PERCENT")
.Position(Position.Bottom)
.Grid(true)
.Maximum(100)
.Renderer(r => r.Handler = "return label.toFixed(0) + '%';"),
Html.X().CategoryAxis()
.Position(Position.Left)
.Fields("VCH_PROPERTY")
.Grid(true)
)
.Series(Html.X().BarSeries()
.XField("VCH_PROPERTY")
.YField("DEC_PERCENT")
.StyleSpec(Html.X().SeriesSprite().Opacity(0.8).MinGapWidth(5))
.HighlightConfig(Html.X().Sprite().FillStyle("#3498DB").StrokeStyle("#3498DB").LineWidth(2))
//.Renderer(r => r.Handler = "return label.toFixed(0);")
.Tooltip(Html.X().ChartTip()
.TrackMouse(true)
.Renderer(r => r.Handler = "toolTip.setHtml(record.get('VCH_PROPERTY') + ': ' + record.get('DEC_PERCENT') + '%');")
)
.Label(Html.X().ChartLabel()
.FontSize("12")
.FontFamily("Arial")
.Display(SeriesLabelDisplay.Over).Field("DEC_VALUE")
.Renderer(r => r.Handler = "return text.toFixed(2);")
)
)
)
,
Html.X().Panel()
.ColumnWidth(0.5)
//.Width(1500)
//.Height(1500)
.ID("P1")
.Layout(LayoutType.Fit)
//.Region(Region.Center)
//.Title("pAAAA")
//.Scrollable(ScrollableOption.Horizontal)
.TopBar(Html.X().Toolbar()
.Items(
Html.X().ToolbarFill(),
Html.X().Button()
.Text("Guardar Gráfico")
.Icon(Icon.Disk)
.Handler("saveChart(this,'polar')")
)
)
.PaddingSpec("0px 20px 0 0")
.Items(
Html.X().PolarChart()
.ID("ManifestPieChart")
.Flex(1)
.Shadow(true)
.Theme("custom-theme")
.InsetPadding(20)
.InnerPadding(25)
.Layout(LayoutType.Fit)
.LegendConfig(Html.X().ChartLegend().Dock(Dock.Right).Width(50))
//.PaddingSpec("0px 20px 0 0")
.Interactions(
Html.X().ItemHighlightInteraction(),
Html.X().RotateInteraction()
)
.Store(Html.X().Store()
.Model(Html.X().Model().Fields("VCH_PROPERTY", "DEC_VALUE", "DEC_PERCENT"))
)
.Series(Html.X().PieSeries()
.AngleField("DEC_PERCENT")
.ShowInLegend(true)
.Donut(20)
.HighlightMargin(20)
.Label(Html.X().ChartLabel()
.Field("VCH_PROPERTY")
.Display(SeriesLabelDisplay.InsideEnd)
.FontSize("12")
.FontFamily("Arial")
//.Width(50)
//.Renderer(r => r.Handler = "return text + '%'")
)
.Tooltip(Html.X().ChartTip()
//.TrackMouse(false)
//.Width(140)
//.Height(28)
.Layout(LayoutType.Fit)
.Renderer(r => r.Fn = "tipRenderer")
)
)
)
) //aki
//),
)
)
Controllerusing Ext.Net;
using Ext.Net.MVC;
using SLINETWEB.Helpers;
using SLINETWEB.Models.ManifestModule.Request;
using SLINETWEB.Models.ManifestModule.Response;
using SLINETWEB.Proxy.Manifest;
using SLINETWEB.ViewModels.ManifestModule;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SLINETWEB.Controllers.ManifestModule
{
public class ReportController : Controller
{
private readonly ManifestProxy _proxy;
public ReportController()
{
_proxy = new ManifestProxy();
}
// GET: Report
public ActionResult Index()
{
ReportViewModel viewModel = new ReportViewModel();
viewModel.QualitativeList = new List<ListItem>
{
new ListItem("AerolÃ*nea","VCH_AIRLINE"),
new ListItem("Producto","VCH_DESCRIPTION"),
new ListItem("Consignatario","VCH_CONSIGNEE"),
new ListItem("Destino","VCH_DESTINATION"),
new ListItem("Exportador","VCH_SHIPPER"),
new ListItem("Otro Agente","VCH_ANOTHERAGENT")
};
viewModel.QuantitativeList = new List<ListItem>
{
new ListItem("Peso Manif.","DEC_MANIFESTEDWEIGHT"),
new ListItem("Bultos Manif.","INT_MANIFESTEDPACKAGE")
};
viewModel.OptionList = new List<ListItem> {
new ListItem("Sumar","Sumar"),
new ListItem("Contar","Contar"),
};
viewModel.ListYears = UtilityMethods.GetYearsItemsManif();
return View("~/Views/ManifestModule/Report/Index.cshtml",viewModel);
}
public ActionResult FilterData(ReportRequest reportRequest)
{
if (ModelState.IsValid)
{
var response = System.Threading.Tasks.Task.Run(() => _proxy.GetReportDataAsync(reportRequest));
if (response.Result.Code != 200)
{
UtilityResponse<ReportResponse>.ResponseApiErrors(response.Result);
return this.Direct();
}
else
{
return this.Store(response.Result.List);
}
}
else
{
return this.FormPanel(ModelState);
}
}
}
}
Modelusing System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SLINETWEB.Models.ManifestModule.Response
{
public class ReportResponse
{
public string VCH_PROPERTY { get; set; }
public decimal DEC_VALUE { get; set; }
public decimal DEC_PERCENT { get; set; }
}
}
new List<ReportResponse>()
{
new ResportResponse
{
VCH_PROPERTY = "AIRLINE1",
DEC_VALUE = "8.3",
DEC_PERCENT = "20.1"
},
new ResportResponse
{
VCH_PROPERTY = "AIRLINE2",
DEC_VALUE = "13.5",
DEC_PERCENT = "49.8"
},
new ResportResponse
{
VCH_PROPERTY = "AIRLINE3",
DEC_VALUE = "11.8",
DEC_PERCENT = "30.1"
}
}
Don't you agree? Would there be anything you would change about this sample, mock data to represent your test case?