Colours In Column Chart

Goddati Venkatesh

Certified Associate Developer

9 days ago

Hi Team, I'm currently stuck at a point and would appreciate your input. I need to display different colors for different countries in a column chart. Below is the database structure I'm working with

country ListId(pK),

.countryId(int),

isAllowed(boolean)

Note: I want to show only allowed countries data in column chart.

I grouped the data by countryId, and I want to display different colors for different ranges of country IDs in a column chart. For example: Country IDs 1, 2, 3, and 4 should be shown in blue Country IDs 5, 6, 7, and 8 in yellow Country IDs 9 and 10 in another color These colors are just examples. If this approach is feasible, I will apply it to the actual requirement.

Discussion posts and replies are publicly visible

Parents

0 Zakary Melvin

Certified Senior Developer

7 days ago

You can manage the colors by using multiple a!chartSeries() like below...

{
  a!columnChartField(
    label: "Column Chart",
    categories: {"Category 1", "Category 2", "Category 3"},
    series: {
      a!chartSeries(color: "#f0f0f0", label: "Country One", data: {1, 2, 3}),
      a!chartSeries(color: "ACCENT", label: "Country Two", data: {2, 3, 4}),
    },
    stacking: "NONE",
    showLegend: true,
    showTooltips: true,
    labelPosition: "ABOVE",
    allowImageDownload: true,
    colorScheme: "RAINFOREST",
    height: "MEDIUM",
    xAxisStyle: "STANDARD",
    yAxisStyle: "STANDARD"
  )
}

0 goddativ5526 5 days ago in reply to Zakary Melvin

Zakary Melvin Thanks for reply, but link parameter is not working for above code in all bars in chart.
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel
0 Stefan Helzle
Certified Lead Developer
5 days ago in reply to goddativ5526

What exactly do you mean with "not working", and how does you code look like?
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel
0 Zakary Melvin
Certified Senior Developer
5 days ago in reply to goddativ5526

But to the point of your original question... are you now able to display multiple colors in your column chart?

We'll need some additional information to help with links in the a!chartSeries(). Like the type of link, expected outcome, and actual outcome. The Drilldown Report Pattern has an example of using the links parameter of a!chartSeries() in a column chart field.
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel

Reply

0 Zakary Melvin
Certified Senior Developer
5 days ago in reply to goddativ5526

But to the point of your original question... are you now able to display multiple colors in your column chart?

We'll need some additional information to help with links in the a!chartSeries(). Like the type of link, expected outcome, and actual outcome. The Drilldown Report Pattern has an example of using the links parameter of a!chartSeries() in a column chart field.
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel

Children

0 goddativ5526 4 days ago in reply to Zakary Melvin

a!localVariables(
/* Country data */
local!selectedcountry,
local!data: {
a!map(
country: "Inida",
value: 27,
continent: "Europe"
),
a!map(
country: "Berundi",
value: 27,
continent: "Europe"
),
a!map(
country: "Bnablooer",
value: 27,
continent: "Europe"
),
a!map(
country: "Telangana",
value: 27,
continent: "America"
),
a!map(
country: "Maharashtra",
value: 27,
continent: "America"
),
a!map(
country: "Austria",
value: 27,
continent: "Middle East"
),
a!map(
country: "Uttar",
value: 27,
continent: "Middle East"
),
a!map(
country: "Jammu",
value: 10,
continent: "Asia"
),
a!map(
country: "Kerla",
value: 10,
continent: "Asia"
),
a!map(
country: "Afghanistan",
value: 10,
continent: "Oceania"
),
a!map(
country: "Belgium",
value: 15,
continent: "Oceania"
),
a!map(
country: "China",
value: 15,
continent: "Eurasia"
),
a!map(
country: "Dubai",
value: 15,
continent: "Eurasia"
),
a!map(
country: "Narva",
value: 10,
continent: "Asia"
),
a!map(
country: "odissa",
value: 10,
continent: "Asia"
),
a!map(
country: "mumbai",
value: 10,
continent: "Asia"
),
a!map(
country: "South Korea",
value: 27,
continent: "Asia"
),
a!map(
country: "Nigeria",
value: 27,
continent: "Africa"
),
a!map(
country: "Pooland",
value: 27,
continent: "Africa"
),
a!map(
country: "USSR",
value: 27,
continent: "Africa"
)
},
/* Extract country names */
local!countries: index(local!data, "country", {}),
/* Define continents */
local!continents: { "Europe", "Asia", "Africa","America","Eurasia","Oceania","Middle East"},
/* Define colors for each continent */
local!continentColors: {
"Europe": "#4DA6FF",
/* Light blue */
"Asia": "#CC6666",
/* Brownish red */
"Africa": "#5C6670"/* Dark gray */

},
/* Create one chartSeries per continent */
local!series:
a!forEach(
items: local!continents,
expression: a!localVariables(
local!continent: fv!item,
a!chartSeries(
label: local!continent,
data: a!forEach(
items: local!data,
expression: if(
fv!item.continent = local!continent,
fv!item.value,
null()
)
),
color: local!continentColors[local!continent]
)
)
),
/* Render the chart */
a!columnChartField(
label: "All Countries",
categories: local!countries,
series: a!forEach(
items: local!continents,
expression: a!localVariables(
local!continent: fv!item,
local!datasubset:a!forEach(
items: local!data,
expression: if(
fv!item.continent = local!continent,
fv!item.value,
null()
)
),
local!links:a!forEach(
items: local!data,
expression: if(
fv!item.continent = local!continent,
fv!item.country,
null()
)
),

a!chartSeries(
label: local!continent,
data: local!datasubset,
color: local!continentColors[local!continent],
links: a!forEach(
items: local!links,
expression: a!dynamicLink(
saveInto: a!save(local!selectedcountry,fv!item)
)
)
)
)
),
xAxisTitle: "Countries",
yAxisTitle: "Value",
showLegend: true
)
)

Actual requirement is to show countries oin the chart and colour should be different for each continent countries,up on clicking on any bar it should save country Name ,Here i acheived all functional requirements but that bar and bottom label is not aligning in same line Can anyone help in this.if any other way to implement this feature please suggest me.
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel

0 goddativ5526 4 days ago in reply to Zakary Melvin

a!localVariables(
  /* Country data */
  local!selectedcountry,
  local!data: {
    a!map(
      country: "Inida",
      value: 27,
      continent: "Europe"
    ),
    a!map(
      country: "Berundi",
      value: 27,
      continent: "Europe"
    ),
    a!map(
      country: "Bnablooer",
      value: 27,
      continent: "Europe"
    ),
    a!map(
      country: "Telangana",
      value: 27,
      continent: "America"
    ),
    a!map(
      country: "Maharashtra",
      value: 27,
      continent: "America"
    ),
    a!map(
      country: "Austria",
      value: 27,
      continent: "Middle East"
    ),
    a!map(
      country: "Uttar",
      value: 27,
      continent: "Middle East"
    ),
    a!map(
      country: "Jammu",
      value: 10,
      continent: "Asia"
    ),
    a!map(
      country: "Kerla",
      value: 10,
      continent: "Asia"
    ),
    a!map(
      country: "Afghanistan",
      value: 10,
      continent: "Oceania"
    ),
    a!map(
      country: "Belgium",
      value: 15,
      continent: "Oceania"
    ),
    a!map(
      country: "China",
      value: 15,
      continent: "Eurasia"
    ),
    a!map(
      country: "Dubai",
      value: 15,
      continent: "Eurasia"
    ),
    a!map(
      country: "Narva",
      value: 10,
      continent: "Asia"
    ),
    a!map(
      country: "odissa",
      value: 10,
      continent: "Asia"
    ),
    a!map(
      country: "mumbai",
      value: 10,
      continent: "Asia"
    ),
    a!map(
      country: "South Korea",
      value: 27,
      continent: "Asia"
    ),
    a!map(
      country: "Nigeria",
      value: 27,
      continent: "Africa"
    ),
    a!map(
      country: "Pooland",
      value: 27,
      continent: "Africa"
    ),
    a!map(
      country: "USSR",
      value: 27,
      continent: "Africa"
    )
  },
  /* Extract country names */
  local!countries: index(local!data, "country", {}),
  /* Define continents */
  local!continents: { "Europe", "Asia", "Africa","America","Eurasia","Oceania","Middle East"},
  /* Define colors for each continent */
  local!continentColors: {
    "Europe": "#4DA6FF",
    /* Light blue */
    "Asia": "#CC6666",
    /* Brownish red */
    "Africa": "#5C6670"/* Dark gray */

  },
  /* Create one chartSeries per continent */
  local!series: 
  a!forEach(
    items: local!continents,
    expression: a!localVariables(
      local!continent: fv!item,
      a!chartSeries(
        label: local!continent,
        data: a!forEach(
          items: local!data,
          expression: if(
            fv!item.continent = local!continent,
            fv!item.value,
            null()
          )
        ),
        color: local!continentColors[local!continent]
      )
    )
  ),
  /* Render the chart */
  a!columnChartField(
    label: "All Countries",
    categories: local!countries,
    series:  a!forEach(
      items: local!continents,
      expression: a!localVariables(
        local!continent: fv!item,
        local!datasubset:a!forEach(
          items: local!data,
          expression: if(
            fv!item.continent = local!continent,
            fv!item.value,
            null()
          )
        ),
        local!links:a!forEach(
          items: local!data,
          expression: if(
            fv!item.continent = local!continent,
            fv!item.country,
            null()
          )
        ),
        
        a!chartSeries(
          label: local!continent,
          data: local!datasubset,
          color: local!continentColors[local!continent],
          links: a!forEach(
            items: local!links,
            expression: a!dynamicLink(
              saveInto: a!save(local!selectedcountry,fv!item)
            )
          )
        )
      )
    ),
    xAxisTitle: "Countries",
    yAxisTitle: "Value",
    showLegend: true
  )
)

0 Goddati Venkatesh

Certified Associate Developer

4 days ago in reply to Zakary Melvin

Hi Stefan Helzle ,Zakary Melvin ,Thanks for your time

a!localVariables(
  /* Country data */
  local!selectedcountry,
  local!data: {
    a!map(
      country: "Inida",
      value: 27,
      continent: "Europe"
    ),
    a!map(
      country: "Berundi",
      value: 27,
      continent: "Europe"
    ),
    a!map(
      country: "Bnablooer",
      value: 27,
      continent: "Europe"
    ),
    a!map(
      country: "Telangana",
      value: 27,
      continent: "America"
    ),
    a!map(
      country: "Maharashtra",
      value: 27,
      continent: "America"
    ),
    a!map(
      country: "Austria",
      value: 27,
      continent: "Middle East"
    ),
    a!map(
      country: "Uttar",
      value: 27,
      continent: "Middle East"
    ),
    a!map(
      country: "Jammu",
      value: 10,
      continent: "Asia"
    ),
    a!map(
      country: "Kerla",
      value: 10,
      continent: "Asia"
    ),
    a!map(
      country: "Afghanistan",
      value: 10,
      continent: "Oceania"
    ),
    a!map(
      country: "Belgium",
      value: 15,
      continent: "Oceania"
    ),
    a!map(
      country: "China",
      value: 15,
      continent: "Eurasia"
    ),
    a!map(
      country: "Dubai",
      value: 15,
      continent: "Eurasia"
    ),
    a!map(
      country: "Narva",
      value: 10,
      continent: "Asia"
    ),
    a!map(
      country: "odissa",
      value: 10,
      continent: "Asia"
    ),
    a!map(
      country: "mumbai",
      value: 10,
      continent: "Asia"
    ),
    a!map(
      country: "South Korea",
      value: 27,
      continent: "Asia"
    ),
    a!map(
      country: "Nigeria",
      value: 27,
      continent: "Africa"
    ),
    a!map(
      country: "Pooland",
      value: 27,
      continent: "Africa"
    ),
    a!map(
      country: "USSR",
      value: 27,
      continent: "Africa"
    )
  },
  /* Extract country names */
  local!countries: index(local!data, "country", {}),
  /* Define continents */
  local!continents: { "Europe", "Asia", "Africa","America","Eurasia","Oceania","Middle East"},
  /* Define colors for each continent */
  local!continentColors: {
    "Europe": "#4DA6FF",
    /* Light blue */
    "Asia": "#CC6666",
    /* Brownish red */
    "Africa": "#5C6670"/* Dark gray */

  },
  /* Create one chartSeries per continent */
  local!series: 
  a!forEach(
    items: local!continents,
    expression: a!localVariables(
      local!continent: fv!item,
      a!chartSeries(
        label: local!continent,
        data: a!forEach(
          items: local!data,
          expression: if(
            fv!item.continent = local!continent,
            fv!item.value,
            null()
          )
        ),
        color: local!continentColors[local!continent]
      )
    )
  ),
  /* Render the chart */
  a!columnChartField(
    label: "All Countries",
    categories: local!countries,
    series:  a!forEach(
      items: local!continents,
      expression: a!localVariables(
        local!continent: fv!item,
        local!datasubset:a!forEach(
          items: local!data,
          expression: if(
            fv!item.continent = local!continent,
            fv!item.value,
            null()
          )
        ),
        local!links:a!forEach(
          items: local!data,
          expression: if(
            fv!item.continent = local!continent,
            fv!item.country,
            null()
          )
        ),
        
        a!chartSeries(
          label: local!continent,
          data: local!datasubset,
          color: local!continentColors[local!continent],
          links: a!forEach(
            items: local!links,
            expression: a!dynamicLink(
              saveInto: a!save(local!selectedcountry,fv!item)
            )
          )
        )
      )
    ),
    xAxisTitle: "Countries",
    yAxisTitle: "Value",
    showLegend: true
  )
)