Blocks

"Bubble Chart" inserts a javascript block with the setBubbleChartBlock routine to generate a bubble chart into a canvas tag with the values passed as parameters:

setBubbleChartBlock(canvasId, values);

• canvasId: the routine requires you insert a <canvas id="canvasId"></canvas> tag in your webpage where display the chart. The id of the canvas tag should be passed as the first parameter of the routine.
• values: array of values to display in the chart. For example: [10,5,100].
  
  To display a label associated to the values, the elements in the array must be objects with the structure: {label: <text here>, value: <number here>}
  For example: [{label: 'First item', value: 10},{label: 'Second item', value: 5},{label: 'Third item', value: 100}]
  
  To specify the color of points, pass an object as the third parameter of the "setBubbleChartBlock" function, with the color attribute (if no color is defined, the plugin will use a color by default).
  For example:
  setBubbleChartBlock('canvasId', [{label: 'First item', value: 10},{label: 'Second item', value: 5},{label: 'Third item', value: 100}],{color: '#FF0000'});

The block reads the exchange rates from the Currency Converter API website

"Line Chart" inserts a javascript block with the setLineChartBlock routine to generate line chart into a canvas tag with the values passed as parameters:

setLineChartBlock(canvasId, data, config);

• canvasId: the routine requires you insert a <canvas id="canvasId"></canvas> tag in your webpage where display the chart. The id of the canvas tag should be passed as the first parameter of the routine.
• data: array of datasets with the information to display in the chart. For example:
  
    [
      {
        'dataset': 'First Dataset',
        'color' : 'red',
        'values' : {
          'label a': 10,
          'label b': 15,
        'label c': 30
        }
      },
      {
        'dataset': 'Second Dataset',
        'color' : 'blue',
        'values' : {
          'label a': 40,
          'label b': 20,
          'label c': 5
        }
      }
    ]
• config: object tha allows to define the chart title. For example:
  
  {'title': 'Line Chart'}

Example:

setLineChartBlock('canvasId', [{'dataset': 'First Dataset','color': 'red','values': {'label a': 10,'label b': 15,'label c': 30}},{'dataset': 'Second Dataset','color': 'blue','values': {'label a': 40,'label b': 20,'label c': 5}}],{'title': 'Line Chart'});

"Read CSV File" inserts a javascript block with the readcsv routine for reading an online CSV file and generate a javascript array to be used in the form:

readcsv(args);

• args:

  javascript object with the following properties:

  • url: url to the online CSV file.
  • headline: boolean (true or false), indicates if the first row in the CSV file is a headline row or not (false by default)
  • delimiter: symbol to delimit the row's columns (the comma symbol "," by default)
  • quotation: symbol for closing the textual columns (the double-quote symbol (") by default)
  • filter: plain object for filtering the CSV rows. For example, assuming that the file includes the columns names: column_a, column_b, and column_c, and you want get the rows whose column_a has the value 3, and column_b the value "qwerty", the filter object would be: {'column_a':3,'column_b':'qwerty'}
  • callback: javascript function that would be called after read the CSV file. The callback receives as parameter an javascrip array with the CSV rows.

    Every row would be a columns array, or an object (if the headline property was passed as true).

    Callbacks distributed with the block:

    populate_dropdown(selector, args): Populates a dropdown field with the CSV data. First parameter (selector), a valid jQuery selector to identify the dropdown field. Second parameter (args), plain object with two properties, "value": the column's name to use as values of the field's options, "text": the column's name to use for the texts of the field's options.

    Example:

    readcsv({'url':'http://www.websitedomain.com/file.csv', 'callback':populate_dropdown('[name="field_name"]', {'value':'column_a', 'text':'column_b'})});

    populate_input(selector, args): Populates an input (or textarea) field with the CSV data. First parameter (selector), a valid jQuery selector to identify the dropdown field. Second parameter (args), is a plain object with the property, "value": the column's name for the field's value.

    Example:

    readcsv({'url':'http://www.websitedomain.com/file.csv', 'callback':populate_input('[name="field_name"]', {'value':'column_a'})});

    Implementing your own callbacks:

    readcsv({'url':'http://www.websitedomain.com/file.csv', 'filter':{'column_a':3,'column_b':'qwerty'}, 'callback':function(csv_data){/* Your code Here*/}});

This will insert a code block to detect HTTP or HTTPS and then force usage of HTTPS to be sure that the page is loaded over a SSL secure connection. Note that your website domain must have SSL available in order to use this feature.

"Pie Chart" inserts a javascript block with the setPieChartBlock routine to generate pie chart into a canvas tag with the values passed as parameters:

setPieChartBlock(canvasId, values);

• canvasId: the routine requires you insert a <canvas id="canvasId"></canvas> tag in your webpage where display the chart. The id of the canvas tag should be passed as the first parameter of the routine.
• values: array of values to display in the chart. For example: [10,5,100].
  
  To display a label associated to the values, the elements in the array must be objects with the structure: {label: <text here>, value: <number here>}
  For example: [{label: 'First item', value: 10},{label: 'Second item', value: 5},{label: 'Third item', value: 100}]
  
  To specify the colors of bars, define the colors code as part of the object (if no colors are defined, the plugin will use the default colors).
  For example: [{label: 'First item', value: 10, color: '#FF0000'},{label: 'Second item', value: 5, color: '#00FF00'},{label: 'Third item', value: 100, color: '#0000FF'}]

Example:

setPieChartBlock('canvasId', [{label: 'First item', value: 10, color: '#FF0000'},{label: 'Second item', value: 5, color: '#00FF00'},{label: 'Third item', value: 100, color: '#0000FF'}]);

"Ad Blocker Alert" displays a pop-up window if there is an Ad Blocker active in the browser, and limit the access to the page's content.

Message to display:

Your browser uses an Ad Blocker that prevents the correct functioning of this page.