Первый пример

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

/*
 * 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

<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 0 голосов
Рейтинг статьи

Подписаться
Уведомление о
guest
0 комментариев
Встроенная Обратная Связь
Просмотр всех комментариев
0
Оставьте, пожалуйста, комментарий!x