Google ColumnChart Legend Formatting

Admin MedGenome commented on Mar 21

Hi,

I want to change position of commas (from 123,456,789 to 12,34,56,789 as Indian) in legends. Does Google ColumnChart provide a function similar to "tooltip"?

If not, can I set a CSS class for legend <text>-s? If I can, can I also get a "ready" client event so I can "getElementsByClassName()" and change formats in javascript?

In "tooltip" function, can it support html? I tried setting options.isHtml

My view code looks something like this:

use \koolreport\widgets\google\ColumnChart;

  ColumnChart::create([
    "dataSource" => $this->dataStore("one_type"),
    "columns" => [
      "Month" => ["type" => "string", "label" => "Month", ],
      "Sales Amount" => [
        "prefix" => "₹",
        "tooltip" => function($row) {
            $amt = get_amt_str($row["Sales Amount"]);
            return $row["Month"] . "\n <b>Sales Amount: ₹" . $amt</b>;
        } # "\n" works, but "<b>" does not work, despite setting "isHtml" below.
      ],
    ],
    "options" => [
      "tooltip" => ["isHtml" => true],
      "legend" => ["cssClass" => "column_legend", "position" => "top"],
    ], # does not appear to work
    "clientEvents" => ["ready" => "function() {
      $drilldown.next({type: '{$this->params["type"]}', month: 'Dec'});
    }",], # "ready" event does not seem to work.  "select" event works
    "cssClass" => [
      "text" => "text_class",
      "legend" => "legend_class",
    ], # does not seem to work
  ]);

Kindly help...

Thanks,

Laj

Sebastian Morales commented on Mar 22

I think there's no column's tooltip property like that for Google Charts. What you can do is using another column to act as tooltip for the previous column like this:

    ColumnChart::create(array(
        ...
        "columns"=>array(
            "category",
            "sale"=>array("label"=>"Sale","type"=>"number","prefix"=>"$"),
            "saleTooltip" => array(
                "role" => "tooltip",
                "formatValue" => function($value, $row) {
                    return ...; // format and return sale tooltip here
                },
            ), 
        ),
        "options" => array(
            "tooltip" => array("isHtml" => true),
        )
    ));

Admin MedGenome commented on Mar 25

Thanks for the reply. It appears to behave in a similar way, without formatting for html. It's as if "isHtml" is not working somehow.

Is it by any chance because I'm using PHP 5.6?

  ColumnChart::create([
    "dataSource" => $this->dataStore("one_type"),
    "columns" => [
      "Month" => ["type" => "string", "label" => "Month", ],
      "Sales Amount" => ["type"=>"number"],
      "sales_tooltip" => [  
        "role" => "tooltip",
        "formatValue" => function($value, $row) {
          return "a<b>b</b>";  # showing same text - not bold font
        }
      ],
    ],
    "options" => [
      "tooltip" => ["isHtml" => true, "mode" => "index", "intersect" => true],
      "legend" => ["cssClass" => "column_legend", "position" => "top"],
    ],
    "cssClass" => [
      "text" => "text_class",
      "legend" => "legend_class",
    ],
  ]);

Admin MedGenome commented on Mar 25

Actually bigger challenge for me is to format legends.

I need something either like this

use \koolreport\widgets\google\ColumnChart;
ColumnChart::create([
  "dataSource" => $this->dataStore("one_type"),
  "columns" => [
    "Month" => ["type" => "string", "label" => "Month", ],
    "Sales Amount" => ["prefix" => "₹",],
  ],
  "options" => [
    "legend" => function($axis, $values) {
      if ($axis == "Y_axis") { /* show formatted numbers */ }
      else { /* show  months */ }
    },
  ],
]);

or this, where formatting is done by javascript, based on CSS class:

use \koolreport\widgets\google\ColumnChart;
ColumnChart::create([
  "dataSource" => $this->dataStore("one_type"),
  "columns" => [
    "Month" => ["type" => "string", "label" => "Month", ],
    "Sales Amount" => ["prefix" => "₹",],
  ],
  "options" => [
    "legend" => ["cssClass" => "column_legend"],
  ],
]);

<script>
$(document).ready(function(){
  /* for all objects with class "column_legend", format content properly */
});
</script>

KoolReport's Forum

Google ColumnChart Legend Formatting #3272

Build Your Excellent Data Report