How to display an array with textbox in a figure?

Question

I'm trying to display an array as a figure in MATLAB using coloured textbox that varies according to the value at that location.

So far, I have tried to use the MATLAB Edit Plot Tool to draw such a figure and then generate the code to see what it might look like. Here is what I came up with:

figure1=figure

annotation(figure1,'textbox',...
    [0.232125037302298 0.774079320113315 0.034810205908684 0.0410764872521246],...
    'String','HIT',...
    'FitBoxToText','off',...
    'BackgroundColor',[0.470588235294118 0.670588235294118 0.188235294117647]);

annotation(figure1,'textbox',...
    [0.27658937630558 0.774079320113315 0.034810205908684 0.0410764872521246],...
    'String',{'STAY'},...
    'FitBoxToText','off',...
    'BackgroundColor',[1 0 0]);

Here the result does not look so good. I'd like something neat and not as hard to write. Visually, I'd like something like this:

Answer 1

I've found a possible solution using the pcolor function.

Warning: I've tested it only with Octave

If you want to create a (m x n) table with, as per your picture, 4 colour, you have to:

• create an array with size (m+1 x n+1) of integers' in the1:4` range setting them according to the desired order
• call pcolor to plot the table
• adjust the size of the figure
• create your own colormap according to the desired colors
• set the `colormap'
• add the desired text using the text function
• set the tick and ticklabel of the axes

Edit to answer the comment

In the following you can find a possible implementation of the proposed solution.

The code creates two figure:

• In the first one wil be ploted the values of the input matrix
• In the second one the user defined strings

The association "color - value" is performed through the user-defined colormap.

Since in the matrix x there are 4 different possible values (it has been defined as x=randi([1 4],n_row+1,n_col+1);) the colormap has to consists of 4 RGB entry as follows.

cm=[1 0.3 0.3   % RED
    0.3 0.3 1   % BLUE
    0   1   0   % GREEN
    1   1   1]; % WHITE

Should you want to change the association, you just have to change the order of the rows of the colormap.

The comments in the code should clarify the above steps.

Code updated

% Define a rnadom data set
n_row=24;
n_col=10;
x=randi([1 4],n_row+1,n_col+1);

for fig_idx=1:2
   % Open two FIGURE
   % In the first one wil be ploted the values of the input matrix
   % In the second one the user defined strings
   figure('position',[ 1057    210    606    686])
   % Plot the matrix
   s=pcolor(x);
   set(s,'edgecolor','w','linewidth',3)
   % Define the colormap

   %cm=[1 1 1
   %    0 1 0
   %    0.3 0.3 1
   %    1 0.3 0.3];


   cm=[1 0.3 0.3   % RED
       0.3 0.3 1   % BLUE
       0   1   0   % GREEN
       1   1   1]; % WHITE

   % Set the colormap
   colormap(cm);
   % Write the text according to the color
   [r,c]=find(x(1:end-1,1:end-1) == 1);
   for i=1:length(r)
      if(fig_idx == 1)
         ht=text(c(i)+.1,r(i)+.5,num2str(x(r(i),c(i))));
      else
         ht=text(c(i)+.1,r(i)+.5,'SUR');
      end
      set(ht,'fontweight','bold','fontsize',10);
   end
   % Write the text according to the color
   [r,c]=find(x(1:end-1,1:end-1) == 2);
   for i=1:length(r)
      if(fig_idx == 1)
         ht=text(c(i)+.1,r(i)+.5,num2str(x(r(i),c(i))));
      else
         ht=text(c(i)+.1,r(i)+.5,'DBL');
      end
      set(ht,'fontweight','bold','fontsize',10);
   end
   % Write the text according to the color
   [r,c]=find(x(1:end-1,1:end-1) == 3);
   for i=1:length(r)
      if(fig_idx == 1)
         ht=text(c(i)+.1,r(i)+.5,num2str(x(r(i),c(i))));
      else
         ht=text(c(i)+.1,r(i)+.5,'HIT');
      end
      set(ht,'fontweight','bold','fontsize',10);
   end
   % Write the text according to the color
   [r,c]=find(x(1:end-1,1:end-1) == 4);
   for i=1:length(r)
      if(fig_idx == 1)
         ht=text(c(i)+.1,r(i)+.5,num2str(x(r(i),c(i))));
      else
         ht=text(c(i)+.1,r(i)+.5,'STK');
      end
      set(ht,'fontweight','bold','fontsize',10);
   end
   % Create and set the X labels
   xt=.5:10.5;
   xtl={' ';'2';'3';'4';'5';'6';'7';'8';'9';'10';'A'};
   set(gca,'xtick',xt);
   set(gca,'xticklabel',xtl,'xaxislocation','top','fontweight','bold');
   % Create and set the X labels
   yt=.5:24.5;
   ytl={' ';'Soft20';'Soft19';'Soft18';'Soft17';'Soft16';'Soft15';'Soft14';'Soft13'; ...
        '20';'19';'18';'17';'16';'15';'14';'13';'12';'11';'10';'9';'8';'7';'6';'5'};
   set(gca,'ytick',yt);
   set(gca,'yticklabel',ytl,'fontweight','bold');
   title('Dealer''s Card')
end

Table with the values in the input matrix

Table with the user-defined strings

Answer 2

This is an answer inspired by il_raffa's answer, but with also quite a few differences. There is no better or worse, it's just a matter of preferences.

Main differences are:

• it uses imagesc instead of pcolor
• it uses a second overlaid axes for fine control of the grid color/thickness/transparency etc...
• The association between value - label - color is set right at the beginning in one single table. All the code will then respect this table.

It goes like this:

%% Random data
n_row = 24;
n_col = 10;
vals = randi([1 4], n_row, n_col);

%% Define labels and associated colors
% this is your different labels and the color associated. There will be
% associated to the values 1,2,3, etc ... in the order they appear in this
% table:
Categories = {
    'SUR' , [1 0 0] % red       <= Label and color associated to value 1
    'DBL' , [0 0 1] % blue      <= Label and color associated to value 2
    'HIT' , [0 1 0] % green     <= Label and color associated to value 3
    'STK' , [1 1 1] % white     <= you know what this is by now ;-)
    } ;

% a few more settings
BgColor  = 'w' ; % Background color for various elements
strTitle = 'Dealer''s Card' ;

%% Parse settings
% get labels according to the "Categories" defined above
labels = Categories(:,1) ;
% build the colormap according to the "Categories" defined above
cmap = cell2mat( Categories(:,2) ) ;

%% Display
hfig = figure('Name',strTitle,'Color',BgColor,...
              'Toolbar','none','Menubar','none','NumberTitle','off') ;
ax1 = axes ;

imagesc(vals)     % Display each cell with an associated color
colormap(cmap);   % Set the colormap
grid(ax1,'off')   % Make sure there is no grid 

% Build and place the texts objects
textStrings = labels(vals) ;
[xl,yl]     = meshgrid(1:n_col,1:n_row);
hStrings    = text( xl(:), yl(:), textStrings(:), 'HorizontalAlignment','center');

%% Modify text color if needed
% (White text for the darker box colors)
textColors = repmat(vals(:) <= 2 ,1,3);
set(hStrings,{'Color'},num2cell(textColors,2));

%% Set the axis labels
xlabels = [ cellstr(num2str((2:10).')) ; {'A'} ] ;
ylabels = [ cellstr(num2str((5:20).')) ; cellstr(reshape(sprintf('soft %2d',[13:20]),7,[]).') ] ;

set(ax1,'XTick',        1:numel(xlabels), ...
        'XTickLabel',   xlabels, ...
        'YTick',        1:numel(ylabels), ...
        'YTickLabel',   ylabels, ... 
        'TickLength',   [0 0], ...
        'fontweight',   'bold' ,...
        'xaxislocation','top') ;

title(strTitle)

%% Prettify
ax2 = axes ; % create new axe and retrieve handle
% superpose the new axe on top, at the same position
set(ax2,'Position', get(ax1,'Position') );
% make it transparent (no color)
set(ax2,'Color','none')
% set the X and Y grid ticks and properties
set(ax2,'XLim',ax1.XLim , 'XTick',[0 ax1.XTick+0.5],'XTickLabel','' ,... 
        'YLim',ax1.YLim , 'YTick',[0 ax1.YTick+0.5],'YTickLabel','' ,...
        'GridColor',BgColor,'GridAlpha',1,'Linewidth',2,...
        'XColor',BgColor,'YColor',BgColor) ;
% Make sure the overlaid axes follow the underlying one
resizeAxe2 = @(s,e) set(ax2,'Position', get(ax1,'Position') );
hfig.SizeChangedFcn = resizeAxe2 ;

It produces the following figure:

Of course, you can replace the colors with your favorite colors. I would encourage you to play with the grid settings of the ax2 for different effects, and you can also play with the properties of the text objects (make them bold, other color etc ...). Have fun !