Multiple Colors For Different Status in Column Chart

I have requirement to fetch the status of requests from database and display with different color based upon status. I am using column chart and displaying the data but while providing the color for different status column i am facing problem. 

Below is some sample code:

a!columnChartField(
categories: {"Open","Started","In-Progress","Closed"},
series: {
a!chartSeries(
label: "Request Entries",
data: {10,20,30,40,50}

)
},
stacking: "NORMAL",
yAxisTitle: "Request Entries",
showLegend: false,
showTooltips: true
)

Here since i am using single chart series component i am facing problem while passing different colors for status. If am using different chart series i am not getting status labels exactly below status columns.

Can anyone help to resolve this issue.

 

Thanks in Advance!

  Discussion posts and replies are publicly visible

  • Will the following code help in your case?

    a!columnChartField(
    categories: {
    char(
    10
    )
    },
    series: a!forEach(
    items: merge(
    {
    10,
    20,
    30,
    40
    },
    {
    "BLUEGRAY",
    "GREEN",
    "RED",
    "ORANGE"
    },
    {
    "Open",
    "Started",
    "In-Progress",
    "Closed"
    }
    ),
    expression: a!chartSeries(
    label: fv!item[3],
    data: {
    fv!item[1]
    },
    color: {
    fv!item[2]
    }
    )
    )
    )
  • Hi Krishna,

    While loading the Report Build customaized CDT. Let's say.
    Below data from Data Base.
    local!data:{
    {id:1,status:"Completed"}
    {id:1,status:"Completed"},
    {id:1,status:"Completed"}
    }
    Just update Above CDT/Dictiobnary data as below.
    /*After Update the Data CDT OR Dictionary*/
    Update data by using updateCDT Function[Shred Component] OR Create New CDT With below fields
    local!data:{
    {id:1,status:"Completed",color:"Color1"}
    {id:1,status:"Completed",color:"Color2"}},
    {id:1,status:"Completed",color:"Color3"}}
    }

    Send this data to Chart series, I hope it will help!!
    Thanks!!

  • Hi Krishna
    I found one workaround, use this if you don't have any other option. Including a code below.
    If you want to show different colours to different data, you have to use multiple char series. If you use chat series, title on x-axis in independent. In this workaround you shouldn't use 'showToolTips' property because it will show unwanted things from code.
    I hope it will help!

    a!columnChartField(
    categories: {
    "Open",
    "Started",
    "In-Progress",
    "Closed"
    },
    series: {
    a!chartSeries(
    label: "Request Entries",
    data: {
    10,
    0,
    0,
    0
    }
    ),
    a!chartSeries(
    label: "Request Entries",
    data: {
    0,
    20,
    0,
    0
    }
    ),
    a!chartSeries(
    label: "Request Entries",
    data: {
    0,
    0,
    30,
    0
    }
    ),
    a!chartSeries(
    label: "Request Entries",
    data: {
    null,
    null,
    null,
    40
    }
    )
    },
    stacking: "NORMAL",
    yAxisTitle: "Request Entries",
    showLegend: false,
    showTooltips: false,
    showDataLabels: true
    )