Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 
Not applicable

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.

1 Solution

Accepted Solutions
Not applicable
Author

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="https://community.qlik.com/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.

View solution in original post

26 Replies
Not applicable
Author

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="https://community.qlik.com/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.

Not applicable
Author

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

Not applicable
Author

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

Not applicable
Author

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

Not applicable
Author

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

Not applicable
Author

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

Not applicable
Author

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)

marcobombo
Contributor
Contributor

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.

Not applicable
Author

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.