PDA

View Full Version : Custom pie chart



pvera
Mar 24, 2020, 3:50 PM
Hi,

I have a question, I would like to know how to customize my chart, I would like the "Attribute Name" to appear in the legend and in the "Chart Label" I want the percentage to appear.

I tried to make the change on lines 192 and 197 but it did not work, I attached the code and the result of the image.

Please need a quick response, thanks for your understanding.

Image result
25322

View


@(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.ManifestBarChar t,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(2 65)
.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).ColumnW idth(0.33).Width(58),
Html.X().NumberFieldFor(m => m.ReportRequest.INT_ENDWEEK).ID("EndWeek").MinValue(1).MaxValue(52).HideLabel(true).ColumnW idth(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).Mi nGapWidth(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.Rig ht))
.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")
)

)
)
)
//),
)
)

fabricio.murta
Mar 24, 2020, 4:26 PM
Hello,

Do I miss anything, is this not the very same question we're working on thread Config style pie chart (https://forums.ext.net/showthread.php?62863-Config-style-pie-chart)?


Please need a quick response, thanks for your understanding.

We are committed to reply you within 24 hours of your questions. We cannot guarantee anything within this range, but we always do our best to reply in the earliest. Double-posting won't help getting answers faster. Please review our forum guidelines for more information:
- Forum Guidelines (http://forums.ext.net/showthread.php?3440-Forum-Guidelines-For-Posting-New-Topics)

Hope you understand.