Renderer for Charts and Graphs APIs

I want to use forena module with d3js library. This feature looks like perfect for my purpose.
Have someone started with this?
I tried to do a git clone but I got errors and the reports (default and created by myself) couldn't be deleted.

Thanks :)

We have not started any D3 support, but patches are welcome. There are easy ways to consume forena data as so it seems that any client side graphing solution would not be to hard to implement. I have not yet had any time to experiment. I'm familiar with the one notice error that you posted on the issue queue and will get to fixing it.

D3 nor any other php graphing technique will implemented in Forena will require the use of PHP as an input filter.

If you need assistance in figuring out how to access data using SQL data blocks in forena as JSON. File a separate issue with regard to that (just to keep the graphing issues separate.

Hi :)

I have created a small module for using forena data with d3js library (http://d3js.org/) and using forena reports.
I will write here and if you want I can contribute in the documentation of forena module. I am sorry I haven't contributed to the forena module. It was easier to create my own module using forena reports. I think to explain how to use forena in your custom module is another way to contribute :)

In my module:
- I am creating a block for inserting a graphic wherever in my site ( I can create more blocks of course...).
- I am using libraries module (https://www.drupal.org/project/libraries) for using the library d3js inside my block.
- I am creating my own javascript file where I can use d3js library and I can pass parameters from my site like forena data using forena_data('customsql/gemaUsersSessions’); for example.
- I can insert forena reports in my block that I have created previously with forena module using SVGGrpah library.

gemacharts.info

name = Gema charts
description = D3 charts blocks using Forena data.
core = 7.x
version = 7.x-1.x-dev
dependencies[] = forena
dependencies[] = libraries (>=2.0)
scripts[] = gemacharts.js

gemacharts.module

<?php
/**
* Implements hook_block_info().
*/
function gemacharts_block_info() {
  $blocks = array();
  $blocks['gemitablock'] = array(
    'info' => t('Gemita block'),
  );
  return $blocks;
}

/**
* Implements hook_block_view().
*/
function gemacharts_block_view($delta = '') {
  $block = array();
  switch ($delta) {
    case 'gemitablock':
      $block['subject'] = '';
      $block['content'] = _gemacharts_block_charts_content();
      break;
  }
  return $block;
}

function _gemacharts_block_charts_content() {
//I can pass parameters to my javascript gemacharts.js in the module
  $block_name = str_replace('.', '/', 'customsql/gemaUsersSessions');
  $parms = array_merge($_GET, $_POST);
  unset($parms['q']);
  $data = forena_data($block_name, $parms);
  $ret = array();
  foreach($data as $row) {
    $ret[] = $row;
  }
  $json = drupal_json_encode($ret);
  drupal_add_js(array('gemacharts' => array('json' => $json)), 'setting');

  // If I don't want to pass parameters
  drupal_add_js('gemacharts.js'); 

 //Inserting a forena report in my block
  $forene = forena_report('gemitaUsersCreated', '');
  return $forene['content']['#markup'];  
}

/**
 * Implements hook_libraries_info().
 *
 * For defining external libraries.
 */
function gemacharts_libraries_info() {
  $libraries['d3'] = array(
    'name' => 'D3',
    'vendor url' => 'http://d3js.org/',
    'download url' => 'http://d3js.org/',
    'version callback' => 'gemacharts_version_callback',
    'files' => array(
        'js' => array('d3/d3.js'),
      ),
    );

  return $libraries;
}

function gemacharts_version_callback() {
  return TRUE;
}

gemacharts.js

(function ($) {
  Drupal.behaviors.gemacharts = {
    attach: function (context, settings) {
      // Your Javascript code goes here
      // alert("Hello!"); //Simple message to check it works...
      var json = Drupal.settings.gemacharts.json; //json parameter I have passed.
      alert(json);
      // I can use here d3js library now! with the data from forena! :)

    }
  };
}(jQuery));

Thanks for a great job with forena module and fast replies in the issues :)

Gema

Hi Pierre.Vriens!

Thanks :)
I was also considering the option of using a forena "skin" but I am not sure if that's possible.

It would be nice to know the opinion of metzlerd :)

PD: I have modified my comment #7 for adding the way I am getting the json data in my javascript.

Have a nice weekend!

Yes it is certainly possible. I generally don't use the libraries module unless it's needed by something else. You can certainly use skins to dynamically load javascript files. I wonder if it would be a good idea to create a sandbox project for collaborative work on this? I'd love to see us develop a really solid example of a d3 integrated library. There may be some helper js functions that we could add to forena.js to make this job easier.

Forena already allows for support of retrieving data blocks in json format, but there may be some advantage for thinking about how that data might need to be changed. But that would normally be done via an ajax call? Perhaps I could start to work on an example for that?

Anyway gemalm, if you are somewhat comfortable with git, would you be interested in collaborating on an example for this? We could decide to include the example into the forena project at a later date if we find this successful?

I am working on this.

Glad to hear it... would you be interested in collaborating via a sandbox project?

Hi,

I am sorry because I had to start with another task and I had never created a sandbox project before although I am familiar with git :)
This is just a starting point and I have no experience with d3js so I haven't had time for creating the chart. But I had the data in the block for creating the chart.

This is the sandbox project I have created, https://www.drupal.org/sandbox/gemalm/2383267

:)

No need to apologize. I was actually going to create the the sandbox for you, but just wanted to make sure that we had a common place to work. Would you mind temporarily granting access to me and then we can work together on examples. I've been studying d3 a lot lately. I think actually it may be a library that is really useful to use in conjunction with PHP SVGGraph as d3 is really a helper library for SVG generation rather than being a full fledged charting/graphing library by itself.

I've been starting to think about enhancements to Forena in terms of helper functions to generate these graphs and am interested in what you think you need from forena to get the data you need.

One of my coworkers is using a general strategy of using forena to generate some base SVG (in an .frx file) and then having D3 do manipulations animations and plug in data. I am starting to look at adding support to Forena to be able to populate data in JSON settings object properties, but there is already quite a bit of functionality for populating json based on data from forena using AJAX calls. I was wondering what approoach you were working on?

Regardless I created a sandbox project for collaborating and reporting examples. It can be found at https://www.drupal.org/sandbox/metzlerd/frx.

Sorry wrong url ..... Corrected in original post.

Basically a sandbox is a GIT repos without the packaging scripts to make downloadable versions. In this case I've given all three of us access to the repos, so we can all check out and commit code until we get the features that we need. In this case, the frx module is not a copy of forena, but rather an example of a custom module that starts to include d3 libarary and stuff.

We can all create issues on that project, or continue the discussion here until we have something that we can really call D3.js support for forena.

I've actually made a couple of small commits to Forena to add some helper features in the 7.x-4.x-dev branch so the sandbox project should be used in conjunction with a git checkout of forena-7.x-4.x dev branch.

See #2383509: D3 Strategy. for the issue on the project to continue this discussion on d3 integration. I will document the general strategy that I am taking there.

I looked briefly at these implementations and they seem to have a sane API for working with them. I don't have the time or need to implement them, but if you wanted to start working on one of them you could consider starting a sandbox or using the Frx Sandbox to start a custom renderer. We could then implement them after we got them working in the sandbox, and we wouldn't hold up the current releases for them.

You already have commit rights to https://www.drupal.org/sandbox/metzlerd/frx but if you want to start your own I understand. You could feel free to commit as much code as you like and that would give us a shared space to edit?