Mar 24, 2020, 3:50 PM
Custom pie chart
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
View
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
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.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")
)
)
)
)
//),
)
)