Hi,

I am using the highcharts library and I'm trying to display multiple series on the same graph.
I am using this patch : https://drupal.org/node/1809850#comment-7577085

I am trying to do this programmatically. I have already managed to set up individual serie charts but I can't figure out how to set up the chart options to handle multiple series.

Does anyone have a working example of the structure of their chart options array?

Here is the kind of array I have at the moment:

$options = array(
    'title' => $type,
    'fields' => array(
      'value' => array(
        'label' => t('Value'),
        'enabled' => TRUE,
      ),
    ),
    'xAxis' => array(
      'categories' => $data['x'], // Something like array('January', 'February', 'March')
    ),
    'yAxis' => array(
      'labelField' => '',
    ),
    'type' => 'line',
    'chart_options' => array(
        'chart' => array(
          'plotBackgroundColor' => NULL,
          'backgroundColor' => NULL,
              'margin' => array(0, 0, 10, 0),
              'height' => 250
        ),
        'title' => array(
          'style' => '{font-size: 10px;}'
        ),
        'series' => array(
            0 => array(
                'name' => 'Paris',
                'data'   => array(
                    0 => '100',
                    1 => '150',
                    2 => '220'
                )
           ),
            1 => array(
                'name' => 'London',
                'data'   => array(
                    0 => '200',
                    1 => '130',
                    2 => '140'
                )
           )
        )
    )
  );

Thanks,
Chris

Comments

rongok’s picture

rongok commented

Here is how I do to display multiple series on the same graph. I am not using any patch. 

$data = array(array ('date' => '2013-02-12', 'Indian 25%' => '545','pak 5%' => '678','Pak basmati 2%' => '567',), array ('date' => '13-02-2013', 'Indian 25%' => '545','pak 5%' => '678','Pak basmati 2%' => '567',), array ('date' => '14-02-2013', 'Indian 25%' => '545','pak 5%' => '678','Pak basmati 2%' => '567',), array ('date' => '15-02-2013', 'Indian 25%' => '545','pak 5%' => '678','Pak basmati 2%' => '567',), );
  $options_line = array(
    'title' => 'Long Grain White Rice - Low Quality',
    'fields' => array(
      'Indian 25%' => array(
        'label' => t('Indian 25%'),
        'enabled' => TRUE,
	),
      'pak 5%' => array(
        'label' => t('Pak 5%'),
        'enabled' => TRUE,
	),
      'Pak basmati 2%' => array(
        'label' => t('Pak basmati 2%'),
        'enabled' => TRUE,
       ),
    ),
    'xAxis' => array(
      'labelField' => 'date',
    ),
    'data' => $data,
    'type' => 'line',
  );
 
  $build['line'] =  array(
    '#theme' => 'visualization',
    '#options' => $options_line,
  );
ouissla’s picture

ouissla commented

Thank you! this works great.

rongok’s picture

rongok commented
Status: Active » Fixed

Glad that it works out for you.

ylys’s picture

ylys commented

Hi, guys
Where you write this code for displaying charts?
I use visualisation in views, but I don't understand how should I customize Highcharts options.

Thanks.

ouissla’s picture

ouissla commented

Hi ylys,

This code can be used if you create your chart programmatically. Take a look at this page: http://webwash.net/tutorials/intro-visualization-api-part-2-highcharts-and-code
This should help you.

Chris

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.