marcaube / obhighchartsbundle Goto Github PK
View Code? Open in Web Editor NEWSymfony Bundle that aims to ease the use of highcharts to display rich graph and charts in your Symfony application
License: MIT License
Symfony Bundle that aims to ease the use of highcharts to display rich graph and charts in your Symfony application
License: MIT License
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.
Hello
I'm using the bundle, when I install it I have to download the files:
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:
Is there any way I can use colorAxis?
there is the way to use a WorldMap ? and if yes - may be to write it in the documentation...
Best regards !
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>
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 ?
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
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
Line chart is not getting display. But after use of fire bug it is visible.
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:
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:
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!
Perfect Just you forgot to add in installation
app/console assets:install
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:
$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
)
Nevermind.
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
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.
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
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
Hello,
First, sorry for my poor english!
So, i have a problem when i want to use the function "plotlines".
http://api.highcharts.com/highcharts#yAxis.plotLines
I have a error about this, urecognized by symfony2.
I looking for on the bundle but i don't find it.
Are you included in your bundle ?
thank you in advance for your reply
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)"}
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?
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
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
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
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
Similar to the http://www.highcharts.com/demo/dynamic-update demo I'd like to be able to define a controller path to call via ajax that will return the data for the chart and a cycle time.
Would this be possible?
Hi,
I want to make appear / disappear the chart's legend, but when I try "$ob->legend->enabled(true/false)" nothing happens.
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.
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 ©</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
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.
Is Highcharts.setOption possible?
I would need to parse something like that for UTC disabling.
$(function () {
Highcharts.setOptions({
global: {
timezoneOffset: 5 * 60
}
});
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.
I want to set the color theme, like it is descriped in this tutorial. How can i do this with this Bundle? (http://www.highcharts.com/docs/chart-design-and-style/themes)
The "tooltip" option is ignored and not rendered in result javascript.
Code:
$ob->tooltip->pointFormat('{series.name}: {point.percentage}%');
$ob->tooltip->percentageDecimals(1);
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
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.
Is it planned ? that prevents to do it right now?
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
What about Symfony 3 ?
Thank you
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)));
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
In order to work in all languages u have to use following statement in your json_encode:
json_encode($variable, JSON_UNESCAPED_UNICODE)
zf2 components are now on packagist.
Fetch zendframework/zend-json from packagist.
Update composer.json and Readme to reflect changes.
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!
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
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
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
The Pane option is missing.
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";
}
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.