26 Replies Latest reply: Nov 12, 2013 3:10 AM by Roeland Luitwieler RSS

    Embedding single AJAX chart objects in HTML document

      I know this has been discused a lot but I can't find an example of the complete solution so I try to make myself as clear as possible.

       

      QV Server Version 10.0.0.x

       

      I have sucessfully created AJAX pages on the server so there is no technical problems. I use the code in opendoc.htm that loads the toolbar, sheetheaders and all the objects on a sheet. As long as the code

       

      <div id="PageContainer">

      <div id="MainContainer"></div>

      </div>

       

      is included all the objects are nicely arranged as in the QlikView .qvw file. No problem so far.

       

      But I want to take one single object from the page and put it in a table without the toolbar, tabs and other objects. I have seen solutions for QV7,8,9 etc but none seen to work. The generally seem to have the form:-

       

      In the header

      <script javascript etc....>.

      var qva;

      var qva = new Qva.PageBinding();

       

      qva.View = "QLM";

      qva.Autoview = "";

      qva.AuthenticateUrl = 'QvAJAXZfc/Authenticate.aspx';

      new Qva.Scanner(qva);

      ... </script>

       

      In the body of the document is a table <table style="width:auto;" avq="graph:.CH01" class="Chart"></table>

       

      or something similar.

       

      This produces no errors but does not show anything either.

       

      Anyone know what is missing?

       

      Thanks for any help.

        • Embedding single AJAX chart objects in HTML document

          After some intensive investigation I found the way to include QV10 items in an HTML page and here is the solution I ended up with in case anyone else is looking for the answer. First is the basic header info for the HTML file.

           

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns:zfp="http://www.qliktech.com/zfp" xmlns="http://www.w3.org/1999/xhtml">                         
            <head>                                                
              <title>QlikView                                            
              </title>                                                
              <meta http-equiv="X-UA-Compatible" content="IE=9; IE=EmulateIE8" />                            
              <link rel="stylesheet" type="text/css" media="screen" href="http://vm-qlikview/QvAjaxZfc/htc/default.css" />                            
              <!link rel="stylesheet" type="text/css" media="screen" href="http://vm-qlikview/QvAjaxZfc/htc/modal/modal.css" />                            
              <link rel="stylesheet" type="text/css" href="/QvAjaxZfc/htc/avq.css"/>                         
          <script type="text/javascript" src="/QvAjaxZfc/htc/QvAjax.js"></script>                         
          <script type="text/javascript">

          And then the functions for the integration. This is a minimum set of required lines

           

              <!-- // Script for QlikView AJAX integration -->
                  var qva;
                  function Init() {
                     
                      qva = new Qva.PageBinding('QLM');   //can have several binders each with their own doc and authentication etc.
                     
                      var doc = Qva.ExtractProperty("document", null);
                      qva.View = doc;     

                      new Qva.Modal();

                      new Qva.Scanner();           

                      qva.Autoview="";
                      qva.AuthenticateUrl = '/QvAJAXZfc/Authenticate.aspx';
          //--            qva.Host="Local";

                     Qva.Start();
                  }

          </script>                                  

            </head>

           

          In the body of the document then make some <DIV> sections with inline styles. Create a QlikView document with a chart (CH01), two listboxes (LB01, LB02) and two buttons Clear and Back as BU01 and BU02. Put this in the Qlikview Server document directory.

           

          <body>

              <div>          

                <div class="QvFrame" avqview="QLM" avq="object:.Document\CH01" id="Document\CH01" style="float:left;display:none;width:460px;height:258px;">                         

                </div>                            

                <div style="float:left;width:10px;height:258px;">                         

                </div>                            

                <div style="float:left;">                                      

                  <div class="QvFrame" avqview="QLM" avq="object:.Document\LB01" id="Document\LB01" style="display:none;width:100px;height:150px;">                                   

                  </div>                                      

                  <div style="height:10px;">                                   

                  </div>                                      

                  <div class="QvFrame" avqview="QLM" avq="object:.Document\LB02" id="Document\LB02" style="display:none;width:100px;height:98px;">                                   

                  </div>                            

                </div>                            

                <div style="float:left;width:10px;height:258px;">                         

                </div>                            

                <div style="float:left;">                                      

                  <div class="QvFrame" avqview="QLM" avq="object:.Document\BU02" id="Document\BU02" style="display:none;width:60px;height:40px;">                                   

                  </div>                                      

                  <div class="QvFrame" avqview="QLM" avq="object:.Document\BU01" id="Document\BU01" style="display:none;width:60px;height:40px;">                                   

                  </div>                            

                </div>                            

              </div>

          </body>

          </html>

           

          You can call the html file with something like http://QVserver/QVajaxIntegration.htm?document=QVDoc&select=LB02,2010,2011&select=LB01,KIR where LB02 and LB01 selections values are selection from your own listboxes.

            • Embedding single AJAX chart objects in HTML document

              Hi, I find this interesting as we are in the process of upgrading from QV9 to QV10.  What you show above looks like the old QV client object generated page information.  Why do you want to do it this way versus using QlikView Workbench with visual studio?

               

              What I'm really interested in his how to integrate the QlikView toolbar into a workbench solution, but the above may be a compromise.

               

              Basically, it appears you have deconstructed the opendoc.htm and repurposed components to achieve your goals.  Is this a correct assessment?

               

              Regards,

              Jeff G

                • Re: Embedding single AJAX chart objects in HTML document

                  Correct about it being like the old QV client generator. That was what I

                  was trying to recreate but as QV10 changed the JavaScript API the old

                  scripts didn't work.

                   

                  I saw from other quaestions on the Community that I was not the only one

                  trying to do this. The QV9 generator was sadly missed.

                   

                  I don't have WorkBench was one reason not to use it!! I can't install

                  the necessary componenets of Visual Studio so this was not a good

                  solution.

                   

                  Using OpenDoc.htm and the script commands there did not allow resizing

                  of the objects. Either the page as show in the QV client or a single

                  object full screen.

                   

                  My primary goal is to embed single functional QV objects into web pages

                  on my Intranet. The intranet is a database document generated system

                  with an HTML editor to script news items and simple text. The solution I

                  outlined allows me to completly independently create a QV object in the

                  middle of a text on the Intranet and it will allways be updated. I can

                  change the size and colours of any component of the resulting diagrams

                  and table for example to change the green drag box to another colour.

                   

                  Maybe there was another way to do it but I think this is the most

                  flexible without WorkBench.

                   

                  Hope that helps in some way.

                   

                  Andy

                • Re: Embedding single AJAX chart objects in HTML document

                  Great answer, works fine here.

                   

                  However, I just can't get it to work when I move the HTML document to a different server from the QV server. How should the above code be modified in my situation? I just keep getting the "Failed to authenticate" message (mostly due to the XMLHttpRequest status 0) instead of a windows authentication popup.

                   

                  Things I have tried:

                  - Obviously, I changed all relevant urls (including the qva.AuthenticateUrl) to absolute urls starting with "http://SERVER/...".

                  - Also played around with variables like qva.Host.

                  - I understand that in previous QV versions a change in the QvsViewClient.asp(x) was required, but i don't see how to do that here.

                  -The Ajax Zfc API / SDK don't seem to cover this scenario.

                   

                  Thanks in advance for any suggestions,

                  Roeland

                    • Re: Embedding single AJAX chart objects in HTML document

                      Hi Roeland,

                       

                      Good to know the solution works.

                       

                      I have read a number of threads on the Community site about cross domain

                      issues with AJAX. It seems like AJAX can't handle it, plain and simple.

                       

                      However, as I don't have the problem I have not read all the answers to

                      all the posts. Maybe someone has a solution.

                       

                      Sorry I can't be of more help.

                       

                      Andy Hyde

                      Oslo, Norway

                        • Embedding single AJAX chart objects in HTML document

                          Hey Andy,

                           

                          thanks for replying.

                           

                          Now that you mention it, I have also considered cross-domain issues, but I was hoping that these are avoided as the js resides on the same (QV) server. (Not sure about that one.) Moreover, I believe I didn't always get the 0 status.

                           

                          I'll try to find threads on cross-domain issues then. Also waiting for a response from QV support btw.

                          Roeland

                          • Re: Embedding single AJAX chart objects in HTML document

                            Ok, you were definitely right about the problem being cross-domain issues with AJAX. No solution found on this board, but I got it to work myself, using flXHR, rather seamlessly I must say. Of course, performance is not what we're used to, but it works.

                             

                            If flXHR is properly deployed (not hard, see flXHR documentation), the following changes to the above code worked for me.

                             

                            1. Include the flXHR library by adding another script tag to the head.

                            <script type="text/javascript" src="path/to/flXHR.js"></script>

                            2. Add the following lines at the beginning of the Init() function body. Obviously, all other QV urls should be changed to start with http://YourQVServer/ as well.

                                adaptNative(); // integration with flXHR

                                Qva.QvAjaxZfcPath = "http://YourQVServer/QvAJAXZfc/";

                                Qva.Remote = "http://YourQVServer/QvAJAXZfc/QvsViewClient.aspx";

                            3. The adaptNative() function could be defined as follows.

                            // this function replaces the native XMLHttpRequest by the cross-domain flXHR variant

                            // adapted from http://flxhr.flensed.com/code/tests/flxhr-7f.html

                            function adaptNative() {

                                var configurationObject = {

                                        instancePooling:true,autoUpdatePlayer:false,xmlResponseText:true,noCacheHeader:false,

                                        //onerror:handleError, // if you want to use some error handling function handleError

                                        loadPolicyURL:"http://YourQVServer/QvAJAXZfc/your_specific_policy.xml" // only required if you use a QV specific policy, see flXHR documentation

                                    }

                                XMLHttpRequest = function() { return new flensed.flXHR(configurationObject); }

                                // IE only, for the IE specific XHR code instantiation

                                try {

                                    if (window.ActiveXObject) {

                                        var old_ActiveXObject = window.ActiveXObject;

                                        window.ActiveXObject = function(typeStr) {

                                            if (typeStr === "Microsoft.XMLHTTP") {

                                                return new flensed.flXHR(configurationObject);

                                            } else {

                                                return new old_ActiveXObject(typeStr);

                                            }

                                        }

                                    }

                                } catch (err) {}

                            }

                             

                             

                            There may still be other/better solutions (please reply if you know any), but I hope this will help other people as well.

                            Roeland

                            (Rotterdam, the Netherlands)

                        • Embedding single AJAX chart objects in HTML document
                          Marco Bombonato

                          Hi Andy,

                          I tried the script on our server (ver. 10 SR4, windows server standard sp2) but does not work ... I changed the link to the server, but still does not work. Do you have any idea why?

                          Also I have another question: would it be possible to make the fixed point of QlikView document?


                          thanks a lot.

                            • Re: Embedding single AJAX chart objects in HTML document

                              I am out of the office until 03/14/2012.

                               

                              I will be out of office today for CSR (Corporate Social Responsibility). For any urgent request or escalation, kindly contact  Nick-rcm Price or Jannette Lobemeier. Thanks

                               

                               

                              Note: This is an automated response to your message  "[Deployment and Management (Server/Publisher/AJAX/IE/Web Parts)] - Re: Embedding single AJAX chart objects in HTML document" sent on 13.03.2012 14:38:30.

                               

                              This is the only notification you will receive while this person is away.

                              --

                               

                              Informationen (einschließlich Pflichtangaben) zu einzelnen, innerhalb der EU tätigen Gesellschaften und Zweigniederlassungen des Konzerns Deutsche Bank finden Sie unter http://www.deutsche-bank.de/de/content/pflichtangaben.htm. Diese E-Mail enthält vertrauliche und/ oder rechtlich geschützte Informationen. Wenn Sie nicht der richtige Adressat sind oder diese E-Mail irrtümlich erhalten haben, informieren Sie bitte sofort den Absender und vernichten Sie diese E-Mail. Das unerlaubte Kopieren sowie die unbefugte Weitergabe dieser E-Mail ist nicht gestattet.

                               

                              Please refer to http://www.db.com/en/content/eu_disclosures.htm for information (including mandatory corporate particulars) on selected Deutsche Bank branches and group companies registered or incorporated in the European Union. This e-mail may contain confidential and/or privileged information. If you are not the intended recipient (or have received this e-mail in error) please notify the sender immediately and delete this e-mail. Any unauthorized copying, disclosure or distribution of the material in this e-mail is strictly forbidden.

                              • Re: Embedding single AJAX chart objects in HTML document

                                Hi,

                                 

                                Do you have more information about what doesn't work? Do you get en

                                error message or just a web page with nothing or what?

                                 

                                I'm not sure I understand the second question about the fixrd point QV

                                document.

                                 

                                Andy

                                  • Re: Embedding single AJAX chart objects in HTML document
                                    Marco Bombonato

                                    Hi,

                                    I get a web page with nothing (no errors).

                                     

                                    the second question: I want to place some object qlikview in html page without recall the document address bar.

                                     

                                    Thanks.

                                    Marco.

                                    • Embedding single AJAX chart objects in HTML document
                                      Marco Bombonato

                                      Hi Andy,

                                      it's possible that is a problem with the API?

                                      Here is the code:

                                       

                                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                                      <html xmlns:zfp="http://www.qliktech.com/zfp" xmlns="http://www.w3.org/1999/xhtml">                         

                                        <head>                                                

                                          <title>QlikView                                            

                                          </title>                                                

                                          <meta http-equiv="X-UA-Compatible" content="IE=9; IE=EmulateIE8" />                            

                                          <link rel="stylesheet" type="text/css" media="screen" href="http://miriel.prov.bz/QvAjaxZfc/htc/default.css" />                            

                                          <!link rel="stylesheet" type="text/css" media="screen" href="http://miriel.prov.bz/QvAjaxZfc/htc/modal/modal.css" />                            

                                          <link rel="stylesheet" type="text/css" href="/QvAjaxZfc/htc/avq.css"/>                         

                                      <script type="text/javascript" src="/QvAjaxZfc/htc/QvAjax.js"></script>                         

                                      <script type="text/javascript">

                                       

                                          <!-- // Script for QlikView AJAX integration -->

                                              var qva;

                                              function Init() {

                                                 

                                                  qva = new Qva.PageBinding('QLM');   //can have several binders each with their own doc and authentication etc.

                                                 

                                                  var doc = Qva.ExtractProperty("document", null);

                                                  qva.View = doc;    

                                                  new Qva.Modal();

                                                  new Qva.Scanner();          

                                                  qva.Autoview="";

                                                  qva.AuthenticateUrl = '/QvAJAXZfc/Authenticate.aspx';

                                                  qva.Host="Local";

                                                 Qva.Start();

                                              }

                                      </script>                                 

                                        </head>

                                       

                                      <body>

                                          <div>         

                                            <div class="QvFrame" avqview="QLM" avq="object:.Document\CH01" id="Document\CH01" style="float:left;display:none;width:460px;height:258px;">                        

                                            </div>                           

                                            <div style="float:left;width:10px;height:258px;">                        

                                            </div>                           

                                            <div style="float:left;">                                     

                                              <div class="QvFrame" avqview="QLM" avq="object:.Document\LB01" id="Document\LB01" style="display:none;width:100px;height:150px;">                                  

                                              </div>                                     

                                              <div style="height:10px;">                                  

                                              </div>                                     

                                              <div class="QvFrame" avqview="QLM" avq="object:.Document\LB02" id="Document\LB02" style="display:none;width:100px;height:98px;">                                  

                                              </div>                           

                                            </div>                           

                                            <div style="float:left;width:10px;height:258px;">                        

                                            </div>                           

                                                                     

                                          </div>

                                       

                                      I have only change the link of the css files.

                                      Then I have the document qvajaxintegration.qvw in the root folder of qvs with the treee object (CH01, LB01 and LB02) and I call the html file so:

                                      http://miriel.prov.bz/qvajaxintegration.htm?document=qvajaxintegration.qvw

                                       

                                      thanks


                                • Embedding single AJAX chart objects in HTML document
                                  selçuk çadır

                                  Is there solvason answer to the question?

                                    • Re: Embedding single AJAX chart objects in HTML document
                                      Martin Vierling

                                      Hi,

                                      did someone get this running in QV11? I tried to modify the file singleobject.htm and open it with

                                      http://localhost/qvajaxzfc/htc/singleobject.htm?document=Testdaten.qvw&select=LB03,A

                                       

                                      Testdaten.qvw is a simple document with test data and also a listbox LB03. But my page is simply empty, i don't even get an error...

                                       

                                      I inserted the divs inside the MainContainer-DIV, is that wrong?

                                       

                                        <div id="MainContainer">
                                         <div>    
                                            <div class="QvFrame" avqview="QLM" avq="object:.Document\TB01" id="Document\TB01" style="float:left;display:none;width:460px;height:258px;">                   
                                            </div>                      
                                            <div style="float:left;width:10px;height:258px;">                   
                                            </div>                      
                                            <div style="float:left;">                                
                                         <div class="QvFrame" avqview="QLM" avq="object:.Document\LB03" id="Document\LB03" style="display:none;width:100px;height:150px;">                             
                                         </div>                                
                                            </div>                      
                                         </div>
                                        
                                         </div>

                                       

                                      thanks a lot,

                                      Martin

                                        • Re: Embedding single AJAX chart objects in HTML document

                                          I have upgraded to v11 and have managed to get my implementation working again. There was one line in my original code that I had skipped as it didn't seem necessary but it is needed in v11 (new Qva.Modal();). Here is the new HTML fil from start to finish.

                                           

                                          Important things include: call to init() in the <body> tag, paths to the AJAX client files, css and .js files, authentication.

                                           

                                          Good luck.

                                           

                                          Andy

                                           

                                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                          <html xmlns:zfp="http://www.qliktech.com/zfp" xmlns="http://www.w3.org/1999/xhtml">                         
                                            <head>                                                
                                              <title>QlikView SingeObject integration in HTML                                           
                                              </title>                                                
                                              <meta http-equiv="X-UA-Compatible" content="IE=9; IE=EmulateIE8" />                            
                                              <link rel="stylesheet" type="text/css" media="screen" href="http://vm-qlikview/QvAjaxZfc/htc/default.css" />                            
                                              <link rel="stylesheet" type="text/css" media="screen" href="http://vm-qlikview/QvAjaxZfc/htc/modal/modal.css" />                            
                                              <link rel="stylesheet" type="text/css" href="/QvAjaxZfc/htc/avq.css"/>                         
                                          <script type="text/javascript" src="/QvAjaxZfc/htc/QvAjax.js"></script>                         

                                          <script type="text/javascript">
                                              <!-- // Script for QlikView AJAX integration -->
                                                  var qva;
                                                  function Init() {
                                                     
                                                      qva = new Qva.PageBinding('QLM');   //can have several binders each with their own doc and authentication etc.
                                                     
                                                      var doc = Qva.ExtractProperty("document", null);
                                                      qva.View = doc;      //qva.View should be the relative (to the root document folder) application name on the server. Do not include the .qvw extension.

                                                      new Qva.Modal();

                                                      new Qva.Scanner();           

                                                      qva.Autoview="";
                                                      qva.AuthenticateUrl = '/QvAJAXZfc/Authenticate.aspx';
                                          //--            qva.Host="Local";

                                                 
                                                      Qva.BodyOnLoadFunctionNames.push('MyInit');

                                                     Qva.Start();
                                                  }
                                          </script>                                  
                                            </head>                         
                                            <body onload="Init();"> 
                                              NY: http://vm-qlikview/QVajaxIntegration.htm?document=MyQVdoc<br>

                                              <p style="width:50%;">
                                              Create a Qlikview file with objects CH02, LB01, LB03 and place it in the server catalogue.
                                              </p>
                                              <p><hr></p>                          

                                              <div class="QvFrame" avqview="QLM" avq="object:.Document\CH02" id="Document\CH02" style="float:left;display:none;width:790px;height:458px;">                         
                                              </div>                            
                                              <div class="QvFrame" avqview="QLM" avq="object:.Document\LB01" id="Document\LB01" style="left:800px;width:100px;height:150px;">                                   
                                              </div>                                      
                                              <div class="QvFrame" avqview="QLM" avq="object:.Document\LB01" id="Document\LB01" style="left:800px;top:560px;width:100px;height:98px;">                                   
                                              </div>                            
                                            </body>
                                          </html>

                                      • Re: Embedding single AJAX chart objects in HTML document

                                        Hi,

                                         

                                        I'm trying to get andy.hyde's code to work : it works perfectly on the Qlikview server but I still have these cross-domain issues if i run it from a remote server ("Access Denied" in my browser's console error), The solution from roelandl doesn't help with my configuration & QV 11.

                                         

                                        Has anyone succeeded in embedding QV objets on a web app from a remote server with QV11 ?

                                        Does Qlikview offer an "official" support / solution for that kind of use?

                                         

                                        Thanks.

                                        Pierre

                                          • Re: Embedding single AJAX chart objects in HTML document

                                            Hi Pierre,

                                            the QV js lib uses XMLHttpRequest objects for communication, like any other AJAX lib. Browsers just don't allow those to be posted to another server/port/protocol, due to the same origin policy (see for instance http://en.wikipedia.org/wiki/XMLHttpRequest#Cross-domain_requests). QV10 does not offer an official solution for this, so I expect the same goes for QV11.

                                             

                                            Although the policy exists for a reason, there are several solutions/workarounds (in general, also summarized on the aforementioned web page). I used flXHR as explained above since that way the QV source can be left untouched. If flXHR doesn't work for you (but are you sure it is deployed as documented, using a crossdomain.xml file and everything?), maybe you can get some alternative to work.

                                             

                                            Another possible direction: did you get the "Access Denied" with or without using flXHR? Maybe you just need to supply the right credentials. I normally get an HTML authentication popup when credentials are required, but it depends on the QVS/IIS configuration whether basic access authentication is enabled or not. Maybe you should look into this.

                                             

                                            Good luck,

                                            Roeland

                                            • Re: Embedding single AJAX chart objects in HTML document

                                              It is a while now since I played with this but if I remember rightly I got it to work in an iFrame. I know I had my intranett showing objects that were running on the qlikview web server.

                                               

                                              I'll see if I can't find my old code.

                                            • Re: Embedding single AJAX chart objects in HTML document

                                              Thank you roelandl for your help.

                                               

                                              I tried to use flXHR as you recommended but i get :

                                              - a "security sandbox error occurred with the flXHR request" in flensed.js using the adaptNative() method. (IE 8)

                                              - same error on firefox with, on the status bar, "Data transmitted from [the qv server ip adress]" (?)

                                               

                                              I also tried setting this before the Qlikview library is called :

                                               

                                              // set flXHR as the default XHR object used in jQuery AJAX requests

                                              $.ajaxSetup({transport:'flXHRproxy'});

                                              // set up the domain that we're going to call and tell flXHR not to try to parse the response as XML..

                                              $.flXHRproxy.registerOptions(serverIpAdress,{xmlResponseText:false,loadPolicyURL: ip + "crossdomain.xml"});

                                               

                                              But it doesn't work better. (I don't get the authentication popup).

                                              In IE8 : IE crashes ("A script on this page is causing Internet Explorer to run slowly ... ")

                                              In Firefox, i get a "Failed to authenticate" popup.

                                               

                                              I also tried to set the authentication mode from "Always" to "Never" on Qlivkiew webserver configuration page.

                                               

                                              andy.hide > it would be great, thanks !

                                               

                                              Note :

                                              If I add the Qlikview server IP in the "Local Intranet Zone" list in IE, without using flXHR, i also get the "Failed to authenticate" popup.

                                                • Re: Embedding single AJAX chart objects in HTML document

                                                  For other people (hopefully you found out yourself by now, I was busy at the time) looking for answers: the "security sandbox error" is what you get when flXHR is not properly deployed (see flXHR documentation), in particular when you didn't grant the required access in crossdomain.xml.

                                                   

                                                  It has nothing to do with the authentication in QlikView and I also never had to change any browser settings.

                                                   

                                                  By the way, I don't really recommend using flXHR unless there is no other way.