In order to use jquery.venny, you need to import within your web page:

• jQuery v1.6.x or higher
• jquery.venny.min.js

Take a peek at the code below, a single function call to initialise the venn diagram is all it takes:

$(document).ready(function(){
  $('#example').venny({
    series: [{
        name: 'Actors',
        data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
      }, {
        name: 'Singers',
        data: ["Freddy Mercury", "Barbra Streisand", "Dean Martin", "Ricky Martin", "Celine Dion", "Marilyn Monroe"]
      }]
  });
});
					

The serie can be a list of value, the plugin will then compute itself the intersections between lists.

$(document).ready(function(){
  $('#example').venny({
    series: [{
        name: 'Actors',
        data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
      }, {
        name: 'Singers',
        data: ["Freddy Mercury", "Barbra Streisand", "Dean Martin", "Ricky Martin", "Celine Dion", "Marilyn Monroe"]
      }]
  });
});
					

The serie can also define the number of occurence for each intersections.

$(document).ready(function(){
  $('#example').venny({
    series: [{
      name: {A: 'List 1',
                  B: 'List 2',
                  C: 'List 3',
                  D: 'List 4'},
      data: {A: 340, B: 562, C: 620, D: 592,
                AB: 639, AC: 456, AD: 257, BC: 915,
                BD: 354, CD: 143, ABC: 552, ABD: 578,
                ACD: 298, BCD: 613, ABCD: 148}
     }]
  });
});
					

Finaly, the serie can define the list values with the number of occurence for each value.

$(document).ready(function(){
  $('#example').venny({
    series: [{
          name: 'sample1',
          data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5"],
          values: [5, 15, 250, 20, 23]
       },{
          name: 'sample2',
          data: ["Otu1", "Otu5", "Otu6", "Otu7"],
          values: [234, 29, 239, 5]
       }]
  });
});
					

The callback function to execute when the user click on a number.

$(document).ready(function(){
  $('#example').venny({
    series: [{
      name: {A: 'List 1',
                  B: 'List 2',
                  C: 'List 3',
                  D: 'List 4'},
      data: {A: 340, B: 562, C: 620, D: 592,
                AB: 639, AC: 456, AD: 257, BC: 915,
                BD: 354, CD: 143, ABC: 552, ABD: 578,
                ACD: 298, BCD: 613, ABCD: 148}
    }],
    fnClickCallback: function() {
      var value = "";
      if (this.listnames.length == 1) {
        value += "Elements only in ";
      } else {
        value += "Common elements in ";
      }
      for (name in this.listnames) {
         value += this.listnames[name] + " ";
      }
      value += ":\n";
      for (val in this.list) {
        value += this.list[val] + "\n";
      }
      alert(value);
    }
  });
});
					

Default is false, if set to true, the click on the number si disabled.

$(document).ready(function(){
  $('#example').venny({
    series: [{
        name: 'Actors',
        data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
      }, {
        name: 'Singers',
        data: ["Freddy Mercury", "Barbra Streisand", "Dean Martin", "Ricky Martin", "Celine Dion", "Marilyn Monroe"]
      }],
      disableClick: true
  });
});
					

Default is false, if set to true, the values provided in a mixte serie will be considered as the number of occurence of the element.

$(document).ready(function(){
  $('#example').venny({
    series: [{
          name: 'sample1',
          data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5", "Otu6", "Otu7"],
          values: [5, 15, 250, 20, 23, 58, 89]
       }],
      useValues: true
  });
});
					

Default is true, an export module is added to the window, if set to false the export module is disabled.

$(document).ready(function(){
  $('#example').venny({
    series: [{
          name: 'sample1',
          data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5", "Otu6", "Otu7"],
          values: [5, 15, 250, 20, 23, 58, 89]
       }],
      exporting: false
  });
});