CODEWITHSUNDEEP
chartsgoogle-visualization
Alexander Farber
Alexander Farber

Reputation: 22988

Interval role i-lines are not displayed in Google line chart

I am trying to add min and max limits to a Google chart, which I generate using a Perl script from CSV data - by using the interval role for these 2 values.

Unfortunately the I-lines are not displayed at my line chart, even though I've set the min and max limits to the -100 and 100 for the sake of testing.

Only the main data is being displayed:

enter image description here

Can anybody please spot the error, what is wrong with my very simple test case?

Please just save the code below as an HTML-file and open in a browser:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">

        var data = {"L_B8_ACLR_50_0_QPSK_1_H":{"rows":[
            {"c":[{"v":"UTRA_1_DOWN"},{"v":-100},{"v":100},{"v":"-42.46912"}]},
            {"c":[{"v":"E-UTRA_1_DOWN"},{"v":-100},{"v":100},{"v":"-39.9545"}]},
            {"c":[{"v":"E-UTRA_1_UP"},{"v":-100},{"v":100},{"v":"-48.68408"}]},
            {"c":[{"v":"UTRA_1_UP"},{"v":-100},{"v":100},{"v":"-49.45148"}]},
            {"c":[{"v":"UTRA_2_UP"},{"v":-100},{"v":100},{"v":"-58.96674"}]}],

            "cols":[
            {"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
            {"p":{"role":"interval"},"label":"LSL","type":"number"},
            {"p":{"role":"interval"},"label":"USL","type":"number"},
            {"p":{"role":"data"},"label":"1142926087","type":"number"}]}};

        function drawCharts() {
                for (var csv in data) {
                        var x = new google.visualization.DataTable(data[csv]);

                        var options = {
                                title: csv,
                                width: 800,
                                height: 600
                        };

                        var chart = new google.visualization.LineChart(document.getElementById(csv));
                        chart.draw(x, options);
                }
        }

        $(function() {
                google.setOnLoadCallback(drawCharts);
        });

</script>
</head>
<body>
<div id="L_B8_ACLR_50_0_QPSK_1_H"></div>
</body>
</html>

(I don't want to use methods like addColumn or addRows. Instead I prepare my data as data structure in my Perl script and then JSON-encode and pass it to DataTable ctr).

Upvotes: 0

Views: 213

Answers (1)

davidkonrad
davidkonrad

Reputation: 85538

You must specify the interval-role column after the data-column. As written in the API :

"All columns except domain columns apply to the nearest left neighbor to which it can be applied"

So if you change the order (and here with some smaller intervals)

var data = {"L_B8_ACLR_50_0_QPSK_1_H":{"rows":[
            {"c":[{"v":"UTRA_1_DOWN"},{"v":"-42.46912"},{"v":-50},{"v":-45}]},
            {"c":[{"v":"E-UTRA_1_DOWN"},{"v":"-39.9545"},{"v":-50},{"v":-45}]},
            {"c":[{"v":"E-UTRA_1_UP"},{"v":"-48.68408"},{"v":-50},{"v":-45}]},
            {"c":[{"v":"UTRA_1_UP"},{"v":"-49.45148"},{"v":-50},{"v":-45}]},
            {"c":[{"v":"UTRA_2_UP"},{"v":"-58.96674"},{"v":-50},{"v":-45}]}],

            "cols":[
            {"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
            {"p":{"role":"data"},"label":"1142926087","type":"number"},
            {"p":{"role":"interval"},"label":"LSL","type":"number"},
            {"p":{"role":"interval"},"label":"USL","type":"number"}
            ]}};

..You end up with :

enter image description here

Upvotes: 1

Related Questions