How to pass the another variable to the Highchart

I am trying to do the basic line highcharts to be dynamic and i have done dynamic and now the requirement i would like to pass the another variable to the X-axis variable with other column, this is my code which is in PHP script :

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>RNA</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
         <script type="text/javascript" src="regression.js"></script>
          <script type="text/javascript" src="highcharts.js"></script>
        <script type="text/javascript">

$(function () {


 var sourceData = [ 

                    <?php

                        if (($handle = fopen("data.csv", "r")) !== FALSE) {

                            $i=0;

                            $len = count(file('data.csv'));

                            while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {

                                    if($i==$len - 1){

                                        echo "{y: ".$i.",".$data[1].", extprop: '".$data[4]."'}";

                                        }else{

                                        echo "{y: ".$i.",".$data[1].", extprop: '".$data[4]."'}," ;

                                        }

                                $i++;
                            }
                                fclose($handle);
                            }
                ?>

                ];

        $('#container').highcharts({
            title: {
                text: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
                x: -20 //center
            },

        tooltip: {
                    formatter: function () {
                        console.log(this.point.extprop);
                        var s = 'The value for <b>' + this.x +
                            '</b> is <b>' + this.y + '</b>';
                        if (this.point.extprop) {
                           s += 'for <b>' + this.point.extprop + '</b>';
                        }
                        return s;
                    }
                },


            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: [

            <?php   
                 if (($handle = fopen("data.csv", "r")) !== FALSE) {
            $i=0;

            while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {

                        if($i==$len - 1){

                                echo "'".$data[0]."'" ;

                        }else{
                                echo "'".$data[0]."'," ;
                        }

                $i++;
            }
                fclose($handle);
            }

            ?>  

            ]},
            yAxis: {
                title: {
                    text: 'Percent'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '%'
            },

            legend: {
                layout: 'vertical',
                //align: 'right',
                //verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'RNA',
                data: sourceData
            },
            {
                type: 'line',
                marker: { enabled: false },
                /* function returns data for trend-line */
                data: (function() {
                  return fitData(sourceData).data;
                })()
            }],
            credits: {
                enabled: false
            }
      });
});

        </script>
        </head>

<body>

<script src="exporting.js"></script>

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

    </body>
</html>

this is the csv file :

 17-Jul-14  99.43   99.69   99.86   power issue
    18-Jul-14   99.4    99.64   99.83   flood
    19-Jul-14   99.24   99.63   99.82   power issue
    20-Jul-14   99.4    99.67   99.85   flood
    21-Jul-14   99.21   99.65   99.82   power issue
    22-Jul-14   98.45   99.35   99.53   flood
    23-Jul-14   98.41   99.39   99.56   power issue
    24-Jul-14   99.18   99.6    99.79   flood
    25-Jul-14   99.36   99.66   99.87   power issue
    26-Jul-14   99.31   99.67   99.89   flood
    27-Jul-14   99.38   99.64   99.89   power issue
    28-Jul-14   99.2    99.57   99.76   flood
    29-Jul-14   99.38   99.64   99.84   power issue
    30-Jul-14   99.32   99.63   99.82   flood
    31-Jul-14   99.24   99.61   99.8    power issue
    1-Aug-14    99.38   99.65   99.84   flood

Error : when i inspect element at line no : 20

var sourceData = [ 

                {x: 0,y: 0,99.43, extprop: 'power issue'},{x: 1,y: 1,99.40, extprop: 'flood'},{x: 2,y: 2,99.24, extprop: 'power issue'},{x: 3,y: 3,99.40, extprop: 'flood'},{x: 4,y: 4,99.21, extprop: 'power issue'},{x: 5,y: 5,98.45, extprop: 'flood'},{x: 6,y: 6,98.41, extprop: 'power issue'},{x: 7,y: 7,99.18, extprop: 'flood'},{x: 8,y: 8,99.36, extprop: 'power issue'},{x: 9,y: 9,99.31, extprop: 'flood'},{x: 10,y: 10,99.38, extprop: 'power issue'},{x: 11,y: 11,99.20, extprop: 'flood'},{x: 12,y: 12,99.38, extprop: 'power issue'},{x: 13,y: 13,99.32, extprop: 'flood'} ];                    ];

And this is graph without mouse over : http://api.highcharts.com/highcharts#series.data

In the pop up when mouse over the date and value is coming according to this the graph is plotting and now i want to add the reason for the pop up that is coming i have passed the value in source code loop like this :

var sourceData = [ 
                <?php
                            if (($handle = fopen("data.csv", "r")) !== FALSE) {
                                $i=0;
                                $len = count(file('data.csv'));
                                while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
                                        if($i==$len - 1){
                                            echo "[".$i.",".$data[1].",".$data[4]."]";
                                            }else{
                                            echo "[".$i.",".$data[1].",".$data[4]."]," ;
                                            }
                                    $i++;
                                }
                                    fclose($handle);
                                }
                    ?>

                ];

But the problem i am getting when i am Inspect element : Uncaught SyntaxError: Unexpected identifier

And regression.js file get from the Github : https://github.com/Tom-Alexander/regression-js

And This is screen shot : please observe in the pop up , when mouse over :

enter image description here

When mouse over the pop up is coming on the particular point on the graph and now i want to pass the 4th column to the mouse over pop up with 4th column , i have tried in the above source code passed the 4th column but i got the error ; i know it will not generate the graph but the reason has to pass must to, in which date what is the issue is ...

please help , thanks.

This is output i want to pass the 4th column in the tool tip please observe :

enter image description here

In the above diagram the tool tip has the reason , this the reason the 4th column has to come ..please help

标签： javascript php jquery highcharts

1条回答

孤傲高冷的网名

2楼-- · 2019-09-01 07:31

If you want to add a custom property to your data to have it show in the tooltip you need to add to your sourceData array. Psuedo code below:

var sourceData = [ 
                <?php
                            if (($handle = fopen("data.csv", "r")) !== FALSE) {
                                $i=0;
                                $len = count(file('data.csv'));
                                while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
                                        if($i==$len - 1){
                                            echo "{x: ".$i.", y: ".$data[1].", extprop: '".$data[4]."'}";
                                            }else{
                                            echo "{x: ".$i.", y: ".$data[1].", extprop: '".$data[4]."'}," ;
                                            }
                                    $i++;
                                }
                                    fclose($handle);
                                }
                    ?>

                ];

You need to change the point object to the {...} format instead of [...]. Where y is the yValue and extprop is some extended info you want (this property name can be any non-reserved name).

Then in your tooltip you need to add this extprop:

tooltip: {
    formatter: function () {
        console.log(this.point.extprop);
        var s = 'The value for <b>' + this.x +
            '</b> is <b>' + this.y + '</b>';
        if (this.point.extprop) {
           s += 'for <b>' + this.point.extprop + '</b>';
        }
        return s;
    }
}

0人赞添加讨论(0) 举报

How to pass the another variable to the Highchart

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间