This is a discussion forum for the yii2-highcharts-widget extension.
The extension brings all the functionality of the popular Yii Highcharts extension to Yii2.
More information available here:
Yii2 Highcharts Extension Page
Yii2 Highcharts Github Repository
Report a bug
Yii2 Highcharts Widget v3.0.9 is now available! Please see the extension page for installation and usage instructions.
Yii2 Highcharts Widget v3.0.10 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]
]
]]
]
]);