1 year ago

#362567

test-img

Bengt

Google line chart multiple y-axis

I can't find out how to format the different y-axis. The two lines (hum, press) is not easy to read the values. can anyone point me in the right direction? I have not found any good description on how to format the y-axis values, and formatting them.

Please check the image and code below.

enter image description here

function drawLineChart3h() {
                //var chartDiv = document.getElementById('GoogleLineChart');
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Time');
                data.addColumn('number', 'Temperatur');
                data.addColumn('number', 'Luftfuktighet');
                data.addColumn('number', 'Trykk');
                data.addRows([
                            <?php 
                                foreach ($temp3H as $row){
                                echo "['".$row['dag']."',".$row['temp'].",".$row['hum'].",".$row['pres']."],\n";
                            } ?>
                ])

                var options = {
                    animation: {
                        startup: true,   /* Need to add this for animations */
                        duration: 1000,
                        easing: 'out',
                    },
                    curveType: 'function',
                    smoothline: 'true',   /* What does this do? */
                    width: 875,    /* Better to specify size of containing DIV? */
                    height: 400,
                    legend: {
                        position: 'top'
                    },
                    series: {
                        0: {targetAxisIndex: 0},
                        1: {targetAxisIndex: 1},
                        2: {targetAxisIndex: 2}
                    },
                    vAxes:{    
                        0: {title: 'Temp'},
                        1: {title: 'Hum'},
                        2: {title: 'Press'}
                    }
                };

            /* Create instance of "Classic" Visualization Line Chart  */
                var chart = new google.visualization.LineChart(document.getElementById('GoogleLineChart3H'));
                chart.draw(data, options);
            }

charts

formatting

google-visualization

0 Answers

Your Answer

Accepted video resources