• Recent
    • Tags
    • Popular
    • Register
    • Login

    Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

    Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website Mango 5 Documentation Website

    Using <ma-heat-map> with multiple datapoints

    Dashboard Designer & Custom AngularJS Pages
    2
    2
    931
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ThomasEinastoT
      ThomasEinasto
      last edited by ThomasEinasto

      Dear IAS staff,

      Is it possible to use <ma-heat-map> with multiple datapoints showing current measured heatmap?

      General idea is to use multiple datapoints and then arrange them into the heatmap to show measurement uniformity of that object.

      As an example found in the internet, this shows multiple sets of data on the x scale but one dataset would be sufficient if it is possible easily:

      0_1571397233557_b5aecc3a-05f5-4d1b-bbea-b1e2c75c81a0-image.png

      Edit: Actually quite stupid question because this can be solved with ng-style and HSL coloring. D3 styling just creates nice gradients which is nice.

      Example:

          <div ng-style="{'background-color': 'hsl('+ CPUTEMP1.value / 85 * 350 + ', 100%, 70.5%)'}" layout-fill>
          <span ng-bind="CPUTEMP1.value"></span>
          </div>
          <div ng-style="{'background-color': 'hsl('+ CPUTEMP2.value / 85 * 350 + ', 100%, 70.5%)'}" layout-fill>
          <span ng-bind="CPUTEMP2.value"></span>
          </div>
          <div ng-style="{'background-color': 'hsl('+ CPUTEMP3.value / 85 * 350 + ', 100%, 70.5%)'}" layout-fill>
          <span ng-bind="CPUTEMP3.value"></span>
          </div>
          <div ng-style="{'background-color': 'hsl('+ CPUTEMP4.value / 85 * 350 + ', 100%, 70.5%)'}" layout-fill>
          <span ng-bind="CPUTEMP4.value"></span>
          </div>
          <div ng-style="{'background-color': 'hsl('+ CPUTEMP5.value / 85 * 350 + ', 100%, 70.5%)'}" layout-fill>
          <span ng-bind="CPUTEMP5.value"></span>
          </div>
      

      Thanks
      Thomas

      1 Reply Last reply Reply Quote 0
      • Jared WiltshireJ
        Jared Wiltshire
        last edited by

        OK, looks like you solved your problem using a custom solution using D3 in a user module. Nice work.

        Developer at Radix IoT

        1 Reply Last reply Reply Quote 0
        • First post
          Last post