JS Charts - Option Type J

For this feature to work we need to the add the option type J to our section or manually set

 

$options['js_charts'] = true;

 

 We have different types of Charts and each have different configuration, all with the use of the array variable $jschart_settings:

LINE CHARTS : we need to set 3 mandatory values:

$jschart_settings = array(
  'type' => 'line',
  'x-value'=>' DB_COL_NAME',  //The value on the X axis (database column name)
  'data-value'=>'DB_COL_NAME',  // The value on the Y axis (database column name)
);

 

This is the complete list of default values that can also be changed:

 

$jschart_settings = array(
  'type' => 'line',
  'parentid' => 'chart_div', //chart wrapper
  'canvasid' => 'myChart', //canvas ID
  'width'=>'100%',
  'height'=>'400px',
  'x-value'=>' DB_COL_NAME',  //The value on the X axis (database column name)
  'data-value'=>'DB_COL_NAME',  // The value on the Y axis (database column name)
  'fillColor'=>$color3,
  'strokeColor'=>$color3,
  'pointColor'=>$color2,
  'pointStrokeColor'=>'#fff',
  'pointHighlightStroke'=>$color3
);

 

PIE CHARTS : we need to set the same 3 mandatory values for LINE CHARTS, but in this case we can also add an image and a link for each result, in such case we can decide to "fetch" the image source or link URL as is from the database, or us a format that will be replaced with a value or values from the database.

 

$jschart_settings = [
  'type' => 'pie',
  'x-value'=>'DB_COL_NAME',
  'data-value'=>'DB_COL_NAME',
  'image-value'=>[
    'format' => 'replace', //replace or from fetch
    'src' => '/images/%%ID%%/icons/%%NAME%%.jpg', //db column when fetch
    'values'=>[
      0 => 'ID',
      1 => 'NAME'
    ]
  ], //optional
  'link-value'=>[
    'format' => 'fetch', //replace or from fetch
    'url' => 'URL'
  ], //optional
];

 

These are the full options and their default values:
 

//JS Pie Charts
$colors = array();
$colors[0] = array(
$color3."ff",
$color3."dd",
$color3."bb",
$color3."99",
$color3."88",
$color3."77",
$color3."66",
$color3."55",
$color3."44",
$color3."33",
$color3."22",
$color3."11");

$colors[1] = array(
$color3."ff",
$color3."dd",
$color3."bb",
$color3."99",
$color3."88",
$color3."77",
$color3."66",
$color3."55",
$color3."44",
$color3."33",
$color3."22",
$color3."11");

$jschart_settings = [
  'type' => 'pie',
  'parentid' => 'chart_div',
  'canvasid' => 'myChart',
  'width'=>'40%',
  'height'=>'300px',
  'x-value'=>'DB_COL_NAME',
  'data-value'=>'DB_COL_NAME',
  'image-value'=>[
    'format' => 'replace', //replace or from fetch
    'src' => '/images/%%ID%%/icons/%%NAME%%.jpg', //db column when fetch
    'values'=>[
      0 => 'ID',
      1 => 'NAME'
    ]
  ], //optional
  'link-value'=>[
    'format' => 'fetch', //replace or from fetch
    'url' => 'URL'
  ], //optional
];
'max-results'=>10,
'color'=>$colors
];