Could not complete the development of Raphael Pie Chart Extension Object

[#1]

Dear All,

I'm learning Qlikview Extension Object and i'm trying to build raphael Pie Chart extension. I'm struck and could not complete it.

Could you please have a look at my script and let me know what i'm missing?

I have less knowledege in Scripting and hence i could have missed few things. Please help me.

var template_path = Qva.Remote + "?public=only&name=Extensions/RaphelPieChart/";

function extension_Init()

{

          // Use QlikView's method of loading other files needed by an extension. These files should be added to your extension .zip file (.qar)

          if (typeof jQuery == 'undefined') {

              Qva.LoadScript(template_path + 'raphael.js', function() {

            Qva.LoadScript(template_path + 'pie.js', extension_Done);

              });

          }

          else {

              Qva.LoadScript(template_path + 'raphael.js', function() {

                Qva.LoadScript(template_path + 'jquery.js', function() {

                  Qva.LoadScript(template_path + 'pie.js', extension_Done);

                              });

              });

          }       

}

function extension_Done(){

          //Add extension

          Qva.AddExtension('RaphelPieChart',

          function(){

                    //Load a CSS style sheet

                    Qva.LoadCSS(template_path + "demo.css");

                    Qva.LoadCSS(template_path + "demo-print.css");

          var _this = this;

          var iFrameWidth = _this.GetWidth();

          var iFrameHeight = _this.GetHeight();

          var divName = _this.Layout.ObjectId.replace("\\", "_");

          if (_this.Element.children.length == 0) {

                    var ui = document.createElement("div");

                    ui.setAttribute("id", divName);

                    _this.Element.appendChild(ui);

                    $("#" + divName).css("height", iFrameHeight + "px").css("width", iFrameWidth + "px");

          } else {

                    $("#" + divName).css("height", iFrameHeight + "px").css("width", iFrameWidth + "px");

                    $("#" + divName).empty();

          };

  for (var i=0,k=_this.Data.Rows.length;i<k;i++){

                    var row = _this.Data.Rows;

                              var th = row[0].text;

                              var td = row[1].text;

                              var temptd = Number(td);

                              var renderer = new Raphael.fn.pieChart(iFrameWidth, iFrameHeight, 200, td, th, "#fff");

                    }

          renderer.draw();

          });

}

//Initiate extension

extension_Init();

Thanks in advance,

Srini.

[rbecher]

Hi Srini,

I see some possible issues here. Could you please upload the extension file .qar and a test application .qvw. It's not really clear for me how this sould work. You try to create a pie chart for every data record? Also, the Raphael canvas has to be bound to the divname, I think..

- Ralf

[#3]

Hi Ralf,

Please find the attachements.

Thanks,

Srini.

[#4]

Hi Ralf,

Raphael has the animation pie chart and i was trying to build the same. It should take the set of data from the dimension and measure and create the pie chart.

Thanks,

Srini.

[rbecher · Accepted solution]

Hi Srini,

I made nearly a complete reimplementation of it.. 😉

After this is working now the next step would be to move all properties into the properties pane dialog like the chart title.

- Ralf

[#6]

Hi Ralf,

It looks like you have included the pie chart function and animate function inside the script.

You have also changed the pie.js file and loading g.pie and the g.raphael.js. Could you please let me know why you have made these changes.

I'm trying to learn Qlikview extension and trying to create some extension chart. If you can share some documents and some basic codes i have to learn and how can i get started, I will be happy to do that.

Could you please help me?

Thanks,

Srini.

[rbecher]

Hi Srini,

basically, I have searched for a appropriate example first: http://i2.sitepoint.com/examples/raphael/graphael.html

Then, I have implemented the JavaScript code from the example plus the extension related functionalities (data gathering, divName binding).

A good starting point is the Basic Extension Documentation and Template:

http://community.qlik.com/message/297501#297501

from Brian Munz.

- Ralf

[#8]

Hi Ralf,

Thanks for sharing the link and the Extension documentation document. I have practised those examples earlier. I was able to print the data using HTML tags. But how to add this SVG tag and display it. I was looking at the html and i was trying to reproduce the same. But in the actual output after the DIV tag the SVG tag is placed based on the JavaScript.

When i search for charts i get the html, js files. I just imitate the html file as Script.js. By seeing your example, i also should understand the logic of js and call the function in the Script.js.

Would you be interested to help me when i get problem while development?

Thanks,

Srini.

[rbecher]

Hi Srini,

what problem do you try to solve?

- Ralf

[#10]

Hi Ralf,

No, i'm actully learning to create more extension objects, So when i get problem will you be able to help me?

Thanks,

Srini.