Added Text Views fail to display on modified Bar Chart.

Question

Please advice on how to implementation added index below bar chart and value on bar chart.

See code below:

slot Monitor::Barchart.updateChart

// Some common parameters for the calculation.
var int32 barSize = BarSize;
var rect bounds   = Outline.Bounds;

// Calculate the available space and the distance between two adjacent bars.
// Thereby ensure that the bars are always fully visible. Accordingly reduce
// the space by the size of a single bar.
var float rangeX   = bounds.w - barSize;
var float rangeY   = bounds.h - barSize - IndexSize;
var float ofsX     = ( NoOfValues > 1 )? rangeX / ( NoOfValues - 1 ) : 0;
var float ofsY     = ( NoOfValues > 1 )? rangeY / ( NoOfValues - 1 ) : 0;
var int32 i;

// These views are managed by the Outline. Search in the Outline for already existing views.
var Views::Rectangle view = (Views::Rectangle)Outline.FindNextView( null, Core::ViewState[]);

// Text views
var Views::Text valueText = new Views::Text;
var Views::Text idxText = new Views::Text;

// Now process all bars. Adapt the size/position/color of each bar.
for ( i = 0; i < NoOfValues; i++ )
{
  // Is it necessary to load the data for the affected bar?
  var bool reload = ( i >= invalidFirstValue ) && ( i <= invalidLastValue );

  // No corresponding 'Rectangle' view found. Then create a new one.
  if ( !view )
  {
    view   = new Views::Rectangle;
    reload = true;

    // Add the view to the chart component and ensure the view is managed as belonging
    // (as embedded) to the Outline.
    view.Embedded = true;
    Add( view, 0 );

  }

  // No corresponding 'Rectangle' view found. Then create a new one.
  if ( !valueText )
  {
    valueText = new Views::Text;
    reload = true;

    // Add the view to the chart component and ensure the view is managed as belonging
    // (as embedded) to the Outline.
    valueText.Embedded = true;
    Add( valueText, 0 );
  }

  // No corresponding 'Rectangle' view found. Then create a new one.
  if ( !idxText )
  {
    idxText = new Views::Text;
    reload = true;

    // Ensure the new View::Text will be managed by outline box.
    idxText.Embedded = true;
    Add( idxText, 0 );
    idxText.String = "";
  }

  // Load the data?
  if ( reload )
  {
    // Invoke the external slot method to query the value and color for the bar with
    // the number 'i'.
    Index = i;
    Value = 0.0;
    Color = #00000000;
    signal OnLoadValue;

    // Limit the resulting value to the range 0.0..1.0.
    if ( Value < 0.0 ) Value = 0.0;
    if ( Value > 1.0 ) Value = 1.0;

    // The following code modifies the 'Color' and other property of the used Rectangle view.
    // Adapt the color of the rectangle.
    view.Color = Color;

    // Following code calculates the position of the view within the Chart component.
    var float x1;
    var float y1;
    var float x2;
    var float y2;

    // Calculate the position for the bar. This depends on the selected orientation.
    switch ( Orientation )
    {
      case Views::Orientation.Normal :
      {
        x1 = bounds.x1 + ( ofsX * i );
        x2 = x1 + barSize;
        y2 = bounds.y2;
        y1 = y2 - ( bounds.h * Value );
      }
      case Views::Orientation.Rotated_90 :
      {
        x2 = bounds.x2;
        x1 = x2 - ( bounds.w * Value );
        y2 = bounds.y2 - ( ofsY * i );
        y1 = y2 - barSize;
      }
      case Views::Orientation.Rotated_180 :
      {
        x2 = bounds.x2 - ( ofsX * i );
        x1 = x2 - barSize;
        y1 = bounds.y1;
        y2 = y1 + ( bounds.h * Value );
      }
      case Views::Orientation.Rotated_270 :
      {
        x1 = bounds.x1;
        x2 = x1 + ( bounds.w * Value );
        y1 = bounds.y1 + ( ofsY * i );
        y2 = y1 + barSize;
      }
      default :;
    }

    // Arrange the position of the rectangle representing the bar.
    view.Bounds = rect( int32( x1.round ), int32( y1.round), int32( x2.round ), int32( y2.round));

    valueText.Visible = true;
    valueText.Color = Monitor::TextDay;
    valueText.String = string(Value);
    valueText.Font = Monitor::FontTextS;
    valueText.Embedded = true;
    valueText.Padding = 4;
    valueText.Orientation = Views::Orientation.Rotated_90;
    valueText.Bounds = view.Bounds;

    idxText.Visible = true;
    idxText.Color = Monitor::TextDay;
    idxText.String = string(i + 1);
    idxText.Font = Monitor::FontTextS;
    idxText.Embedded = true;
    idxText.Padding = 4;
    idxText.Orientation = Views::Orientation.Normal;
    idxText.Bounds = rect( int32( x1.round), int32( y2.round), int32( x2.round), int32( y2.round + IndexSize));
  }

  // Search for the next already (eventually) existing view.
  view = (Views::Rectangle)Outline.FindNextView( view, Core::ViewState[]);
}

// If the number of bars was reduced in the chart. Remove all superfluous views now.
while ( view )
{
  var Core::View tmpView = view;

  // Search for the view following the actual view and then release the actual view.
  view = (Views::Rectangle)Outline.FindNextView( view, Core::ViewState[]);
  Remove( tmpView );
}

// The update is finished. Clear the pending invalid flags.
invalidFirstValue = 0x7FFFFFFF;
invalidLastValue = 0;

Paul Banach · Answer 1 · 2024-05-17T12:04:53+0000

answered May 17 by Paul Banach

Hello Ockert van Dyk,

Please explain what does exactly mean "added index below bar chart and value on bar chart.". An image demonstrating the desired design could be helpful to get an idea of the expected functionality.

Best regards

Paul Banach

commented May 17 by Ockert van Dyk

Hello Paul.

My implementation includes a bar chart.
The requirement is to keep the bar chart at a constant width with the bar-width varying depending on the number of items.
The "index" or item number must be displayed below each bar on the bar chart.
The "value" for each bar on the bar chart must be displayed on top of the bar.

I have created a new component from the Component Template “Bar Chart” and attempted to add the textViews "index" and "value" programmatically for the bar chart.
However, the added textViews does not display anything.
Thank you.

commented May 18 by Paul Banach

Hello Ockert van Dyk,

it seems the text is missing a font. Ensure the Font property of the text view object is initialized with a font resource.

I hope it helps you further.

Best regards

Paul Banach

commented Jun 4 by Ockert van Dyk

Good day Paul
Thank you for your help.
I have created a separate Class to put the text for the index below the Bar Chart.
The text is placed at the correct positions as the Bar Chart changes dynamically.
However I fail to remove the previously placed text from the chart.
See code below.
Any suggestions is much appreciated!
Kind regards
Ockert.

Slot Monitor::BarIndex.updateIndex
/// Some common parameters for the calculation.
var int32 barSize = BarSize;
var rect bounds = Outline.Bounds;

// Calculate the available space and the distance between two adjacent bars.
// Thereby ensure that the bars are always fully visible. Accordingly reduce
// the space by the size of a single bar.
var float rangeX = bounds.w - barSize;
var float txtY1 = 85.0;
var float txtY2 = 105.0;
var float textMgn = 3.0;
var float x1;
var float x2;
var float ofsX = ( NoOfValues > 1 )? rangeX / ( NoOfValues - 1 ) : 0;
var int32 i;

var Views::Text idxText = new Views::Text;

// Now process all text. Adapt the size/position/color of each text.
for ( i = 0; i < NoOfValues; i++ )
{
// Is it necessary to load the data for the affected bar?
var bool reload = ( i >= invalidFirstValue ) && ( i <= invalidLastValue );

// No corresponding Views::Text found. Then create a new one.
if (!idxText)
{
idxText = new Views::Text;
reload = true;

idxText.Embedded = true;
Add( idxText, 0 );
}

if ( reload )
{
     // Following code calculates the position of the view within the Chart component.
     x1 = bounds.x1 + ( ofsX * i ) - textMgn;
     x2 = x1 + barSize + textMgn;
     idxText.Visible = true;
     idxText.Color = Monitor::TextDay;
     idxText.String = string (i + 1);
     idxText.Font = Monitor::FontTextS;

// Arrange the position of the rectangle representing the Text.
idxText.Bounds = rect( int32( x1.round ), int32( txtY1.round), int32( x2.round ), int32( txtY2.round ));
}

// Search for the next already (eventually) existing view.
idxText = (Views::Text)Outline.FindNextView( idxText, Core::ViewState[]);
}

// If the number of bars was reduced in the chart. Remove all superfluous views now.
while ( idxText )
{
var Core::View tmpView = idxText;

// Search for the view following the actual view and then release the actual view.
idxText = (Views::Text)Outline.FindNextView( idxText, Core::ViewState[]);
Remove( tmpView );
}

// The update is finished. Clear the pending invalid flags.
invalidFirstValue = 0x7FFFFFFF;
invalidLastValue = 0;

commented Jun 5 by Paul Banach

Hello Ockert van Dyk,

I don't know the function of updateIndex. To analyze the behavior it would be helpful when you upload a complete example project demonstrating the implementation. Please keep the example as simple as possible to show your Bar Chart implementation only.

Best regards

Paul Banach