Chart - change labels

OL Connect Professional
1

Hi,

I would like to change the label of values less than or equal to zeros. Does anyone know how to do this?

Chart1
Chart1723×488 4.58 KB

Thanks,

2

Hello @GB1,

What you’re asking is possible but requires some experience with JavaScript code. You’ll have to execute the following steps to achieve what you want:

NOTE: Make sure that your Template contains the Bar Chart element already, which can be inserted by going to: Insert > Business Graphic > Insert Bar Chart.

  1. Open the properties window of the Bar Chart script by double clicking on the icon of the Bar Chart script in the Standard folder in the Scripts pane.

  2. Click on the Expand button.

  3. Scroll down until you see the following JavaScript code at about line 38:

if (!json.theme && !json.colors) {
	graph.lineColor = graphs[graphIndex].color;
}
json.graphs.push(graph);
  1. Add the following line of JavaScript code…
graph.fillColorsField = "fillColor";

…just before the following line of JavaScript code…

json.graphs.push(graph);

…so that the result will become:

if (!json.theme && !json.colors) {
	graph.lineColor = graphs[graphIndex].color;
}
graph.fillColorsField = "fillColor";
json.graphs.push(graph);
  1. Scroll down until about line 49/50 on which you will find the following JavaScript code:
for (let graphIndex in graphs) {
	data[json.graphs[graphIndex].valueField] = table[recordIndex].fields[graphs[graphIndex].field];
}
json.dataProvider.push(data);
  1. Add the following lines of JavaScript code…
// Replace "color" and "green" with the colors you would like to use.
if (parseFloat(data["value-0"]) <= 0) {
	data.fillColor = "red";
} else {
	data.fillColor = "green";
}

…just after before the following line of JavaScript code:

json.dataProvider.push(data);

…so that it will become:

/**
 * The following JavaScript code has been changed at 2023-01-19
 * (changed the position of the if-else statement).
 */
for (let graphIndex in graphs) {
	data[json.graphs[graphIndex].valueField] = table[recordIndex].fields[graphs[graphIndex].field];
}
// Replace "color" and "green" with the colors you would like to use.
if (parseFloat(data["value-0"]) <= 0) {
	data.fillColor = "red";
} else {
	data.fillColor = "green"; 
}
json.dataProvider.push(data);

IMPORTANT:

  • Please note that I have executed the above steps in a Template which I’ve edited in version 2022.2.1 of the PReS Connect Designer application.
  • Please keep in mind that the above solution only works when the Standard Script is targeting a Bar Chart element and not a Pie Chart element and when it’s category field is equal to category. You will have to change different lines of JavaScript code when you would like to apply the above solution to a Pie Chart element.
3

Hi @Marten

Thanks for the code, it worked perfectly. Using the same method, how do I change the label text of that bar that I changed the color?

4

Changing the label text can also be done. For this you can execute the following steps:

  1. View the Print Context Section in Design mode.
  2. Right click on the Bar Chart element and select the Chart… option.
  3. Go to the Source tab in the Chart Properties window and change the value of the property "labelText" from "[[value]]" to something like "[[customValue]]" so that the result will look something like: "labelText": "[[customValue]]".
  4. Confirm the change by clicking on the OK button.
  5. Open the properties window of the Bar Chart script by double clicking on the icon of the Bar Chart script in the Scripts pane.
  6. Click on the Expand button.
  7. Open the Edit Script window of the just expanded Bar Chart script.
  8. Change the following lines of code (on about line 49/50)…
for (let graphIndex in graphs) {
	data[json.graphs[graphIndex].valueField] = table[recordIndex].fields[graphs[graphIndex].field];
}

…to something like this…

for (let graphIndex in graphs) {
	let customVal = table[recordIndex].fields[graphs[graphIndex].field];
	
	data[json.graphs[graphIndex].valueField] = ((Number(customVal) < 0) ? "0.00" : customVal);
	data.customValue = customVal;
}
  1. Confirm the changes by clicking on the OK button.
  2. Check the result of the changes by viewing the Print Context Section in Design mode.

IMPORTANT: Please note that the NOTE and IMPORTANT notes from my previous comment also apply here.