Custom pie chart

  1. #1

    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
    Click image for larger version. 

Name:	Chart.PNG 
Views:	42 
Size:	5.3 KB 
ID:	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.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")
                                        )
    
                                        )
                            )
                        )
                 //),
                 )
                )
  2. #2
    Hello,

    Do I miss anything, is this not the very same question we're working on thread Config style pie chart?

    Quote Originally Posted by pvera
    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

    Hope you understand.
    Last edited by fabricio.murta; Mar 24, 2020 at 4:30 PM.

Similar Threads

  1. Pie Chart
    By CanopiusApplications in forum 2.x Help
    Replies: 0
    Last Post: Dec 15, 2016, 12:35 PM
  2. Problem in Pie chart
    By thanhnv2104 in forum 3.x Help
    Replies: 3
    Last Post: Jan 20, 2016, 6:25 PM
  3. How to use Pie chart with Razor
    By elkidvn in forum 2.x Help
    Replies: 2
    Last Post: Oct 28, 2012, 8:37 PM
  4. Pie Chart from Code Behind
    By devgaipp in forum 2.x Help
    Replies: 0
    Last Post: Sep 18, 2012, 12:29 PM
  5. Pie chart example
    By Gamerome in forum 2.x Help
    Replies: 2
    Last Post: Sep 09, 2012, 7:17 PM

Posting Permissions