Building Dashboards using Dataview Web Part

So, How to get this dashboard?
Create a list with desired fields, convert that to XSLT Data view web part or drop that list into Dataview web part.

Modify the XSL to get the indicators based on logic:

Such as:

 <!-- Display CPI Value -->

<td style="text-align: center; width: 60px;">
<xsl:choose>
<xsl:when test="format-number(sum($nodeset/@CPI),'#,##0.00;-#') &lt; 0.91">
<img border="0" src="{$varRedImage}" alt="{sum($nodeset/@CPI)}"/>
</xsl:when>
<xsl:when test="format-number(sum($nodeset/@CPI),'#,##0.00;-#') &gt; 0.90 and 
format-number(sum($nodeset/@CPI),'#,##0.00;-#') &lt; 0.96">
<img border="0" src="{$varYellowImage}" alt="{sum($nodeset/@CPI)}" />
</xsl:when>
<xsl:when test="format-number(sum($nodeset/@CPI),'#,##0.00;-#') &gt; 0.95">
<img border="0" src="{$varGreenImage}" alt="{sum($nodeset/@CPI)}"/>
</xsl:when>
</xsl:choose>
</td>

<!--Overll Health-->
<td style="text-align: center; width: 63px;">
<!-- CPI -->
<xsl:variable name="CPI_VALUE">
<xsl:choose>
<xsl:when test="format-number(sum($nodeset/@CPI),'#,##0.00;-#') &lt; 0.91">25</xsl:when>
<xsl:when test="format-number(sum($nodeset/@CPI),'#,##0.00;-#') &gt; 0.90 and 
format-number(sum($nodeset/@CPI),'#,##0.00;-#') &lt; 0.96">75</xsl:when>
<xsl:when test="format-number(sum($nodeset/@CPI),'#,##0.00;-#') &gt; 0.95">100</xsl:when>
</xsl:choose>
</xsl:variable>
<!-- SPI -->

<xsl:variable name="SPI_VALUE">
<xsl:choose>
<xsl:when test="format-number(sum($nodeset/@SPI),'#,##0.00;-#') &lt; 0.91">25</xsl:when>
<xsl:when test="format-number(sum($nodeset/@SPI),'#,##0.00;-#') &gt; 0.90 and 
format-number(sum($nodeset/@SPI),'#,##0.00;-#') &lt; 0.96">75</xsl:when>
<xsl:when test="format-number(sum($nodeset/@SPI),'#,##0.00;-#') &gt; 0.95">100</xsl:when>
</xsl:choose>
</xsl:variable>

<xsl:variable name="Overall_Avg" select="($CPI_VALUE + $SPI_VALUE) div 2"/>
<xsl:choose>
<xsl:when test="$Overall_Avg &lt; 50">
<img border="0" src="{$varRedImage}" alt="{$Overall_Avg}" />
</xsl:when>
<xsl:when test="$Overall_Avg &gt; 49 and $Overall_Avg &lt; 76">
<img border="0" src="{$varYellowImage}" alt="{$Overall_Avg}" />
</xsl:when>
<xsl:when test="$Overall_Avg &gt; 75">
<img border="0" src="{$varGreenImage}" alt="{$Overall_Avg}" />
</xsl:when>
</xsl:choose>
</td>
Here is the overall flow: