5 Replies Latest reply: Jul 20, 2017 8:40 AM by Michael Peter RSS

    Tutorial on Hello Data not working

    Michael Andrews

      I'm following this example

      http://qliksite.io/tutorials/qliksense-visualization-extensions/part-01/08-Hello-Data/#

       

      I was writing it myself, but I literally copy and pasted your example to make sure I didn't have any typos. Whenever I try to access the hyper cube data, I get an error because I get not arrow objects in my qDataPages array, so therefor no qMatrix.

       

      The error I get is this

      error.png

       

      Here is what the data looks like.

      measure.png

       

      So I'll post the code, but it's verbatim that project.

       

       

      define( [],
        function ( ) {
        'use strict';
      
      
        return {
      
      
        definition: {
        type: "items",
        component: "accordion",
        items: {
        dimensions: {
        uses: "dimensions"
        },
        measures: {
        uses: "measures"
        },
        sorting: {
        uses: "sorting"
        },
        appearance: {
        uses: "settings"
        }
        }
        },
        initialProperties: {
      
      
        },
        paint: function ( $element, layout ) {
      
      
        var hc = layout.qHyperCube;
        console.log( 'Data returned: ', hc);
      
      
        // Default rendering with HTML injection
        $element.empty();
        var table = '<table border="1">';
      
      
        table += '<thead>';
        table += '<tr>';
        for (var i = 0; i < hc.qDimensionInfo.length; i++) {
        table += '<th>' + hc.qDimensionInfo[i].qFallbackTitle + '</th>';
        }
        for (var i = 0; i < hc.qMeasureInfo.length; i++) {
        table += '<th>' + hc.qMeasureInfo[i].qFallbackTitle + '</th>';
        }
        table += '</tr>';
        table += '</thead>';
      
      
        table += '<tbody>';
      
        for (var r = 0; r < hc.qDataPages[0].qMatrix.length; r++) {
        table += '<tr>';
        for (var c = 0; c < hc.qDataPages[0].qMatrix[r].length; c++) {
        table += '<td>';
        table += hc.qDataPages[0].qMatrix[r][c].qText;
        table += '</td>';
        }
        table += '</tr>';
        }
        table += '</tbody>';
        table += '</table>';
        $element.append( table );
      
      
        }
        };
      
      
        } );
      
        • Re: Tutorial on Hello Data not working
          Stefan Walther

          Have a look at your initialProperties, they need to be defined (as also stated in the tutorial you are mentioning).

           

          Hope this helps.

          Regards

          Stefan

            • Re: Tutorial on Hello Data not working
              Michael Andrews

              Sorry, it was just a bad copy and paste. I was playing around with stuff to see if I could get it to work.

               

              Adding

              initialProperties: {
                  qHyperCubeDef: {
                      qDimensions: [],
                      qMeasures: [],
                      qInitialDataFetch: [
                          {
                              qWidth: 10,
                              qHeight: 100
                          }
                      ]
                  }
              },

              Doesn't solve anything

                • Re: Tutorial on Hello Data not working
                  Alexander Karlsson

                  Make sure you delete the object from the sheet and re-add it again if you have modified the initalProperties as they are set on object creation.

                  • Re: Tutorial on Hello Data not working
                    Gustav Gager

                    Hi.

                    Im doing the exact tutorial as you are. In the tutorial it say that you should just add "initialProperties: {}," and that sense will use this to default itself to what is standard.

                    However when you do that, you get this exact issue. No data in the hypercube.

                    But when you manually add the code

                    initialProperties: {

                        qHyperCubeDef: {

                            qDimensions: [],

                            qMeasures: [],

                            qInitialDataFetch: [

                                {

                                    qWidth: 10,

                                    qHeight: 100

                                }

                            ]

                        }

                    },

                     

                    Then it works.

                    is this something that has been changed in later versions of sanse?

                • Re: Tutorial on Hello Data not working
                  Michael Peter

                  Hi Michael,

                   

                  I had exactly the same problem and found the solution while working further in the same tutorial.

                  Short explanation from what I have understood:

                  When using extra files like in this example './initialproperties', you need to create a parameter inside function(). Also, because initialdata is the second file I include, it also has to be the second parameter (at least that's what I think, I didn't test that). That parameter than has to be used instead of empty brackets.

                  Inside the files itself (here properties.js as well as initialproperties.js) you have to use

                  define( [], function () {

                      'use strict';

                      return {...}

                  }

                  and the inside of return{} is exactly what the belonging parameter will contain.

                   

                  Hope this helps anybody ^^.

                  Michael

                   

                  • Hello-Data.js:

                   

                  define(

                      [

                          './properties',

                         './initialproperties'

                      ],

                      function ( props, initProps ) {

                          'use strict';

                   

                          return {

                              definition: props,

                              initialProperties: initProps,

                             

                              paint: function ( $element, layout ) {

                                  var hc = layout.qHyperCube;

                                  console.log( 'Data returned: ', hc );

                                  $element.empty();

                                  var table = '<table border="1">';

                                      table += '<thead>';

                                          table += '<tr>';

                                              for (var i=0; i < hc.qDimensionInfo.length; i++){

                                                  table += '<th>' + hc.qDimensionInfo[i].qFallbackTitle + '</th>';

                                              }

                                              for (var i=0; i < hc.qMeasureInfo.length; i++){

                                                  table += '<th>' + hc.qMeasureInfo[i].qFallbackTitle + '</th>';

                                              }

                                          table += '</tr>';

                                      table += '</thead>';

                                      table += '<tbody>';

                                          // iterate over all rows

                                          for (var r = 0; r < hc.qDataPages[0].qMatrix.length; r++) {

                                              table += '<tr>';

                                              // iterate over all cells within a row

                                              for (var c = 0; c < hc.qDataPages[0].qMatrix[r].length; c++) {

                                                  table += '<td>';

                                                      table += hc.qDataPages[0].qMatrix[r][c].qText;

                                                  table += '</td>';

                                              }

                                              table += '</tr>';

                                          }

                                      table += '</tbody>';

                                  table += '</table>';

                                  $element.append( table );

                              }

                          };

                      }

                  );

                   

                   

                  • properties.js:

                   

                  define( [], function () {

                      'use strict';

                   

                      var dimensions = {

                          uses: "dimensions"

                      };

                      var measures = {

                          uses: "measures"

                      };

                      var sorting = {

                          uses: "sorting"

                      };

                      var appearance = {

                          uses: "settings"

                      };

                     return {

                          type: "items",

                          component: "accordion",

                          items: {

                              dimensions: dimensions,

                              measures: measures,

                              sorting: sorting,

                              appearance: appearance

                          }

                      };

                  } );

                   

                   

                  • initialproperties.js:

                   

                  define( [], function () {

                      'use strict';

                      return {

                          qHyperCubeDef: {

                              qDimensions: [],

                              qMeasures: [],

                              qInitialDataFetch: [

                                  {

                                      qWidth: 10,

                                      qHeight: 50

                                  }

                              ]

                          }

                      };

                  } );