Yii2 Highcharts Widget v4.0.1 is now available! Please see the extension page for installation and usage instructions. Enjoy.
Yii2 Highcharts Widget v4.0.1 is now available! Please see the extension page for installation and usage instructions. Enjoy.
I test your extension on the yii2 advanced application template, i add "miloschuman/yii2-highcharts-widget": "*" in the require section of my composer.json file. Then i update with composer.
I insert the sample code in frontend/views/index.php by choosing the php arrays method but i have an error :
Class "miloschuman\highcharts\Highcharts" not found
and echo Highcharts::widget is highlighted …
Have you tried adding any other composer packages, and do you get the same error? If you haven’t already done so, check that your /vendor folder is in sync with your server.
Ok thank you, i update with composer with the good rights and the error gone.
Is it possible to instantiate multiple charts in the same page ? How to use the widget to have multiple graphics in the same page ?
Br,
Yes. Just include multiple widgets. Each widget corresponds to one chart.
Great widget. Had no problem getting it installed and rendering a nice looking multi-series line chart. One issue has me confounded, which is setting the width and height of my chart. I’ve tried wrapping the widget in a container div styled at width:100%, as suggested in the Highcharts docs, and I’ve also set the width and height option properties in the widget. No matter what I’ve tried, when I inspect the element I see that the highchairs-container style sets width at 600px and height at 400px. My 100% width container is just over 1100px wide so it’s not a constraint. I’m clearly doing something wrong. Any help will be greatly appreciated!
Jeff, I’m unable to reproduce your issue. Could you post sample code?
Milo, I just figured this out. I’d misread the Highcharts API Reference discussion on setting width and height. Once I’d clicked through to the JSFiddle example I realized my mistake. I was passing values as strings, e.g., ‘width’ => ‘1100px’ instead of the correct approach shown in the code excerpt below.
'options' => [
'chart' => ['width' => 1100,
'height' => 734],
Works brilliantly now that I’m on the right track. Thanks again for a great widget.
Jeff
Hi, How I can add json data like this?
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
chart = new Highcharts.Chart(options);
});
This file was make from db:
.....
while($r = mysqli_fetch_array($query, MYSQLI_BOTH))
{
$category['data'][] = $r['field_1'];
$series1['data'][] = $r['field_2'];
$series2['data'][] = $r['field_3'];
$series3['data'][] = $r['field_4'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series2);
array_push($result,$series3);
print json_encode($result, JSON_NUMERIC_CHECK);
mysqli_close($link);
Thanks
domenor, I’ve added documentation for this exact case. Check https://github.com/miloschuman/yii2-highcharts/blob/master/doc/examples/highstock.md, and let me know if you have any questions.
Would you please provide a real example with model, controller and view
Thanks
I’m trying to display a bar graph and I pass in an array (using SeriesDataHelper) that has 43 items. Only the first 20 show on the chart and I can’t for the life of me figure out why. I’ve tried setting plotOptions-bar-cropThreshold = 100 but that didn’t make any difference. Nor does changing the height/width of the chart.
I’ve confirmed in debugger that the dataProvider actual does have the 43 data points.
Any help would be greatly appreciated.
Jim
echo Highcharts::widget([
'setupOptions' => [
'global' => ['useUTC' => FALSE],
],
'options' => [
'chart' => [
'type' => 'bar',
'width' => 800,
'height' => 700,
'zoomType' => 'x',
],
'credits' => ['enabled' => FALSE],
'title' => ['text' => NULL],
'xAxis' => [
'type' => 'category',
'labels' => [
'style' => [
'fontSize' => '12px',
'fontFamily' => 'Verdana, sans-serif',
]
]
],
'yAxis' => [
'title' => [
'enabled' => TRUE,
'text' => 'Message Count',
],
'min' => 0,
],
'legend' => ['enabled' => FALSE],
'tooltip' => [
'pointFormat' => 'Messages: <b>{point.y:.1f}</b>'
],
'plotOptions' => [
'bar' => [
'cropThreshold' => 100,
],
],
'series' => [
[
'name' => 'Messages',
'color' => '#318233',
'data' => new SeriesDataHelper($dataProvider, ['feed','count:int']),
],
],
],
]);
Exactly the same issue here Jim. I don’t suppose you solved it did you?
Jim - solved it, just add the pagination => false to the ArrayDataProvider, eg:
$dataProvider = new \yii\data\ArrayDataProvider(['allModels' => $data, 'pagination' =>false]);
Worked like a charm, thanks!
Jim
Hi Milo Schuman, i was using the extension highcharts, i haven’t problem with the charts until i used the type columnrange. I couldn’t make it work, the chart doesn’t display in the page. I’m working on the yii2 advanced application template. My code:
echo Highcharts::widget([
'options' => [
'chart'=>[
'type'=>'columnrange',
'inverted'=>true,
],
'title' => ['text' => 'Meses'],
'xAxis' => [
'categories' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
],
'yAxis' => [
'title' => ['text' => 'Temperatura']
],
'legend'=> [
'enabled'=> false
],
'series'=> [[
'name'=> 'Temperatura',
'data'=> [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
]]
]
]);
Fadex, the ‘columnrange’ chart type is defined in a separate file, ‘highcharts-more.js’, which you must include via the top-level [font=“Courier New”]scripts[/font] option, like this:
echo Highcharts::widget([
'scripts' => [
'highcharts-more',
],
'options' => [
'chart' => [
'type' => 'columnrange',
'inverted' => true,
],
'title' => ['text' => 'Meses'],
'xAxis' => [
'categories' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
],
'yAxis' => [
'title' => ['text' => 'Temperatura']
],
'legend' => [
'enabled' => false
],
'series' => [[
'name' => 'Temperatura',
'data' => [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
]]
]
]);
Thank you very much 
, that was the problem.
Buenos dias!!! tengo un inconveniente con la implementación del tipo "Pie", muestra otro gráfico cuando coloco la variable data, si colocó los datos a mano funciona bien, pero cuando coloco la variable generada no dibuja otro gráfico, realizo un "echo" de la variable y tiene exactamente el mismo contenido que los datos puestos a mano. Puede ayudarme con este problema? le adjunto el código
$sql = "select s.nombre, count(p.id) AS cantidad FROM proyecto p, sector s WHERE p.idSector = s.id GROUP BY p.idSector ORDER BY cantidad DESC";
$raw = $base = Yii::$app->db->createCommand($sql_sector)->queryAll();
foreach ($raw as $d){
$nombre= $d['nombre'];
$cantidad = (int)$d['cantidad'];
$data[] = [$nombre,$cantidad*1];
}
$data = json_encode($data);
echo $data;
el resultado de ese "echo" es : [["Agropecario",94],["Industrial",88],["Turismo",55],["Servicios",28],["Fruticola",21],["Minero",2],["Apicola",2],["Pesquero",1]]
echo Highcharts::widget([
'options' => [
'title' => ['text' => 'Sample title - pie chart'],
'plotOptions' => [
'pie' => [
'cursor' => 'pointer',
],
],
'series' => [
[
'type' => 'pie',
'name' => 'Elements',
'data' => $data,
]
],
],
]);
Eso me dibuja un gráfico raro como que no encuentra la serie, en cambio si coloco esto
echo Highcharts::widget([
'options' => [
'title' => ['text' => 'Sample title - pie chart'],
'plotOptions' => [
'pie' => [
'cursor' => 'pointer',
],
],
'series' => [
[
'type' => 'pie',
'name' => 'Elements',
'data' =>[["Agropecario",94],["Industrial",88],["Turismo",55],["Servicios",28],["Fruticola",21],["Minero",2],["Apicola",2],["Pesquero",1]],
]
],
],
]);
Se visualiza correctamente.
Estoy generando mal la variable $data? porque realizando un "echo" la variable me muestra el mismo contenido, pero dibuja un gráfico extraño, no el correcto
Good morning!!! I have a problem with the implementation of the type " Pie" , drawing another sample when placed the variable data , if placed the data by hand works well , but when I put the variable generated does not draw another picture, place an " echo" of the variable and It has exactly the same content as the data made hand. You can help me with this problem? I attach the code
$sql = "select s.nombre, count(p.id) AS cantidad FROM proyecto p, sector s WHERE p.idSector = s.id GROUP BY p.idSector ORDER BY cantidad DESC";
$raw = $base = Yii::$app->db->createCommand($sql_sector)->queryAll();
foreach ($raw as $d){
$nombre= $d['nombre'];
$cantidad = (int)$d['cantidad'];
$data[] = [$nombre,$cantidad*1];
}
$data = json_encode($data);
echo $data;
the result of this "echo " is : [["Agropecario",94],["Industrial",88],["Turismo",55],["Servicios",28],["Fruticola",21],["Minero",2],["Apicola",2],["Pesquero",1]]
echo Highcharts::widget([
'options' => [
'title' => ['text' => 'Sample title - pie chart'],
'plotOptions' => [
'pie' => [
'cursor' => 'pointer',
],
],
'series' => [
[
'type' => 'pie',
'name' => 'Elements',
'data' => $data,
]
],
],
]);
That draws me a weird graph as you can not find the series , however if I put this
echo Highcharts::widget([
'options' => [
'title' => ['text' => 'Sample title - pie chart'],
'plotOptions' => [
'pie' => [
'cursor' => 'pointer',
],
],
'series' => [
[
'type' => 'pie',
'name' => 'Elements',
'data' =>[["Agropecario",94],["Industrial",88],["Turismo",55],["Servicios",28],["Fruticola",21],["Minero",2],["Apicola",2],["Pesquero",1]],
]
],
],
]);
It is displayed correctly.
I am generating $data wrong ? because I making an " echo" variable shows me the same content, but draws a weird graphic , not the right
thanks
Hi! I’m working on a project right now and I need to show my data in a highchart widget, I’m using postgresql, can you give me an idea how to put data from my database to my highchart widget.
\dosamigos\highcharts\HighCharts::widget([
'clientOptions' => [
'chart' => [
'type' => 'column'
],
'title' => [
'text' => 'Monthly Report'
],
'xAxis' => [
'categories' => [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
]
],
'yAxis' => [
'title' => [
'text' => 'Number of Person'
]
],
'series' => [
['name' => 'Captured','data' => [100,220,411,123,123,123,123,123,213,123,123,123]], //this should be data from database.
['name' => 'Killed', 'data' => [51,71,31,155,166,133,14,12,12,11,11,13]], //this should be data from database.
['name' => 'Surrendered', 'data' => [500,7,3,200,2,2,2,2,2,2,2,0]] //this should be data from database.
]
]
]);