Giter Club home page Giter Club logo

obhighchartsbundle's People

Contributors

94noni avatar afiocre avatar eymengunay avatar ickbinhier avatar kl3sk avatar mago1086 avatar marcaube avatar nyholm avatar onema avatar peterrehm avatar roob avatar simondaigre avatar squazic avatar studiomax avatar umpirsky avatar wirone avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

obhighchartsbundle's Issues

Internet explorer issue

In Internet Explorer the charts don't appear. It is because the latest "," at the end of the last chart option definition.

The solution could be force some option to be the last one and erase that ",".

I suggest to put the series option as the last one. So the code in HighChart.php:

...
// Series
if (!empty($this->series)) {
$chartJS .= " series: " .
Json::encode($this->series[0],
false,
array('enableJsonExprFinder' => true)) . ",\n";
}
...

Must be the las option with out the ",":

// Series
if (!empty($this->series)) {
$chartJS .= " series: " .
Json::encode($this->series[0],
false,
array('enableJsonExprFinder' => true)); //. ",\n";
}
$chartJS .= " });\n });\n";

Thank you for these great bundle.

the example Multi-axes plot of the Cookbook do not work

Hello
I'm using the bundle, when I install it I have to download the files:

<script src="//code.highcharts.com/4.0.1/highcharts.js"></script> <script src="//code.highcharts.com/4.0.1/modules/exporting.js"></script>

because in Usage say that I have to load this files, I search en the files of the bundle and I can't find them.
When I'm testing the example Multi-axes plot of the Cookbook do not work. I use the same code and I only show the title and in Console of Firebug say TypeError: a.labelFormatter.call is not a function
I search in Page Source and show that:

<script type="text/javascript"> $(function () { var container = new Highcharts.Chart({ chart: {"renderTo":"container","type":"column"}, legend: {"enabled":false}, series: [{"name":"Rainfall","type":"column","color":"#4572A7","yAxis":1,"data":[49.9,71.5,106.4,129.2,144,176,135.6,148.5,216.4,194.1,95.6,54.4]},{"name":"Temperature","type":"spline","color":"#AA4643","data":[7,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6]}], title: {"text":"Average Monthly Weather Data for Tokyo"}, tooltip: {"formatter":{}}, xAxis: {"categories":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}, yAxis: [{"labels":{"formatter":{},"style":{"color":"#AA4643"}},"title":{"text":"Temperature","style":{"color":"#AA4643"}},"opposite":true},{"labels":{"formatter":{},"style":{"color":"#4572A7"}},"gridLineWidth":0,"title":{"text":"Rainfall","style":{"color":"#4572A7"}}}], }); }); </script>

Can you help me, I need that bundle.
2014-12-03_162254

MAP

there is the way to use a WorldMap ? and if yes - may be to write it in the documentation...
Best regards !

drilldown not working

Hello guys,

I tried your exemple of drilldown usage in a pie chart and it's not working (the chart is display but no drilldown)
https://github.com/marcaube/ObHighchartsBundle/blob/master/Resources/doc/cookbook.md#pie-chart-with-drilldown

composer:
"ob/highcharts-bundle": "1.2.*@dev"

javascript:
<script src="//code.highcharts.com/highcharts.js"></script> <script src="//code.highcharts.com/modules/exporting.js"></script> <script type="text/javascript"> {{ chart(chart) }} </script>

How to create stock chart ?

Appreciate the efforts taken to create this nice bundle. It really simplified creating charts in symfony.

Just wanted to ask, how do I create stock chats using this bundle ?

[Bug] tooltip percentage counting

Hi

I'm using your bundle, which is so great.
But it appears that there is a bug ? when trying to implement something like that
http://www.highcharts.com/demo/area-stacked-percent/grid
(I exactly followed the options)

Here is a screenshot about what I have when generating my graph
graph

Here is the rendered JS chart :

$(function(){
    var chart = new Highcharts.Chart({
        chart: {"renderTo":"graph_en_GB_1","type":"area"},
        plotOptions: {"area":{"stacking":"percent"}},
        series: [{"name":"complete","data":[0,0,0,0,0,0,0,0,0,0,2,2]},{"name":"quotafull","data":[0,0,0,0,0,0,0,0,0,0,1,1]},{"name":"earlySO","data":[0,0,0,0,0,0,0,0,0,0,0,0]},{"name":"lateSO","data":[0,0,0,0,0,0,0,0,0,0,0,1]},{"name":"Other","data":[0,0,0,0,0,0,0,0,0,0,0,0]}],
        title: {"text":"Respondants Status"},
        tooltip: {"pointFormat":"\u003Cspan style=\u0022color:{series.color}\u0022\u003E{series.name}\u003C\/span\u003E: ({point.y:,.0f})\u003Cbr\/\u003E","shared":true},
        xAxis: {"title":{"text":"Date"},"categories":["2013-04","2013-05","2013-06","2013-07","2013-08","2013-09","2013-10","2013-11","2013-12","2014-01","2014-02","2014-03"],"tickmarkPlacement":"on"},
        yAxis: {"title":{"text":"Percent"}}
    });
});

You can also see that I have no earlySO data (all are 0) but in the graph it seems that he computes 1

Problem with datetime

Hello!

I'm trying to show a chart but I still am a beginner. The data contains dates on xAxis and number of estimates on yAxis.

I want to show something like this:

screenshot from 2015-06-29 11 09 31

Here is my current function:

public function chartAction()
    {
        $em = $this->getDoctrine()->getManager();

        $accept = $em->getRepository('GroupwareCreativeBundle:DevisEtat')->findBy(array("etat" => 64));
        $devis_accept = $em->getRepository('GroupwareCreativeBundle:Devis')->findBy(array("etat" => $accept));




        $dates_accept = array();

        $i=0;
        foreach($devis_accept as $devis)
        {
            if(date("d/m/Y",  $devis->getEnvoi())!="01/01/1970")
            $dates_accept[$i]=$devis->getEnvoi();
            $i++;
        }

        sort($dates_accept);

        $occur_accept = array_count_values($dates_accept);

        $data_accept = array();

        $i=0;
        foreach($occur_accept as $key => $occur)
        {
            $data_accept[$i] = array($key, $occur);
            $i++;
        }

        // Chart
        $series = array(
                array(

                "name" => "Envoyés",
                "data" => $data_accept,

                )
        );

        $ob = new Highchart();
        $ob->chart->renderTo('linechart');
        $ob->title->text('Nombre de devis');
        $ob->xAxis->type('datetime');
        $ob->xAxis->dateTimeLabelFormats(array(
                "month" => "%e. %b",
                "year" => "%b"
        ));
        $ob->xAxis->title(array('text'  => "Date"));
        $ob->yAxis->title(array('text'  => "Nombre"));
        $ob->series($series);

        return $this->render('GroupwareCreativeBundle:Devis:chart.html.twig', array(
                'chart' => $ob
        ));
    }

And what I get:

screenshot from 2015-06-29 11 10 54

As you can see the xAxis is wrong (I want it to show number of estimates per month) and I don't know why it tries to show hours.

My data has this format:
array( array(timestamp, int), array(timestamp, int), etc)

Thanks in advance!

Assets update

Perfect Just you forgot to add in installation
app/console assets:install

rangeSelector and translation

First, many thanks by the bundle!
Second, I'm starting with highcharts and I'm trying to create something similar to this http://jsfiddle.net/9xpekowg/3/ adding translations and datetime range filters. The objective is create an interface to visualize page views in my system. Didn't figure out also how to translate highcharts using ObHighchrtsBundle. Now my page views charts are like this:

screenshot from 2015-03-19 14 50 40

$ob = new Highchart();
$ob->chart->alignTicks(false);
$ob->chart->renderTo('linechart');
$ob->title->text('Visitas');
$ob->xAxis->title(array('text' => ""));
$ob->xAxis->type('datetime');
$ob->xAxis->tickInterval((24 * 3600 * 1000));
$ob->yAxis->title(array('text' => ""));
$ob->yAxis->min(0);
$ob->series($series);
 $(function () {
    var linechart = new Highcharts.Chart({
        chart: {"alignTicks":false,"renderTo":"linechart"},
        plotOptions: {"series":[]},
        series: [{"name":10766,"data":[[1425870000000,30],[1426042800000,20],[1426215600000,4]]}], 
        title: {"text":"Visitas"},
        xAxis: {"title":{"text":""},"type":"datetime","tickInterval":86400000},
        yAxis: {"title":{"text":""},"min":0}
    });
});

I don't know also why strtotime('2015-03-13'))*1000 return an date to chart with hour 3:00 but this seems to be an php issue and related to timezone. (EDITED: adding GMT to the string the hour issue is solved, in the above example: strtotime('2015-03-13 GMT'))*1000)

Duration value on Yaxis

Hello,

I would like to know if it possible to display a duration on yaxis in HH:MI:SS format?

As a workaroud, can I use a formatter on tooltip with the bundle? I failed with the function keyword that is encapsulated in quote due to json_encode and that is not executed...

Thanks

blank charts without any error messages

Hello,

I've created some funny statistics for the internals of the Linux Kernels here:
https://www.linuxcounter.net/statistics/kernel

Unfortunatly with all the data (1046 entries per chart) the charts are all blank.

With about 700 entries per chart I got the charts correctly working, but now with all database entries, the charts are blank.

I get no errors, nothing in Javascript console (I thought about wrong sorting, but that doesn't seem the reason), nothing in prod.log, nothing in error_log, nothing in php-error.log.

So, I really would appreciate any help here. You can see the rendered code on the page with the link above.

Local language for months...

Hi,

i use this:

    $series = array(
        array(
            "name" => "Nombre de vues",
            "data" => $data
        )
    );

    $ob = new Highchart();
    $ob->lang->months(array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',  'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'));
    $ob->lang->shortMonths(array('Jan', 'Fév', 'Mars', 'Avril', 'Mai', 'Juin',  'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'));
    $ob->lang->weekdays(array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'));
    $ob->chart->renderTo('linechart');  // The #id of the div where to render the chart
    $ob->title->text('Statistiques de logs');
    $ob->xAxis->type('datetime');
    $ob->xAxis->title(array('text'  => "Date de log du compteur"));
    $ob->yAxis->title(array('text'  => "Valeur du compteur"));
    $ob->credits->enabled(false);
    $ob->series($series);

But it's dont work for months and weekdays, why ? (i try to have in French language)

thanks

Datetime in data issue

Hello,
first of all, I apologize if my question is stupid but I've just spend few hours on my issue and can't find solution.

I'm a beginner in PHP and javascript but I don't think this is the problem here.

My goal is to render a chart similar to the one here http://www.highcharts.com/demo/spline-irregular-time

Here is my code:

In my PHP file:

    /**
     * @Route("/backoffice/statistics/test", name="test_stats")
     * @Template()
     */
    public function chartAction()
        {
            // Chart

            $series = array(
                array("name" => "Data Serie Name",
                            "data" => '[[1372425426000 ,15 ],[1373426510000 ,20 ],[1373427726000 ,30 ], [1374447726000 ,50 ]]',
            ));
            $ob = new Highchart();
            $ob->chart->renderTo('linechart');  // The #id of the div where to render the chart
            $ob->chart->type('spline');
            $ob->title->text('Chart Title');
            $ob->xAxis->title(array('text'  => "Horizontal axis title"));
            $ob->xAxis->type('datetime');
            $ob->xAxis->dateTimeLabelFormats(array('month'=> '%e. %b', 'year'=> '%b'));
            $ob->yAxis->title(array('text'  => "Vertical axis title"));
            $ob->yAxis->min('0');
            $ob->series($series);
            return $this->render('FloorCRMBundle:Backend:stats.html.twig', array(
                'chart' => $ob, 'title' => 'Statistiques'
            ));
        }

And here is my html.twig file:

{% block javascripts %}
<!-- Load jQuery from Google's CDN if needed -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script src="{{ asset('bundles/obhighcharts/js/highcharts/highcharts.js') }}"></script>
<script src="{{ asset('bundles/obhighcharts/js/highcharts/modules/exporting.js') }}"></script>
<script type="text/javascript">
{{ chart(chart) }}
</script>
{% endblock javascripts %}

{% block content %}

<div id="linechart" style="min-width: 400px; height: 400px; margin: 0 auto">

</div>
{% endblock content %}

As a result, there is no line on the chart.
I thing there is an issue while transmitting series and especially X datas.

Here is a json of the $ob object. I've this result with the following command:
$json = json_encode( (array)$ob );

{"chart":{"chart":{"renderTo":"linechart","type":"spline"}},"colors":[],"credits":{"credits":{}},"global":{"global":{}},"labels":{"labels":{}},"lang":{"lang":{}},"legend":{"legend":{}},"loading":{"loading":{}},"plotOptions":{"plotOptions":{}},"point":{"point":{}},"series":[[{"name":"Data Serie Name","data":"[[1372425426000 ,15 ],[1373426510000 ,20 ],[1373427726000 ,30 ], [1374447726000 ,50 ]]","pointInterval":3600000,"tickInterval":3600000}]],"subtitle":{"subtitle":{}},"symbols":[],"title":{"title":{"text":"Chart Title"}},"tooltip":{"tooltip":{"formatter":{}}},"xAxis":{"xAxis":{"title":{"text":"Horizontal axis title"},"type":"datetime","dateTimeLabelFormats":{"month":"%e. %b","year":"%b"}}},"yAxis":{"yAxis":{"title":{"text":"Vertical axis title"},"min":"0"}},"exporting":{"exporting":{}},"navigation":{"navigation":{}}}

If somebody can help, it's very welcome. I thing I'm just close to have it running.

If I put my datas '[[1372425426000 ,15 ],[1373426510000 ,20 ],[1373427726000 ,30 ], [1374447726000 ,50 ]]' in the highchrats example at url http://www.highcharts.com/demo/spline-irregular-time , it works !!! Then I suspect data transformation .....

Regards

Alain

Reproduce the steps for the README led to an error 500

After having followed the steps described in the READM I got an error 500 with the following error message :

CRITICAL - Uncaught PHP Exception Twig_Error_Runtime: "An exception has been thrown during the rendering of a template ("")." at /var/www/myproject/vendor/twig/twig/lib/Twig/Template.php line 146
Context: {"exception":"Object(Twig_Error_Runtime)"}

No "noData" support yet?

I was trying to add a noData message via:

$ob->lang->noData('Message');
$ob->noData->style(array(/* … */));

…but I get the alert

Undefined property: Ob\HighchartsBundle\Highcharts\Highchart::$noData

I can't find any noData code around, is it planned anytime soon?

accessing chart variable

Hello , I'm using Symfony2 - and creating chart from a controller - but there is a problem because the chart var is not accessible because is in $(function() -
may be will be a better to create before of that a variable , and after that to use it
best regards

update composer.json to allow sf 2.1.*

Composer is complaining when you have symfony 2.1 installed because it requires version 2.0 only ("=2.0").

Maybe the requirements should be ">=2.0", in order to allow your bundle to be installed with symfony 2.1

Thanks for your help

Pass options by array

Hi,

I'm trying to pass options by array, but I get an exception (Notice: Trying to get property of non-object) :

//This don't work : 
$ob = new Highchart();
$ob->title([
    'text' => 'Some text',
    'style' => [
        'color' => '#ab3f41',
        'fontWeight' => 'bold',
    ]
]);
//This works : 
$ob->title->text('Some text');
$ob->title->style([
    'color' => '#ab3f41',
    'fontWeight' => 'bold',
]);

The strange thing is that the following code works :

$ob->xAxis([
    'title' => ['text'  => 'X axis'],
    'tickInterval' => 1,
]);

Am I doing something wrong ?
I'm using SF 2.8 and ob/highcharts-bundle 1.3

DateTime to timestamp for JS

Hi,

i'm build my datas whith this (in my loop from Doctrine result):
$data[] = [
$log->getCountDate()->getTimestamp() * 1000,
$log->getValue()
];

But in Javascript months start at 0 for January so i don't have the good date in Highcharts.
How to do ? And the *1000 is mandatory no ?

Thanks

Can't change Legend options.

Hi,

I want to make appear / disappear the chart's legend, but when I try "$ob->legend->enabled(true/false)" nothing happens.

AutoRotation

The AutoRotation on my graphs isn't working. Neither is the lable auto-step when i have a large number of data points. I can manually set the rotation and the label step but automatically like the native plugin would be better.

Error "chart" does not exist

When i try to show a chart in my twig using this bundle it gives me an error like this:
Variable "chart" does not exist in cuadroBundle:Base:base.html.twig at line 21.
Here's my template's code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{% block titulo %}Cuadro de Mando{% endblock %}</title>

    <meta name="description" content="">
    <meta name="author" content="Jiorqui!">

    <link href="{{ asset('bundles/cuadro/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href= "{{ asset('bundles/cuadro/css/style.css') }}" rel="stylesheet">
    <link href= "{{ asset('bundles/cuadro/css/bootstrap-theme.css') }}" rel="stylesheet">
    <link href= "{{ asset('bundles/cuadro/css/bootstrap.css') }}" rel="stylesheet">
    <link href= "{{ asset('bundles/cuadro/css/shop-item.css') }}" rel="stylesheet">

    <script type="text/javascript">

        {{chart(chart)}} //this is where the error is
    </script>
</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Start Bootstrap</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

<!-- Page Content -->
<div class="container">

    <div class="row">

        <div class="col-md-3">
            <p class="lead">Shop Name</p>
            <div class="list-group">
                <a href="#" class="list-group-item active">Category 1</a>
                <a href="#" class="list-group-item">Category 2</a>
                <a href="#" class="list-group-item">Category 3</a>
            </div>
        </div>

        <div class="col-md-9">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#">Gráfico</a>
                </li>
                </ul>
            <div class="thumbnail">
                <img class="img-responsive" src="" alt="">
                <div class="caption-full">
            <div id="linechart" style="width: 100%; height: 500px; margin: 0 auto"></div>
                </div>
            </div>
            <div class="well">
                           </div>
        </div>
    </div>
</div>
<!-- /.container -->

<div class="container">

    <hr>

    <!-- Footer -->
    <footer>
        <div class="row">
            <div class="col-lg-12">
                <p>Jiorqui's Productions &copy;</p>
            </div>
        </div>
    </footer>

</div>

<script src="{{ asset('bundles/cuadro/js/jquery.min.js') }}" type="text/javascript"> </script>
<script src="{{ asset('bundles/cuadro/js/bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/cuadro/js/scripts.js') }}" type="text/javascript"> </script>
<script src="{{ asset('bundles/cuadro/js/highcharts.js') }}" type="text/javascript"> </script>
<script src="{{ asset('bundles/cuadro/js/modules/exporting.js') }}" type="text/javascript"> </script>
<script src="{{ asset('bundles/cuadro/js/jquery-1.7.1.min.js') }}" type="text/javascript"> </script>

</body>
</html>´´´
/******************/and this is the controller:

<?php

namespace Cuadrodemando\cuadroBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Ob\HighchartsBundle\Highcharts\Highchart;

class DefaultController extends Controller
{
    public function indexAction()
    {
        return $this->render('cuadroBundle:Default:index.html.twig'/*, array('name' => $name)*/);
    }

    public function inicioAction()
    {

    }

    public function hijasAction($nombre)
    {
        return $this->render('cuadroBundle:Default:'.$nombre.'.html.twig');
    }

    public function baseAction()
    {
        return $this->render('cuadroBundle:Base:base.html.twig');
    }

    public function chartAction()
    {
        $series = array(
            array(
                'name'  => 'Rainfall',
                'type'  => 'column',
                'color' => '#4572A7',
                'yAxis' => 1,
                'data'  => array(49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4),
            ),
            array(
                'name'  => 'Temperature',
                'type'  => 'spline',
                'color' => '#AA4643',
                'data'  => array(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6),
            ),
        );
        $yData = array(
            array(
                'labels' => array(
                    'formatter' => new Expr('function () { return this.value + " degrees C" }'),
                    'style'     => array('color' => '#AA4643')
                ),
                'title' => array(
                    'text'  => 'Temperature',
                    'style' => array('color' => '#AA4643')
                ),
                'opposite' => true,
            ),
            array(
                'labels' => array(
                    'formatter' => new Expr('function () { return this.value + " mm" }'),
                    'style'     => array('color' => '#4572A7')
                ),
                'gridLineWidth' => 0,
                'title' => array(
                    'text'  => 'Rainfall',
                    'style' => array('color' => '#4572A7')
                ),
            ),
        );
        $categories = array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');

        $ob = new Highchart();
        $ob->chart->renderTo('linechart'); // The #id of the div where to render the chart
        $ob->chart->type('column');
        $ob->title->text('Average Monthly Weather Data for Tokyo');
        $ob->xAxis->categories($categories);
        $ob->yAxis($yData);
        $ob->legend->enabled(false);
        $formatter = new Expr('function () {
             var unit = {
                 "Rainfall": "mm",
                 "Temperature": "degrees C"
             }[this.series.name];
             return this.x + ": <b>" + this.y + "</b> " + unit;
         }');
        $ob->tooltip->formatter($formatter);
        $ob->series($series);

        return array("chart" => $ob);
    }
}

´´´

please help!! I really need it. 
PS: I'm a beginer

License

Have you considered specifying the license of this bundle? I am currently considering to integrate this bundle to a project and want to avoid troubles.

I think best is to use the MIT license.

Highcharts.setOption

Is Highcharts.setOption possible?

I would need to parse something like that for UTC disabling.

$(function () {
    Highcharts.setOptions({
        global: {
            timezoneOffset: 5 * 60
        }
    });

Set theme for chart

Hello,

This already was nswered in a closed issue some time ago, but the solution posted there doesn't work for me.

First of all, I'm on Symfony 2.6.6 with "ob/highchartsbundle": "dev-master", so I'm up to date.
I'm creating two charts and both are working absolutly fine.

But adding the theme to the javascript, nothing happens. The charts are still working, and no color changes happen.

Instead I get a Javascript error in the console:

Uncaught TypeError: chart_registrations_per_day.setOptions is not a function

This is the relevant part of my twig file:

<div class="panel-body">

    <script src="//code.highcharts.com/4.0.1/highcharts.js"></script>
    <script src="//code.highcharts.com/4.0.1/modules/exporting.js"></script>

    <script type="text/javascript">
        $(function(){

            {{ chart(chart_registrations_per_day, false) }}
            {{ chart(chart_machines_per_day, false) }}

            Highcharts.theme = {
                colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
                    '#FF9655', '#FFF263', '#6AF9C4'],
                chart: {
                    backgroundColor: {
                        linearGradient: [0, 0, 500, 500],
                        stops: [
                            [0, 'rgb(255, 255, 255)'],
                            [1, 'rgb(240, 240, 255)']
                        ]
                    }
                }
            };

            chart_registrations_per_day.setOptions(Highcharts.theme);
            chart_machines_per_day.setOptions(Highcharts.theme);

        });
    </script>
    <div id="chart_registrations_per_day" style=""></div>
    <div id="chart_machines_per_day" style=""></div>

</div>

And here is how it looks like when it is fully rendered:

<div class="panel-body">

    <script src="//code.highcharts.com/4.0.1/highcharts.js"></script>
    <script src="//code.highcharts.com/4.0.1/modules/exporting.js"></script>

<script type="text/javascript">
    $(function(){

    var chart_registrations_per_day = new Highcharts.Chart({
        chart: {"renderTo":"chart_registrations_per_day","zoomType":"x","type":"area"},
        legend: {"enabled":false},
        plotOptions: {"area":{"allowPointSelect":true,"dataLabels":{"enabled":false},"showInLegend":true}},
        series: [{"name":"User registrations","data":[.........]}], 
        title: {"text":"Registrations per day"},
        xAxis: {"title":{"text":"Date"},"type":"datetime"},
        yAxis: {"title":{"text":"Registrations per day"}}
        });

    var chart_machines_per_day = new Highcharts.Chart({
        chart: {"renderTo":"chart_machines_per_day","zoomType":"x","type":"area"},
        legend: {"enabled":false},
        plotOptions: {"area":{"allowPointSelect":true,"dataLabels":{"enabled":false},"showInLegend":true}},
        series: [{"name":"Machine registrations","data":[........]}], 
        title: {"text":"Machines per day"},
        xAxis: {"title":{"text":"Date"},"type":"datetime"},
        yAxis: {"title":{"text":"Machines per day"}}
        });

    Highcharts.theme = {
        colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
            '#FF9655', '#FFF263', '#6AF9C4'],
        chart: {
            backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(240, 240, 255)']
                ]
            }
        }
    };

    chart_registrations_per_day.setOptions(Highcharts.theme);
    chart_machines_per_day.setOptions(Highcharts.theme);

    });
</script>
<div id="chart_registrations_per_day" style=""></div>
    <div id="chart_machines_per_day" style=""></div>
</div>

Any help would be really appreciated here.

tooltip option is not rendered

The "tooltip" option is ignored and not rendered in result javascript.

Code:
$ob->tooltip->pointFormat('{series.name}: {point.percentage}%');
$ob->tooltip->percentageDecimals(1);

I cannot rotate category labels on the x axis

Hi,

I am trying to rotate the labels on the xAxis so that the text runs vertically instead of horizontally but I cannot seem to do this and I cannot see an example of this.

My code is something like:
// Chart
$series = array(
array("name" => "nb results", "data" => $values)
);

    $ob = new Highchart();
    $ob->chart->renderTo('linechart');  // The #id of the div where to render the chart
    $ob->title->text('Daily Query Results');
    $ob->xAxis->title(array('text'  => "Date"));
    $ob->xAxis->categories($categories);
    $ob->xAxis->type('datetime');


    $ob->xAxis->labels->rotation(45);


    $ob->yAxis->title(array('text'  => "Results"));
    $ob->series($series);

If i do not try and rotate the labels it works fine but the instant i try and rotate the labels it throws a :

500 Notice: Undefined property: stdClass::$labels

How should I be rotating the category labels on the xAxis?

Kind Regards

Chart's API is awkwardly accessible when using HighchartsAdapter (Standalone Highcharts Framework)

Because of Ob\HighchartsBundle\Highcharts\Highchart::render() logic, chart's API is awkwardly accessible when using HighchartsAdapter (Standalone Highcharts Framework).

In that case, jQuery.highcharts() is not defined, so since chart's initialized in closure with var, pointer to chart isn't visible from global namespace. Then, only way to access to chart is Highcharts.charts[0] or Highcharts.charts[$('#RENDER_TO').data('highchartsChart')] (note that #RENDER_TO is the same as option passed to $ob->chart->renderTo().

Would be great to get possibility of passing chart's pointer to global namespace or something like that.

Usage of global parameter

Hi Marc,

i cant figure out, if it's just up to the highcharts version itself (i'm actually using 4.0.1) or if it's in generic.

if i try to create a new chart and i want to set a global parameter e.g. useUTC, it doesn't work.

Example:

$chart = new Highchart();
$chart->global->useUTC(false); // renders but ignores the setting
// $chart->global(array('useUTC' => false)); // won't even render the HC itself

The only workaround for me now is to set it via plain javascript as generic option in my main twig template.

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

Am i wrong in the usage (seems like anything else except the global is working with 4.0.1) or is it a real issue?

EDIT: It doesn't matter if i'm doing

$chart->global->useUTC(false);
// or
$chart->global->useUTC("false"); // like in tests

Disable dataLabels and show legend on pie charts

Hi,

I just want to disable dataLabels and show legend on pie charts, but I can only do one of them.
Is that a problem with the bundle or do I using it bad ?

Code : $ob->plotOptions->pie(array('showInLegend' => true));
$ob->plotOptions->pie(array('dataLabels' => array('enabled' => false)));

JS-Files missing in V1.1 & master

Hi Marc,

I use this bundle in my project. I used to have 1.0.1 and ran a composer update on my project recently to get the latest updates from all bundles I use.

Your bundle got updated from version 1.0.1 to version 1.1. As it is only a minor-version update, I didn't expect any BC-breaks. :-/

But after the upgrade I noticed, that the HighCharts-JS-Files no longer exist in your bundle.

They do in V1.0.1 (https://github.com/marcaube/ObHighchartsBundle/tree/1.0.1/Resources/public/js/highcharts)
but not anymore in V1.1 or master (https://github.com/marcaube/ObHighchartsBundle/tree/1.1/Resources/public/js/highcharts | https://github.com/marcaube/ObHighchartsBundle/tree/1.1/Resources/public/js/highcharts)

Is this by error or intention?

What's your recommendation on how to include the highcharts js files?

Best regards,
Dominik

Update zend-json requirements

zf2 components are now on packagist.

Fetch zendframework/zend-json from packagist.
Update composer.json and Readme to reflect changes.

Loading chart without JS or MTools

Hello,

could you please give a little more hint to the point
"Use highcharts without a jquery or mootools wrapper" in the instruction?

Maybe it's because i'm tired or what but I really can't see how to make this snippet work and I need this one for dynamic update without JQuery...

Thanks in advance!

chart rendering only work for linechart

Hello, I have a problem with charts other than 'linechart'.
I installed the bundle via composer, added it to bundles list in AppKernel then in a controller I tried to
test examples of CookBook. The first example with $ob->chart->renderTo('linechart'); worked fine but for all other examples, it displays nothing.
I don't know what the problem comes from, can you help me please ? Thanks

Multiple Charts on same view

Hi,
would it be possible to parameter the global variable of a Chart to have multiple charts on the same view ?

In fact i can see in the Highchart.php in the render function this line :
$chartJS .= "\n var " . (isset($this->chart->renderTo)?$this->chart->renderTo:'chart') . " = new Highcharts.Chart({\n";

How can we set this var dynamically inside the Controller ?

So in the view we should be able to do :

<script type="text/javascript"> {{ chart(chart1) }} {{ chart(chart2) }} </script>

Thank you for your precious help

turning off the exporting

I can't immediately figure out how to disable the exporting function. Could you document this? Or if it is not possible, could it be implemented?

If you need a contributor I would be glad to help if you point me in the right direction

thanks

SetOptions lang

sorry but the last commits don't work.

i use

$ob = new Highchart();
$ob->lang->months(array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'));
$ob->lang->shortMonths(array('Jan', 'Fév', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'));
$ob->lang->weekdays(array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'));

and it's in English... With my pull request and this code it's work. The API doc say we need use Highcharts.setOptions()

// Highcharts.setOptions
if (get_object_vars($this->global->global) || get_object_vars($this->lang->lang)) {
$chartJS .= "\nHighcharts.setOptions({";

// Global
if (get_object_vars($this->global->global)) {
$chartJS .= "\nglobal: " . json_encode($this->global->global) . ",\n";
}

// Lang
if (get_object_vars($this->lang->lang)) {
$chartJS .= "\nlang: " . json_encode($this->lang->lang) . ",\n";
}

$chartJS .= "});\n";
}

update

please update http://code.highcharts.com/highcharts.js from github - because right now - the script are not compatible with highcharts-maps.
Or it require to get script from there - or from here... I know that I can do it manually, but will be more pretty if it will be up to date.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.