Simplest annotated line chart

问题

this was originally asked on Google groups but since I received no replies, I'm asking here on SO.

I am plotting basic data like temperature, various counts and such with date time and I like to append a third column as a further description.

E.g.

time, value, description
time, value, description
time, value, description

So I am looking at the simplest way of plotting that, as full screen as possible, as minimally (least LOC) as possible.

So far with https://jsfiddle.net/kaihendry/q1mczqc1/2/ I have not figured how to show the description (is it a infobox/selection? not sure on terminology), which in my example is the kernel version, when I click a point.

Furthermore I don't understand why on the right of the graph there are these null value labels: http://s.natalian.org/2015-06-16/1434449447_1054x1058.png

And any tips to make http://s.natalian.org/2015-06-16/foo.html scale to fill the whole screen? I especially want to make it usable on my iPhone.

回答1:

I have not figured how to show the description (is it a infobox/selection? not sure on terminology)

In web development, this is called a tooltip. In Google charts, you can add a tooltip by replacing the commented line with the following one :

//data.addColumn('string', 'kernel');
data.addColumn({type: 'string', role: 'tooltip'});

So, the 3rd column will not be handled as a data series, but as a tooltip.

Furthermore I don't understand why on the right of the graph there are these null value labels

The null values are shown, because (as previously stated), you have inserted 2 series of data ('Date' and 'kernel'). If you make the replacement mentioned before, the null values will be replaced

And any tips to make .. scale to fill the whole screen ?

You can add the following option to configure the dimensions of the chart :

var options = {
    chartArea: {width: '80%', height: '80%'}
};

Furthermore, since the version of line charts you are using are slightly obsolete, you shoud replace

var chart = new google.charts.Line(document.getElementById('linechart_material'));

with

var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));

In the following jsfiddle, you can find a final working version
(with some more fixes, like horizontal axis range and legend positioning).

回答2:

If I understand right you want to add third column as a description for each point.

If you add 3rd column like this

data.addColumn('string', 'kernel');

Google chart takes this as another series and because the data are string it can't draw the series and shows null.

You can add 3rd column as a tooltip.

data.addColumn({type: 'string', role: 'tooltip'});

But for tooltip to work you need to change the line chart to visualization line chart

var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));

To make chart fill the screen you can change the div style.

<div id="linechart_material" style="height:100%;"></div>

来源：https://stackoverflow.com/questions/31284796/simplest-annotated-line-chart

标签

google-visualization