B4J Library 📊 New Charts in JDashboardUI! 🎉

The upcoming release of JDashboardUI brings powerful new chart components that will take your dashboards to the next level in clarity, interactivity, and professional design:

JLineChart – Smooth and elegant line chart, perfect for showcasing trends and progress.

Dim JLineChart1 As JLineChart
    JLineChart1.Initialize(Me,"JLineChart1")
    JLineChart1.AddToParent(mainform.RootPane,10,5,340,140)
    JLineChart1.TextTitle = "Monthly Productivity"
    JLineChart1.XAxisTextColor = xui.Color_DarkGray
'    JLineChart1.ShowFill = False
'    JLineChart1.ShowValues = False
    Dim arr(6) As Float
    For i = 0 To arr.Length - 1
        arr(i) = Rnd(10, 100)
    Next
    JLineChart1.Suffix = "%"
'    JLineChart1.Color = xui.Color_RGB(80, 113, 82)
    JLineChart1.TitleColor  = xui.Color_DarkGray
    JLineChart1.SetData(Array("Jul","Ago","Sep","Oct","Nov","Dic"),arr)

JBarChart – Modern, versatile bar chart for metrics, sales, or performance indicators.

    Private BarChart As JBarChart
        BarChart.Initialize(Me, "BarChart")
        BarChart.AddToParent(mainform.RootPane, 30, 110, 250, 200)
       
    '    ' Customize properties
        BarChart.setTextTitle("Monthly Sales")
        BarChart.setColor(xui.Color_ARGB(255, 0, 128, 255)) ' Blue bars
        BarChart.setShowValues(True)
        BarChart.setSuffix("$")
        BarChart.setTitleFont(xui.CreateDefaultBoldFont(16))
        BarChart.setTitleColor(xui.Color_DarkGray)
        BarChart.setXAxisTextColor(xui.Color_Black)
       
    '    ' Set sample data
        Dim PointsX As List = Array As String("Jan", "Feb", "Mar", "Apr", "May")
        Dim Values As List = Array As Float(5000, 7000, 4500, 8200, 6000)
        BarChart.setData(PointsX, Values)

JDonutChart – Dynamic and customizable donut chart, ideal for percentages and data breakdowns.

Dim donutChart As JDonutChart
        donutChart.Initialize(Me, "donutChart")
        donutChart.AddToParent(mainform.RootPane, 10dip, 300dip, 240dip, 140dip)
        Dim values As List
        values.Initialize
        values.Add(64.2) ' Desktop
        values.Add(26.3) ' Mobile
        values.Add(9.5)  ' Tablet
       
        values.Add(64.2) ' Desktop
        values.Add(26.3) ' Mobile
        values.Add(9.5)  ' Tablet
       
        Dim labels As List
        labels.Initialize
        labels.Add("Desktop")
        labels.Add("Mobile")
        labels.Add("Tablet")
       
        labels.Add("Desktop")
        labels.Add("Mobile")
        labels.Add("Tablet")
       
       
        Dim colors As List
        colors.Initialize
        colors.Add(0xFF6A9FCD) ' Light blue
        colors.Add(0xFFF45559) ' Red
        colors.Add(0xFFFFA14F) ' Orange
       
        colors.Add(0xFF6A9FCD) ' Light blue
        colors.Add(0xFFF45559) ' Red
        colors.Add(0xFFFFA14F) ' Orange
        donutChart.SetData(values, labels, colors)

JMultiBarChart – Multiple bar series for easy comparison across datasets.

Private MultiBarChart As JMultiBarChart
           
            MultiBarChart.Initialize(Me, "MultiBarChart")
            MultiBarChart.AddToParent(mainform.RootPane, 40,110, 600, 300)
           
        '    Customize properties
            MultiBarChart.TextTitle = "Product Sales Comparison"
           
            MultiBarChart.ShowValues = True
            MultiBarChart.TitleFont = xui.CreateDefaultBoldFont(16)
            MultiBarChart.TitleColor = xui.Color_DarkGray
            MultiBarChart.XAxisTextColor = xui.Color_Black
           
            Dim PointsX As List = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
            Dim Values1 As List
            Dim Values2 As List
           
            Values1.Initialize ' Initialize Values2
            For i = 0 To 11 ' Generate different random values for Values2
                Values1.Add(Rnd(8000, 19000))
            Next
            Values2.Initialize ' Initialize Values2
            For i = 0 To 11 ' Generate different random values for Values2
                Values2.Add(Rnd(5000, 8001))
            Next
           
            Dim ValuesMulti As List = Array(Values1, Values2)
            MultiBarChart.setData(PointsX, ValuesMulti)

JMultiLineChart – Multiple line series in one chart to analyze metrics and trends side by side.

    Private JMultiLineChart1 As JMultiLineChart
           
             JMultiLineChart1.Initialize(Me, "JMultiLineChart1")
             JMultiLineChart1.AddToParent(mainform.RootPane, 40,110, 600, 300)
           
         '    Customize properties
             JMultiLineChart1.TextTitle = "Product Sales Comparison"
           
             JMultiLineChart1.ShowValues = True
             JMultiLineChart1.TitleFont = xui.CreateDefaultBoldFont(16)
             JMultiLineChart1.TitleColor = xui.Color_DarkGray
             JMultiLineChart1.XAxisTextColor = xui.Color_Black
           
             Dim PointsX As List = Array As String("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
             Dim Values1 As List
             Dim Values2 As List
           
             Values1.Initialize ' Initialize Values2
             For i = 0 To 11 ' Generate different random values for Values2
                 Values1.Add(Rnd(8000, 19000))
             Next
             Values2.Initialize ' Initialize Values2
             For i = 0 To 11 ' Generate different random values for Values2
                 Values2.Add(Rnd(5000, 8001))
             Next
           
             Dim ValuesMulti As List = Array(Values1, Values2)
             JMultiLineChart1.setData(PointsX, ValuesMulti)

With these new charts you can:

• Customize reports with flexibility and style
• Combine metrics into a single dashboard for a complete view
• Deliver modern, interactive, and professional-looking applications

All charts come with smooth animations and can be added directly from the designer or via code, with ready-to-use snippets for easy integration.


Coming very soon in the next version of JDashboardUI.
Learn more in our official store: https://b4xapp.com/item/jdashboard-ui-library-

 

[AnandGupta]

Baahh.. what line chart, bar chart !

Oh! My GOD!! Line Chart, Bar Chart !!!

Yes this is the difference when a talented one does the same thing, the boring part becomes Astonishing !

Thanks for you hard work and creativity.

 

[fernando1987]

Baahh.. what line chart, bar chart !

Oh! My GOD!! Line Chart, Bar Chart !!!

Yes this is the difference when a talented one does the same thing, the boring part becomes Astonishing !

Thanks for you hard work and creativity.

Thank you very much
I truly appreciate your words. I’m really glad you like the work, it motivates me to keep improving.

 

[fernando1987]

Baahh... ¡qué gráfico de líneas, gráfico de barras!

¡Dios mío! ¡Gráfico de líneas y de barras!

Sí, esa es la diferencia cuando alguien con talento hace lo mismo. ¡La parte aburrida se vuelve asombrosa!

Gracias por tu arduo trabajo y creatividad.

Spoiler: Preview of Charts in ElevateUI

These are some previews of how the charts look in B4A:

 

[fernando1987]

I’m happy to share that the JDashboardUI library keeps growing . This time, I’ve added two brand-new charts, introduced at the very last minute, to complement the previously announced ones (Line, Bar, Donut, MultiBar, MultiLine).

JGaugeProgress​

A sleek semi-circular gauge perfect for displaying progress, capacity, or performance values in an intuitive way.

    Dim Gauge As JGaugeProgress
    Gauge.Initialize(Me, "Gauge")
    Gauge.AddToParent(mainform.RootPane, 40, 20, 150, 150, xui.Color_RGB(255, 85, 85))
    Gauge.WidthStroke = 20
    ' Customize Gauge properties
    Gauge.Title = "Temperature"
    Gauge.TitleColor = xui.Color_DarkGray
    Gauge.TitleFontSize = 16
    Gauge.CurrentValue = 75

Features:

• Supports a single custom color defined by the user.
• Smooth needle animation.
• Configurable text and title.
• Great for dashboards that need status indicators.

---

JStackedBarChart​

A modern stacked bar chart, ideal for showing the composition of data across different categories.

im    StackedBarChart As JStackedBarChart
    StackedBarChart.Initialize(Me, "StackedBarChart")
    StackedBarChart.AddToParent(mainform.RootPane, 40, 240, 500, 300)

    ' Customize StackedBarChart properties
    StackedBarChart.setTextTitle("Monthly Sales")
    StackedBarChart.setTitleColor(xui.Color_DarkGray)
    StackedBarChart.setXAxisTextColor(xui.Color_Black)
    StackedBarChart.setValueSuffix("$")
    StackedBarChart.setBarThicknessFactor(0.7)
    StackedBarChart.setGradient(True)

    ' Set data for StackedBarChart
    Dim PointsX As List
    PointsX.Initialize
    PointsX.AddAll(Array As String("Jan", "Feb", "Mar", "Apr", "May"))

    Dim Series1, Series2, Series3 As List
    Series1.Initialize
    Series2.Initialize
    Series3.Initialize

    Series1.AddAll(Array As Float(1000, 1200, 900, 1500, 1300))
    Series2.AddAll(Array As Float(800, 600, 700, 900, 1100))
    Series3.AddAll(Array As Float(400, 500, 300, 600, 700))

    Dim ValuesMulti As List
    ValuesMulti.Initialize
    ValuesMulti.Add(Series1)
    ValuesMulti.Add(Series2)
    ValuesMulti.Add(Series3)

    Dim SeriesNames As List
    SeriesNames.Initialize
    SeriesNames.AddAll(Array As String("Product A", "Product B", "Product C"))
    StackedBarChart.setLegend(SeriesNames)

    StackedBarChart.setData(PointsX, ValuesMulti)

Features:

• Supports multiple stacked series.
• Customizable colors for each series.
• Can be integrated both through the designer or directly by code.
• Useful for metrics, sales, and resource distribution.

---

Integration​

Like the other components in JDashboardUI, these new charts can be used either from the designer or directly via code, making integration quick and simple.