Personnality insights Watson Blueamix View in page

I want to position my personality insights as it is shown in the image i have succeeded in doing such for translation but i still can't figure out how to do it for personality insight.my goal for the display Here is the code for the translation part:

  <div class='languagedetection'>Language Detection
    <ul><% if (langdetection !== null) { langdetection.languages.forEach(function(country, index) { %>
      <li>
        <b> <%= country.language %> </b> : <%= Number((country.confidence)*100).toFixed(1) %> %
      </li>
      <% })}; %>
    </ul>
  </div>

Does anyone know how can i adapt this code to have the output i want for the personality insight ?

via Strix