Color Bars That Belong To a Specific Category (e.g. Product)
Jump to navigation
Jump to search
Colors each bar in a chart red, based on recognition of the client's brand name.
To test this example:
- Open C:\Program Files\Q\Examples\Cola.Q (this may be located on a different place on your computer depending upon how Q was installed).
- Select Preferred cola in the blue dropdown.
- Change the table into a bar or column chart (this example works on both).
- Click Edit | Plot JavaScript.
- Paste the example below.
var coke_row = table.rowIndex('Coca Cola');
if (coke_row != -1) { // There is a Coca Cola bar here!
// Fetch the array of cell colors (one entry for each cell).
var colors = table.cellColors;
// For all cells on this bar/row, set the color.
for (var column = 0; column < table.numberColumns; column++)// for loop
colors[coke_row][column] = 'OrangeRed';
// Store array of cell colors we just modified.
table.cellColors = colors;
}
Note that:
- table.rowIndex('Coca Cola '); is finding the row in the table with a name of 'Coca Cola '.
- 'Coca Cola ' contains a space at the end. This is because the Label in the project does, for some strange reason, contain this space. If you were to instead use 'Coca Cola' it would not be idenfified (unless you changed the label).
- An If Statement has been used and most of the code only runs if coke_row != -1 is evaluated as true, where != , means "not equals" and the reason that -1 is being used is that rowIndex returns a value of -1 in the event that it cannot find something (and also a 0 if it finds it in the first row, a 1 in the second row, etc.).
- The For Loop goes through and makes the change to all the rows columns in the underlying table. In this example there are no columns (remember, it started as a SUMMARY of a Pick One question. However, this code ensures that if we use a Grid Question or use this code on a table with something selected in the Brown drop-down menu then all the Coca Cola columns or bars will go red).
- A list of different colors is at JavaScript Color Table.
- The object containing the colors, colors, is an Array, where each element in the array relates to a row and, this element is, initself, another Array, where each element refers to the column within the array.
- Having modified the array we then need to tell Q to use the modified array, which is what occurs with the code table.cellColors = colors;
See also
- Table JavaScript and Plot JavaScript for an explanation of how to run this code.
- Table JavaScript and Plot JavaScript Reference for technical information.
- Table JavaScript and Plot JavaScript Examples Library for other examples.
- JavaScript for information about the JavaScript programming language.
- QScript for tools for automating projects using JavaScript.
- JavaScript Variables for detail on how to create new variables in the Variables and Questions tab using JavaScript.