Hi,

when using the native JavaScript-implementation for GoogleCharts, "position: bottom" for a LineChart works fine, when using the bundle the legend is always right for position "top / bottom / right" or left for "left".

Hi. Great bundle! Makes it a lot more simpler to implement the Google Charts API.
I'm having an issue where i cannot get the print PNG function to work, as is described in the readme.

Below is my code, I want to generate a PNG from an org structure, however the PNG DIV remains empty.

    <div id="div_chart"></div>
    <div id="png"></div>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        {{ gc_start(orgchart, 'div_chart') }}

        {{ gc_event(orgchart, 'ready', 'printPng') }}

        function printPng() {
            document.getElementById('png').outerHTML = '<a href="' + {{ orgchart.name }}.getImageURI() + '">Printable version</a>';
        }

        {{ gc_end(orgchart) }}
    </script>

PHPStorm gives a semantic error on the {{ orgchart.name }}.getImageURI() part: This inspection reports expression statements which are not assignments or calls. Such statements have no dubious semantics, are normally the result of programmer error.

Hi
I'd like to know how to always show tooltip even for null results. When I put the mouse on element with 0 views the tooltip doesn't appear.

https://stackoverflow.com/questions/54202640/how-to-always-show-tooltip-even-for-null-results

animationfinish
click
error
onmouseover
onmouseout
page
rangechange
ready
rollup
select
sort

I'm use this code
$users= new TableChart();

$users->getData()->setArrayToDataTable(
            [
['ID', 'NAME', 'ACTION'],
['1', 'KHalil', ' I want to add button href here'],
]
    );

I want to add a button in Column Action

Hello,

Est ce que c'est possible d'afficher le graphique, avec deux courbes afin de montrer la différence de chiffres d'affaires entre deux entreprises , sur une période donnée par exemple ?

Hi Guys,

First thanks, this bundle is perfect to me and is very cool.

I want to ask you, is there a method of get the function name when I call "gc_draw"?, currently the function name is something like this "drawChart24b8756c043abd19abdd5ac1d94d5e97" in javascript, that value, I want it.

thanks,

Bonjour,

Est il possible d'utiliser les fonctions dashboard de google ? (notamment les fonctionnalités de ChartRangeFilter).
https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter
Je t'ai pas trouvé comment faire avec le bundle.

Merci

Is there a way to access the data in a Timeline row with just the provided Twig functions?

On select I need to get the name of the bar, for example "M210001 -"

So far I haven't found a way to do this.

In an attempt to display a line chart with 4 series instead of rendering the chart I get this:

I suspect the error is in the chart definition because I can replace it with a known good definition and get the expected results. A dump of the chart definition revealed nothing obvious to me, but that's not worth much!

Using the browsers inspector I see this:

<div id="google-visualization-errors-all-1" style="display: block; padding-top: 2px;"><div id="google-visualization-errors-0" style="font: 0.8em arial, sans-serif; margin-bottom: 5px;"><span style="background-color: rgb(192, 0, 0); color: white; padding: 2px;">g is undefined<span style="font-size: 1.1em; font-weight: bold; cursor: pointer; padding-left: 10px; color: black; text-align: right; vertical-align: top;">×</span></span></div></div><div style="position: relative; width: 500px; height: 300px;"><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg width="500" height="300"><defs></defs></svg></div></div>

The chart definition follows (options definition make no difference so omitted for brevity). Note that $row->getSummaryDate() returns a DateTime object, other $row methods return integers:

        $summary = $this->em->getRepository(Summary::class)->findAll();
        $chart = new LineChart();
        $dataTable[] =  ['Date', '2017', '2016', '2015', '2014'];
        foreach ($summary as $row) {
            $dataTable[] = [
                $row->getSummaryDate(),
                $row->getYr2017(),
                $row->getYr2016(),
                $row->getYr2015(),
                $row->getYr2014()
            ];
        }
        $chart->getData()->setArrayToDataTable([
            $dataTable
        ]);

        return $chart;
    }

Template includes:

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        {{ gc_draw(chart, 'div_chart') }}
    </script>
{% endblock %}

I need capture a click event but i dont know how to implement the listener event. Can i help me??

Hi everyone,

I'm using this bundle right now and i'm trying to draw a target line on my area chart.
But I don't know how to do that.
Please I need your help.

Thanks

I have problems setting up a material line chart because some options are not being applied.

For Example:
$chart->getOptions()->setLineWidth(5); $chart->getOptions()->setPointSize(10); $chart->getOptions()->getVAxis()->setMinValue(0);

None of the options shown above change anything about how my chart looks. Is this a known bug?
However, other settings for the same diagram such as the title will work.

I like to use your library very much and would appreciate help :)

I try since weeks to update the chart via an AJAX request. I use tabs which send of the AJAX request
In my normal view I have the following function:

$('#country-tabs a').on('click', function (e) {
         e.preventDefault()
         $(this).tab('show');
         var $this = $(this),
         loadurl = $this.attr('href');

         var form = $('form');
                       
         var jsonData = $.ajax({
             url: loadurl,  
             type:       'POST',
             data: form.serializeArray(),
             dataType:   'json',  
             async: false,

             success: function(data, status) {              
                 $("div#client-loop-container").html(data.chartview); 
                 $('#status').addClass('status-bar-success');
     }
       }).responseText;

     });

My controller then returns

if ($request->isXmlHttpRequest())
       {   
         $result = $this->renderView('fruits/chart.html.twig', [
                 'fruitCounts' => $fruitCounts,
                 'barchart' => $barchart
           ]);
          return new JsonResponse(['success' => true, 'chartview' => $result]);
    }

My chart.twig.html then has the following:

   <div id="client-loop-container">
       <div class="w-100" id="div_chart"></div>
        {{  dump(barchart) }}      
        {% block javascripts %}
            <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
           <script type="text/javascript">          
             {{ gc_draw(barchart, 'div_chart') }}
           </script>
       {% endblock %}

dump(barchart) Shows CMEN\GoogleChartsBundle\GoogleCharts\Charts\LineChart with the updated data, but I do not get any Chart displayed. What am I missing here? Is it a bug, do I use it wrong or is it simply not possible to do?

I, trying to setup a calendar chart.
I begin by copying pasting the example provided in the doc but not working. Got the error mentioned in the title.
Did I forget any include statement or whatever ?

Is it possible to reproduce the same result like this design?
http://jsfiddle.net/x8dafm9u/

Or by using:

var material = new google.charts.Bar(document.getElementById('chart_div'));
material.draw(data, options);

Would you be kind enough to create an example documentation paper on how to pull chart data using JavaScript from the backend?

Is it possible to implement a feature where all the javascript files are stored locally? I'm willing to create a pull request if you can point me in the right direction :)

Perhaps with:
https://github.com/GoogleWebComponents/google-chart/blob/master/bower.json

When I run the example I get this error. Kindly let me know what am I missing?

<script type="text/javascript">{{ gc_draw(piechart, 'div_chart') }}</script>

Hi,

Would it be possible to add trendlines?.
https://developers.google.com/chart/interactive/docs/gallery/trendlines

Thanks for advance.

I'm using the Google Charts With this bundle in symfony, I'am wondering if it's possible to use a transparent background on a chart (e.g. line graph, pie chart, etc.)?

Hello,

First, Thank you for this package,
Then :
I don't know if I'm in the right place to ask this question.

How do you change the date format in LineChart ?
I would like to have "dd/mm/YYYY" and have years given 2 by 2.

Can I find somewhere all the options and possibility of this package ? Thank you

This is a sample of my data :

array:19 [▼
0 => array:2 [▼
"order_number" => "188"
"yearCreated" => "2001"
]
1 => array:2 [▼
"order_number" => "142"
"yearCreated" => "2002"
]
2 => array:2 [▼
"order_number" => "109"
"yearCreated" => "2003"
]
3 => array:2 [▼
"order_number" => "130"
"yearCreated" => "2004"
]
4 => array:2 [▼
"order_number" => "155"
"yearCreated" => "2005"
]
5 => array:2 [▼
"order_number" => "334"
"yearCreated" => "2006"
]
6 => array:2 [▼
"order_number" => "487"
"yearCreated" => "2007"
]
7 => array:2 [▼
"order_number" => "612"
"yearCreated" => "2008"
]
8 => array:2 [▼
"order_number" => "336"
"yearCreated" => "2009"
]
9 => array:2 [▼
"order_number" => "278"
"yearCreated" => "2010"
]
10 => array:2 [▼
"order_number" => "259"
"yearCreated" => "2011"
]
11 => array:2 [▼
"order_number" => "183"
"yearCreated" => "2012"
]
12 => array:2 [▼
"order_number" => "148"
"yearCreated" => "2013"
]
13 => array:2 [▼
"order_number" => "184"
"yearCreated" => "2014"
]
14 => array:2 [▼
"order_number" => "152"
"yearCreated" => "2015"
]
15 => array:2 [▼
"order_number" => "178"
"yearCreated" => "2016"
]
16 => array:2 [▼
"order_number" => "117"
"yearCreated" => "2017"
]
17 => array:2 [▼
"order_number" => "122"
"yearCreated" => "2018"
]
18 => array:2 [▼
"order_number" => "50"
"yearCreated" => "2019"
]
]

And I have only 2010 in the H-Axis...

Hi,
we are trying to display a chart using your bundle and have some difficulties regarding the time.
It seems that our datetime object that includes date and time in php is converted to a JS object with only date.
Since we are trying to display all the heart rate measures during 2 hours, it displays instead 1 point on the day of the measures.

Is it a bug, or are we incorrectly using the bundle?

Thanks in advance,
Sophie

Our controller

 /**
     * @Route("/HROverTimeAction")
     */
    public function HROverTimeAction(Request $request)
    {

        $heartRateByTime=array(); // contains rows with heartRate and timestamp

        $HrOverTimeData=array();
        $HrOverTimeData[0]=[['label' => 'Date', 'type' => 'datetime'],['label' => 'Heart Rate', 'type' => 'number']];
        for($x = 0; $x < count($heartRateByTime ); $x++) {
            $HeartRate = $heartRateByTime[$x]["heartRate"];
            $timestamp = $heartRateByTime[$x]["timestamp"];
            $dateInISO8601Format=date('c',$timestamp);
            $HrOverTimeData[$x+1]=[new \DateTime($dateInISO8601Format),$HeartRate];
        }

        $HrOverTimeChart= new ScatterChart();
        $HrOverTimeChart->getData()->setArrayToDataTable($HrOverTimeData);
        $HrOverTimeChart->getOptions()->getHAxis()->setTitle('Time');
        $HrOverTimeChart->getOptions()->setPointSize(1);
        $HrOverTimeChart->getOptions()->getVAxis()->setTitle('Heart Rate');
        $HrOverTimeChart->getOptions()->getHAxis()->setFormat('d/MM HH:mm');
        $HrOverTimeChart->getOptions()->getLegend()->setPosition('right');
        $HrOverTimeChart->getOptions()->setCurveType('function');



        return $this->render('default/hrOverTime.html.twig', array(
            'HrOverTimeChart'=>$HrOverTimeChart,
        ));
    }

Our template

<div id="HrOverTimeChart" class="chart"></div>

                               <script type="text/javascript" src="https://www.google.com/jsapi"></script>
                                <script type="text/javascript" xmlns="http://www.w3.org/1999/html"></script>
                                <script type="text/javascript">

                                    {{ gc_draw(HrOverTimeChart, 'HrOverTimeChart') }}
                                </script>

the contents from the var hrOverTimeChart, according to the debugger, shows that the chart object does have the date and time:

$HrOverTimeChart = {CMEN\GoogleChartsBundle\GoogleCharts\Charts\ScatterChart} [4]
 options = {CMEN\GoogleChartsBundle\GoogleCharts\Options\ScatterChart\ScatterChartOptions} [34]
 elementID = null
 data = {CMEN\GoogleChartsBundle\GoogleCharts\Data} [2]
  arrayToDataTable = {array} [1 001]
   0 = {array} [2]
   1 = {array} [2]
    0 = {DateTime} [3]
     date = "2016-03-23 00:06:55"
     timezone_type = 1
     timezone = "+00:00"
    1 = 0

the javascript code produced shows dates without time:

                                    google.load("visualization", "1", {packages:["corechart"]});google.setOnLoadCallback(drawChart24f345b82a68ff534d0b0edb7f3185b5);
            function drawChart24f345b82a68ff534d0b0edb7f3185b5() {var chartHrChart = new google.visualization.ScatterChart(document.getElementById("hrChart"));var dataChartHrChart = new google.visualization.arrayToDataTable([[{"label":"Date","type":"datetime"}, {"label":"Heart Rate","type":"number"}], [new Date(2016, 2, 23), 0], [new Date(2016, 2, 23), 0], [new Date(2016, 2, 23), 0]

first of all, i want to thank you for this bundle, i want to know how to make charts responsive.
thanks

Hello everyone,
I am trying to put the Legend in the center of my GeoChart, using:
$geoChart->getOptions()->getLegend()->setPosition('center')
but I have this Error:
Attempted to call an undefined method named "setPosition" of class "CMEN\GoogleChartsBundle\GoogleCharts\Options\GeoChart\Legend".
The Legend of GeoChart can't me moved?
Thanks for your help!

The default data color of "previous data" on diff charts is #eeeeee.
With $chart->getOptions()->setColors(['#xxxxxx']); i can set colors of oldColumnChart and newColumnChart.
Is there a way to set color of diffColumnChart?
https://github.com/cmen/CMENGoogleChartsBundle/blob/master/Resources/doc/diff_charts.md

EDIT:
I found this workaround:
$('rect[fill="#eeeeee"]').each(function () {
$(this).attr("fill","#anothercolor");
});
But i don't like it...

I need to draw a chart in a tab that's not visible on load.
This situation lead to some graphical error (like worng text alignment)

Is there a way to redraw the chart on events?

I haven't understood the documentation official because they using javascript https://developers.google.com/chart/interactive/docs/gallery/calendar#a-simple-example,

I want to make it with php in symfony like the pieChart

      $pieChart = new PieChart();
       $pieChart->getData()->setArrayToDataTable(
           //data...
       ); ..

i have used 

$calendar = new Calendar();
$calendar->getData()->setArrayToDataTable();..

but not working

Current code

// GoogleCharts/Data.php l.75
if ($value instanceof \DateTime) {
// ...
]

Use \DateTimeInterface instead on \DateTime.

Allows us to use object like \DateTimeImmutable and so on...

Hi. I'm trying to get an Org chart to display correctly and I've noticed a strange issue. My first node in the datatable, which is the root node, is always being ignored. The root node does not get rendered, however the root node is derived from the leaf node.

Your example:

$org = new OrgChart();
$org->getData()->setArrayToDataTable(
    [
        [['v' => 'Mike', 'f' => 'Mike<div style="color:red; font-style:italic">President</div>'],
            '', 'The President'],
        [['v' => 'Jim', 'f' => 'Jim<div style="color:red; font-style:italic">Vice President</div>'],
            'Mike', 'VP'],
        ['Alice', 'Mike', ''],
        ['Bob', 'Jim', 'Bob Sponge'],
        ['Carol', 'Bob', '']
    ]
);
$org->getOptions()->setAllowHtml(true);

As a root node, i see 'Mike' without the 'President' text in red. If I remove the entire first line ( [['v' => 'Mike', 'f' => 'Mike<div style="color:red; font-style:italic">President</div>'], '', 'The President']), from the datatable I still receive the same output. Which means the root node is ignored and is being derived from a leaf node, being Jim in this example.

If I would change
[['v' => 'Jim', 'f' => 'Jim<div style="color:red; font-style:italic">Vice President</div>'], 'Mike', 'VP']
To
[['v' => 'Jim', 'f' => 'Jim<div style="color:red; font-style:italic">Vice President</div>'], 'Mikey', 'VP']

The root node would display as "Mikey".

Hi,
Nice bundle but i don't find how to the setRowProperty(rowIndex, name, value) function if it's possible
Have a nice day.

cmen/google-charts-bundle 3.2.1 requires php ^5.6 || ^7.0 -> your PHP version (8.0.0) does not satisfy that requirement

Is there any possibility to integrate these charts in email templates?

I would categorize this as more of a question, rather than an issue, but does this bundle support the g charts toolbar option, like this. If not it looks like I can use the gc_event extension to listen for the draw call and call the toolbar function. I just figured I would check with you first. Love this bundle so far, great work!

Hi there, seems Trendlines are not working. This is what I do:

$trendline = new Trendlines();
$trendline
    ->setType('linear')
    ->setColor('green')
    ->setLabelInLegend('label')
    ->setLineWidth(3)
    ->setOpacity(0.3)
    ->setPointSize(1)
    ->setPointsVisible(true)
    ->setShowR2(true)
    ->setVisibleInLegend(true)
;

$chart->getOptions()->setTrendlines([$trendline]);

but it renders as {"trendlines":[{"labelInLegend"
whereas it should render like this:

trendlines: { 0: {......} }, where 0 is the data series 0: https://developers.google.com/chart/interactive/docs/gallery/trendlines

There is a slight mistake in the documentation under https://github.com/cmen/CMENGoogleChartsBundle/blob/HEAD/Resources/doc/basic_usage.md_usage.md
Case 1 : One Chart the last line of the controller is missing a parenthesis.

Hello,

First, thank you for this bundle, it really helps us!

However, we face issues with DateTime from PHP to JS Date.

We want to create a timeline chart with only hours, minutes and seconds like this example from Google Chart Timeline documentation :

function drawChart() {

    var container = document.getElementById('example5.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { singleColor: '#8d8' },
    };

    chart.draw(dataTable, options);
  }

In fact in our application we have to generate a PHP DateTime from a string. But the Data class from your bundle doesn't implement hours, minutes and seconds.

It's pretty easy do add that functionality into the draw function :

public function draw($dataName)
    {
        $js = "var $dataName = new google.visualization.arrayToDataTable([";

        end($this->arrayToDataTable);
        $lastKeyRow = key($this->arrayToDataTable);
        foreach ($this->arrayToDataTable as $keyRow => $row) {
            $js .= '[';

            end($row);
            $lastKeyValue = key($row);
            foreach ($row as $key => $value) {
                if ($value instanceof \DateTime) {
                    $js .= 'new Date(' . $value->format('Y') . ', ' . ($value->format('n')-1) . ', ' .
                        $value->format('d') . ', '. $value->format('H')  .', '. $value->format('i').', '. $value->format('s') .')';
                } else {
                    $js .= json_encode($value);
                }

                if ($key != $lastKeyValue) {
                    $js .= ', ';
                }
            }
            unset($value);
            $js .= ']';

            if ($keyRow != $lastKeyRow) {
                $js .= ', ';
            }
        }
        unset($row);

        $this->firstRowIsData ? $js .= '], true);' : $js .= '], false);';

        return $js;
    }

There is any plan to add this features? Maybe can I create a PR for that?

Thank you!

hi,
i'm using your bundle and it's great. I have a question though, when using your bundle for displaying a maps i'm supposed to register to googlemaps to get an API key is that correct?

Hey,

I would like to add a second y axe in my chart but Google Chart wants a Javascript object and your bundle gives an array... https://developers.google.com/chart/interactive/docs/gallery/columnchart#dual-y-charts

I could do a PR and change in OptionsOutput file : $js .= json_encode($optionValue); by $js .= json_encode($optionValue, JSON_FORCE_OBJECT); only if $optionKey == 'series'

Do you think it is a good idea ?

It would be better for page speed