Как хранить данные в переменной из Hypercube в Qliksense Mashups?

Я использую apexcharts.js для построения Диаграммы площадей в qliksense Mashups, и я создал гиперкуб, а также могу печатать данные в консоли. Я хочу сохранить данные гиперкуба в массиве и нажать на диаграмму.
Как я могу это сделать?
Пожалуйста помоги.

apexcharts https://apexcharts.com/javascript-chart-demos/area-charts/stacked/

печать данных console.log(ответ);

/*
 * Bootstrap-based responsive mashup
 * @owner Enter you name here (xxx)
 */
/*
 *    Fill in host and port for Qlik engine
 */
var prefix = window.location.pathname.substr( 0, window.location.pathname.toLowerCase().lastIndexOf( "/extensions" ) + 1 );

var config = {
 host: window.location.hostname,
 prefix: prefix,
 port: window.location.port,
 isSecure: window.location.protocol === "https:"
};
//to avoid errors in workbench: you can remove this when you have added an app
var app;
require.config( {
 baseUrl: (config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "" ) + config.prefix + "resources"
} );

require( ["js/qlik"], function ( qlik ) {

 var control = false;
 qlik.setOnError( function ( error ) {
  $( '#popupText' ).append( error.message + "<br>" );
  if ( !control ) {
   control = true;
   $( '#popup' ).delay( 1000 ).fadeIn( 1000 ).delay( 11000 ).fadeOut( 1000 );
  }
 } );

 $( "#closePopup" ).click( function () {
  $( '#popup' ).hide();
 } );
 if ( $( 'ul#qbmlist li' ).length === 0 ) {
  $( '#qbmlist' ).append( "<li><a>No bookmarks available</a></li>" );
 }
 $( "body" ).css( "overflow: hidden;" );
 function AppUi ( app ) {
  var me = this;
  this.app = app;
  app.global.isPersonalMode( function ( reply ) {
   me.isPersonalMode = reply.qReturn;
  } );
  app.getAppLayout( function ( layout ) {
   $( "#title" ).html( layout.qTitle );
   $( "#title" ).attr( "title", "Last reload:" + layout.qLastReloadTime.replace( /T/, ' ' ).replace( /Z/, ' ' ) );
   //TODO: bootstrap tooltip ??
  } );
  app.getList( 'SelectionObject', function ( reply ) {
   $( "[data-qcmd='back']" ).parent().toggleClass( 'disabled', reply.qSelectionObject.qBackCount < 1 );
   $( "[data-qcmd='forward']" ).parent().toggleClass( 'disabled', reply.qSelectionObject.qForwardCount < 1 );
  } );
  app.getList( "BookmarkList", function ( reply ) {
   var str = "";
   reply.qBookmarkList.qItems.forEach( function ( value ) {
    if ( value.qData.title ) {
     str += '<li><a data-id="' + value.qInfo.qId + '">' + value.qData.title + '</a></li>';
    }
   } );
   str += '<li><a data-cmd="create">Create</a></li>';
   $( '#qbmlist' ).html( str ).find( 'a' ).on( 'click', function () {
    var id = $( this ).data( 'id' );
    if ( id ) {
     app.bookmark.apply( id );
    } else {
     var cmd = $( this ).data( 'cmd' );
     if ( cmd === "create" ) {
      $( '#createBmModal' ).modal();
     }
    }
   } );
  } );
  $( "[data-qcmd]" ).on( 'click', function () {
   var $element = $( this );
   switch ( $element.data( 'qcmd' ) ) {
    //app level commands
    case 'clearAll':
     app.clearAll();
     break;
    case 'back':
     app.back();
     break;
    case 'forward':
     app.forward();
     break;
    case 'lockAll':
     app.lockAll();
     break;
    case 'unlockAll':
     app.unlockAll();
     break;
    case 'createBm':
     var title = $( "#bmtitle" ).val(), desc = $( "#bmdesc" ).val();
     app.bookmark.create( title, desc );
     $( '#createBmModal' ).modal( 'hide' );
     break;
   }
  } );
 }


 //open apps -- inserted here --
 var app = qlik.openApp('Store.qvf', config);


 //get objects -- inserted here --
 //create cubes and lists -- inserted here --
 app.createCube({
 "qInitialDataFetch": [
  {
   "qHeight": 20,
   "qWidth": 2
  }
 ],
 "qDimensions": [
  {
   "qLabel": "Product_Category",
   "qLibraryId": "VJfbVp",
   "qNullSuppression": true,
   "qOtherTotalSpec": {
    "qOtherMode": "OTHER_OFF",
    "qSuppressOther": true,
    "qOtherSortMode": "OTHER_SORT_DESCENDING",
    "qOtherCounted": {
     "qv": "5"
    },
    "qOtherLimitMode": "OTHER_GE_LIMIT"
   }
  }
 ],
 "qMeasures": [
  {
   "qDef": {
    "qDef": "Sum(Sales)"
   },
   "qLabel": "Sum(Sales)",
   "qLibraryId": null,
   "qSortBy": {
    "qSortByState": 0,
    "qSortByFrequency": 0,
    "qSortByNumeric": 0,
    "qSortByAscii": 1,
    "qSortByLoadOrder": 0,
    "qSortByExpression": 0,
    "qExpression": {
     "qv": " "
    }
   }
  }
 ],
 "qSuppressZero": false,
 "qSuppressMissing": false,
 "qMode": "S",
 "qInterColumnSortOrder": [],
 "qStateName": "$"
 },testdata);


 if ( app ) {
new AppUi( app );
}


 //callbacks
  function testdata(reply, app){
    
     console.log(reply);
  //remove all d3 elements from svg

    // Pass Data into data variable



// ApexCharts
   var options = {
         chart: {
           height: 350,
           type: 'area',
           stacked: true,
           events: {
             selection: function(chart, e) {
               console.log(new Date(e.xaxis.min) )
             }
           },

         },
         colors: ['#008FFB', '#00E396', '#CED4DC'],
         dataLabels: {
             enabled: false
         },
         stroke: {
           curve: 'smooth'
         },

         series: [{
             name: 'South',
             data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 20, {
               min: 10,
               max: 60
             })
           },
           {
             name: 'North',
             data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 20, {
               min: 10,
               max: 20
             })
           },

           {
             name: 'Central',
             data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 20, {
               min: 10,
               max: 15
             })
           }
         ],
         fill: {
           type: 'gradient',
           gradient: {
             opacityFrom: 0.6,
             opacityTo: 0.8,
           }
         },
         legend: {
           position: 'top',
           horizontalAlign: 'left'
         },
         xaxis: {
           type: 'datetime'
         },
       }

       var chart = new ApexCharts(
         document.querySelector("#chart"),
         options
       );

       chart.render();

       /*
         // this function will generate output in this format
         // data = [
             [timestamp, 23],
             [timestamp, 33],
             [timestamp, 12]
             ...
         ]
         */
       function generateDayWiseTimeSeries(baseval, count, yrange) {
         var i = 0;
         var series = [];
         while (i < count) {
           var x = baseval;
           var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

           series.push([x, y]);
           baseval += 86400000;
           i++;
         }
         return series;
       }
    }




} );
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="../../resources/assets/external/requirejs/require.js"></script>
  <script src="SalesMashups.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>

0 ответов

Другие вопросы по тегам