B4J Question [BANanoVueMaterial] ChartKick - each bar has different color?

[khng]

Hi @Mashiane, what do i need to set to enable columnchart has different color for each bar ?

I have tried

    chartbgtbg.AddXYColor("BG", "500", vm.COLOR_BLUE)
    chartbgtbg.AddXYColor("TBG", "300", vm.COLOR_RED)

second bar still shows blue color.

Any ideas?

Thanks.

 

[Mashiane]

Try and define different series

 

[Mashiane]

I will add a sub which will be a shortcut for this. i.e enables different colors in column chart (but uses as series). Something like..

Sub SetDifferentColors(seriesCurve As Boolean) As VMChartKick
    series.Initialize
    Dim exdata As List = data.Get("a")
    Dim colCnt As Int = 0
    For Each cudata As List In exdata
        If cudata.Size = 2 Then
            Dim c As String = ""
            Dim x As String = cudata.get(0)
            Dim y As String = cudata.get(1)
            If colors.size > 0 Then
                c = colors.get(colCnt)
            End If
            Dim xd As Map = CreateMap()
            xd.put(x, y)
            AddSeries(x, c, seriesCurve, xd)
        End If
        colCnt = colCnt + 1
    Next
    colors.initialize
    Return Me
End Sub

Example can then be...

Dim colChart As VMChartKick
    colChart.Initialize(vue, "colChart", Me).SetColumnChart.SetWidth("300px").SetHeight("300px")
    colChart.AddXYColor("a", "32", vue.COLOR_AMBER)
    colChart.AddXYColor("b", "46", vue.COLOR_BLACK)
    colChart.AddXYColor("c", "28", vue.COLOR_BLUE)
    colChart.AddXYColor("d", "21", vue.COLOR_BLUEGREY)
    colChart.AddXYColor("e", "20", vue.COLOR_BROWN)
    colChart.AddXYColor("f", "13", vue.COLOR_CYAN)
    colChart.AddXYColor("g", "27", vue.COLOR_GREEN)
    colChart.SetDifferentColors(False)
    cont.AddComponent(1,3, colChart.tostring)

Output..

NB: Each point in this example assumes there are 7 items this the bars showing at different locations within a point. So fewer points to draw are better.

 

[Mashiane]

In your case, the output should be:

Dim colChart As VMChartKick
    colChart.Initialize(vue, "colChart", Me).SetColumnChart.SetWidth("300px").SetHeight("300px")
    colChart.AddXYColor("BG", "500", vm.COLOR_BLUE)
    colChart.AddXYColor("TBG", "300", vm.COLOR_RED)
    colChart.SetDifferentColors(False)

I will include this in the next run, however if you are in a hury, here is the source code of the updated lib, you can compile it yourself.

Ta!

 

[khng]

Thanks, Mashiane.