HighCharts with floats

I cannot get my line chart to render with floating point values. The line chart renders without lines (only titles and axis values) unless I type-cast all my data points to (int). Here’s my chart spec. Is there something I need to specify differently for floats?

$this->Widget(‘ext.highcharts.HighchartsWidget’, array(

    'options'=>array(


            'scripts' => array(


                    'highcharts',


                    'highcharts-more',


                    'modules/exporting',


                    'themes/grid'


            ),


            'chart' => array(


                    'type' => 'line',


                    'backgroundColor' => '#f7f7f7',


                    'height' => $tblHeight,


                    'width' => $tblWidth,


            ),


            'title' => array(


                    'text' => "$chartDef[chartTitle]",


                    'style' => array(


                            'fontSize' => '13px',


                    ),


            ),


            'subtitle' => array(


                    'text' => "$chartDef[chartSubtitle]",


                    'style' => array(


                            'fontSize' => '12px',


                    ),


            ),


            'colors' => $colorAry,


            'plotOptions' => array(


                    'line' => array(


                            'dataLabels' => array (


                                    'enabled' => true,


                                    'color' => '#000000',


                            ),


                            'enableMouseTracking' => true,


                    ),


            ),


            'xAxis' => array(


                    'title' => array(


                            'text' => "$chartDef[xAxisTitle]",


                    ),


                    'tickPixelInterval' => 40,


                    'categories' => $majorXcategories,


                    'labels' => array(


                            'align' => 'right',


                            'verticalAlign' => 'center',


                            'padding' => 5,


                            'rotation' => -45,


                            'step' => 1,


                            'style' => array(


                                    'color' => '#000000',


                                    'whiteSpace' => 'nowrap',


                            ),


                    ),


            ),


            'yAxis' => array(


                    'title' => array(


                            'text' => "$chartDef[yAxisTitle]",


                    ),


                    'min' => 0,


                    'max' => $maximumDataPoint,


                    'tickPixelInterval' => $tickPixelInterval,


                    'minTickInterval' => $minTickInterval,


                    'endOnTick' => true,


                    'labels' => array(


                            'style' => array(


                                    'color' => '#000000',


                            ),


                    ),


            ),


            'credits' => array('enabled' => false),


            'series' => $dataAry,


    ),

));

My $dataAry is populated as:

Array

(

[6] => Array


    (


        [2017-Jan] => 0


        [2017-Feb] => 0


        [2017-Mar] => 0


        [2017-Apr] => 0


        [2017-May] => 0


        [2017-Jun] => 0


        [2017-Jul] => 0


        [2017-Aug] => 7


        [2017-Sep] => 14


        [2017-Oct] => 16.04


        [2017-Nov] => 13.79


        [2017-Dec] => 7.29


        [2018-Jan] => 8.86


        [2018-Feb] => 5.22


        [2018-Mar] => 5.22


        [2018-Apr] => 5.22


        [2018-May] => 5.22


        [2018-Jun] => 5.22


        [2018-Jul] => 5.22


        [2018-Aug] => 5.22


        [2018-Sep] => 5.22


        [2018-Oct] => 5.22


        [2018-Nov] => 5.22


        [2018-Dec] => 5.22


    )





[2] => Array


    (


        [2017-Jan] => 0


        [2017-Feb] => 0


        [2017-Mar] => 0


        [2017-Apr] => 0


        [2017-May] => 0


        [2017-Jun] => 0


        [2017-Jul] => 0


        [2017-Aug] => 3.5


        [2017-Sep] => 5


        [2017-Oct] => 4.33


        [2017-Nov] => 1.33


        [2017-Dec] => 1.08


        [2018-Jan] => 0.5


        [2018-Feb] => 0.5


        [2018-Mar] => 0.5


        [2018-Apr] => 0.5


        [2018-May] => 0.5


        [2018-Jun] => 0.5


        [2018-Jul] => 0.5


        [2018-Aug] => 0.5


        [2018-Sep] => 0.5


        [2018-Oct] => 0.5


        [2018-Nov] => 0.5


        [2018-Dec] => 0.5


    )

)

If I go through my array and typecast all numbers as (int), the line chart renders properly but with integers (e.g. 0.5 rendering as 0).

How do I get the floating point values to render properly?

Hi, I haven’t gotten a reply on this. Hopefully it’s a simple question…how to get floats to present on a chart, not as integers, but with some precision, 2 digits is fine. My charts always come out as truncated integers, instead of floats.

I have the following amidst the options:


                'tooltip' => ['valueDecimals' => 2],

FYI: You may want to look at Dygraphs because Highcharts has usage limitations. I have uploaded my wrapper for it .

Thank you!

I have added a tooltip as you described and my data show up with 2 decimal digits in the mouse-over popup. But on the chart it shows many decimal digits, obscuring the chart with very long numbers that overlay each other. How do I get the numbers that are visible on the chart to also have just 2 decimal digits?

This is not so much Yii related.

Apparently you can use "pointFormat":


 'tooltip'=>['pointFormat'=>'Value: {point.y:.2f}','valueDecimals' => 2],

It is strange that this goes under ‘tooltip’, but according to my readings it should be that.

You can also change the formatter:


'dataLabels'=>['enabled'=>true,'formatter'=>new CJavaScriptExpression('[size=2]function () {[/size][size=2]return Highcharts.numberFormat(this.y,2);[/size][size=2]}')][/size][size=2]

[/size]

[size=2]

[/size]

[size=2]which is demonstrated here[/size]