The ticks option value is an array of ticks. What you have now is an array
of one string (that contains all the elements). Just do this instead:
var ticksArray = [{v: 1, f: '26.11.15'}, {v: 2, f: '09.12.15'}, {v: 3, f:
'22.12.15'}, {v: 4, f: '13.01.16'}, {v: 5, f: '27.01.16'}, {v: 6, f:
'17.02.16'}];
... hAxis: { ticks: ticksArray }
Read the docs on DataView vs DataTable again. A DataView is like a 'view'
of a DataTable. The point here would be if you want to include all the
formatted values for the ticks in a column of the DataTable, then you could
hide that column using a DataView.
On Thu, Jul 20, 2017 at 5:11 AM, beginnerGG <[email protected]> wrote:
> Dear Danial,
>
> first thanks for the hint to 'tooltip' role. I think I understand the
> example.
> I also think, that I can write a JavaScript-loop (e.g. to get all ticks
> option f-values into one array). But how do I get the result of this loop
> into the ticks option?
> E.g. when I put a variable into the ticks option the x-axis has no more
> values at all:
>
> function drawChart() {
> var jsonData = $.ajax({
> url: "Antwortzeiten_ZDF-2016.php?seite=Start",
> dataType:"json",
> async: false
> }).responseText;
>
> // X-Achsen-Beschriftungs-Options-Array füllen
> var ticksString = "{v: 1, f: '26.11.15'}, {v: 2, f: '09.12.15'}, {v: 3, f:
> '22.12.15'}, {v: 4, f: '13.01.16'}, {v: 5, f: '27.01.16'}, {v: 6, f:
> '17.02.16'}";
>
> // Create our data table out of JSON data loaded from server.
> var data = new google.visualization.DataTable(jsonData);
>
> // Instantiate and draw our chart, passing in some options.
> var chart = new google.visualization.LineChart(document.
> getElementById('chart_start_div'));
> chart.draw(data, {explorer:{axis: 'horizontal'} , width: 800,
> height: 240, hAxis: {ticks: [ticksString]
> }
> });
> }
> window.setTimeout(drawChart(), 10000);
>
> I do not know which advantage DataView might have to solve the problem? Is
> it an alternative way to the ticks option?
>
> Best regards!
>
> Am Mittwoch, 19. Juli 2017 15:29:48 UTC+2 schrieb Daniel LaLiberte:
>>
>> You'll probably have to figure out how to do loops in JavaScript and/or
>> in your server-side language.
>>
>> You can specify the formatted representation of each data value if you
>> use, e.g. {v: 1, f: '14.04.16'} in your DataTable. These formatted
>> representations will be used in the popup tooltips. Or you can specify the
>> full text of the tooltips using a 'tooltip' role:
>> https://developers.google.com/chart/interactive/docs/custom
>> izing_tooltip_content#customizing-tooltip-content
>>
>> I'm not sure what you are thinking regarding DataViews. Since you
>> specify DataViews by pointing to rows and columns in a DataTable, you
>> usually avoid having to loop over all the data.
>>
>> On Wed, Jul 19, 2017 at 4:44 AM, beginnerGG <[email protected]> wrote:
>>
>>> Dear Daniel,
>>>
>>> 1. Do you mean, that I either can use a JS-loop *or* a DataView method?
>>> I also thought of a JS-loop, but I do not know if I can simply use it
>>> between the brackets of the ticks option?
>>> 2. Also with the DataView method it seams, that I have to use a loop
>>> additionally. Also it seams, that then I still have the problem with the
>>> explorer mode again, because it does not work with discontinous date values
>>> (?).
>>> 3. Is there also a possibility to get the dates into the pop-up view
>>> instead of the continous counter, during mouse-over on the graph line
>>> points with explorer mode?
>>>
>>> Best regards!
>>>
>>> Am Dienstag, 18. Juli 2017 17:15:16 UTC+2 schrieb Daniel LaLiberte:
>>>>
>>>> If you want to automatically fill the endless row of tick values and
>>>> formats, you'd have to write a loop in JavaScript to do that. Or if you
>>>> want your date values to come from your database, where they end up in your
>>>> DataTable, you could pull them out to generate the formatted
>>>> representation, and hide them from the original DataTable by using a
>>>> DataView. See https://developers.google.com/chart/interactive/docs/dat
>>>> atables_dataviews and https://developers.google.
>>>> com/chart/interactive/docs/reference#DataView
>>>>
>>>> On Tue, Jul 18, 2017 at 11:00 AM, beginnerGG <[email protected]> wrote:
>>>>
>>>>> Thanks very much! The explorer mode works also with the ticks option.
>>>>> Nevertheless is there any method to automatically fill the endless row
>>>>> "[ {v: 1, f: '14.04.16'}, {v: 2, f: '11.05.16'}, {v: 3, f: '04.08.16'},
>>>>> {v:
>>>>> 4, f: '07.09.16'}, ...] ?
>>>>> I have all the data (y-axiy mesurement values, counter and date
>>>>> strings in a MariaDB-table and get it by a PHP-call in
>>>>>
>>>>> function drawChart() {
>>>>> var jsonData = $.ajax({
>>>>> url: "Antwortzeiten_ZDF-2016.php?seite=Start",
>>>>> dataType:"json",
>>>>> async: false
>>>>> }).responseText;
>>>>>
>>>>> Best regards!
>>>>>
>>>>>
>>>>> Am Mittwoch, 12. Juli 2017 17:49:54 UTC+2 schrieb Daniel LaLiberte:
>>>>>>
>>>>>> First, to make the chart be scrollable with the explorer mode, the
>>>>>> values must be continuous. This is a current limitation because the code
>>>>>> assumes that if you use discrete values (which are strings only, by the
>>>>>> way) then you want to see all of them, so scrolling is disabled. This
>>>>>> might be fixable in the future, but not for now.
>>>>>>
>>>>>> So if you are using continuous values, then you could do like you
>>>>>> said and use integers instead of actual dates. Your ticks option is
>>>>>> wrong,
>>>>>> however, since your dates are really just strings, so they must be
>>>>>> quoted.
>>>>>> You would want to use:
>>>>>> ticks: [ {v: 1, f: '14.04.16'}, {v: 2, f: '11.05.16'}, {v: 3, f:
>>>>>> '04.08.16'}, {v: 4, f: '07.09.16'}]
>>>>>>
>>>>>> I forget what happens if you combine the ticks option with the
>>>>>> explorer mode, however. I suspect it will refuse to enable the explorer
>>>>>> mode.
>>>>>>
>>>>>>
>>>>>> On Wed, Jul 12, 2017 at 10:30 AM, beginnerGG <[email protected]>
>>>>>> wrote:
>>>>>>
>>>>>>>
>>>>>>> <https://lh3.googleusercontent.com/-9c2wTxv8D2o/WWYt5FS5v5I/AAAAAAAAAAQ/xUQ5WAyv_gUTt0UmI-0Q6M1R06lGSEehACLcBGAs/s1600/GoogleGraph.JPG>
>>>>>>> Dear Daniel,
>>>>>>>
>>>>>>> thank you very much. I tried the recommended hAxis.ticks option in
>>>>>>> different ways. To explain what I want to achieve, I set the horizontal
>>>>>>> axis values of the attached screenshot into the following code. It
>>>>>>> seams,
>>>>>>> that this is not a correct way to do so. To explain it again: I just
>>>>>>> want
>>>>>>> to have the attached screenshot picture with discrete x-axis values
>>>>>>> (which
>>>>>>> are not continuous) shown under the horizontal axis ticks. But the graph
>>>>>>> should also be scrollable, to the left and the right to see the
>>>>>>> y-values of
>>>>>>> endless past, resent and last mesurement dates. I can scroll meanwhile,
>>>>>>> as
>>>>>>> I replaced the real mesurement dates by continous values (1, 2, 3, 4,
>>>>>>> ...).
>>>>>>> But I am looking for a possibility to see the real date values 14.04
>>>>>>> .16, 11.05.16, 04.08.16, 07.09.16, ... instead of the 1, 2, 3, 4,
>>>>>>> ...under the horizontal axis ticks.
>>>>>>>
>>>>>>>
>>>>>>> var data = new google.visualization.DataTable(jsonData);
>>>>>>>
>>>>>>> // Instantiate and draw our chart, passing in some options.
>>>>>>> var chart = new google.visualization.LineChart(document.
>>>>>>> getElementById('chart_start_div'));
>>>>>>> chart.draw(data, {explorer:{} , width: 800, height: 240,
>>>>>>> hAxis: {ticks: [14.04.16, 11.05.16, 04.08.16, 07.09.16]
>>>>>>> }});
>>>>>>>
>>>>>>>
>>>>>>> I would be very pleased, if you could give me another hint to get
>>>>>>> into that direction.
>>>>>>>
>>>>>>> Best regard
>>>>>>>
>>>>>>> Am Mittwoch, 31. Mai 2017 15:19:13 UTC+2 schrieb Daniel LaLiberte:
>>>>>>>>
>>>>>>>> You can specify the formatted representation of each data value in
>>>>>>>> a couple different ways.
>>>>>>>>
>>>>>>>> * You can compute the format for each value in a column using a
>>>>>>>> formatter. https://developers.google.com
>>>>>>>> /chart/interactive/docs/reference#formatters
>>>>>>>> * You can provide an 'f' value for each 'v' value in a cell of the
>>>>>>>> datatable when providing data with cell objects in the constructor or
>>>>>>>> using
>>>>>>>> addRow or addRows. https://developers.google.com
>>>>>>>> /chart/interactive/docs/reference#cell_object
>>>>>>>> * You can provide the formatted value to setCell
>>>>>>>> or setFormattedValue. https://developers.google.com
>>>>>>>> /chart/interactive/docs/reference#DataTable_setFormattedValue
>>>>>>>>
>>>>>>>> For the axis ticks, these would be computed values for continuous
>>>>>>>> axes, so you will have to use the 'ticks' option (under the hAxis in
>>>>>>>> this
>>>>>>>> case) to specify the values you want and the formatted representation
>>>>>>>> of
>>>>>>>> each.
>>>>>>>>
>>>>>>>> On Wed, May 31, 2017 at 7:59 AM, beginnerGG <[email protected]>
>>>>>>>> wrote:
>>>>>>>>
>>>>>>>>> Hello Daniel,
>>>>>>>>>
>>>>>>>>> thanks. I can use a row counter instead of the actual date and
>>>>>>>>> time of the measurement value to make explorer mode also in the
>>>>>>>>> x-axis-direction. But then I need a possibility to overwrite the
>>>>>>>>> continuous
>>>>>>>>> values shown in the graph with the actual date and time of the
>>>>>>>>> measurement,
>>>>>>>>> that I used in the graph up to now. Is there any such possibility with
>>>>>>>>> google graphs?
>>>>>>>>>
>>>>>>>>> Am Dienstag, 16. Mai 2017 18:01:21 UTC+2 schrieb Daniel LaLiberte:
>>>>>>>>>>
>>>>>>>>>> I'm not sure this applies to your case, but the explore mode does
>>>>>>>>>> not work yet for an axis with discrete values. If you convert the
>>>>>>>>>> values
>>>>>>>>>> to continuous values (numbers of dates) then explore mode will work.
>>>>>>>>>>
>>>>>>>>>> On Tue, May 16, 2017 at 3:21 PM, beginnerGG <[email protected]>
>>>>>>>>>> wrote:
>>>>>>>>>>
>>>>>>>>>>> Corrected:
>>>>>>>>>>>
>>>>>>>>>>> Am Dienstag, 16. Mai 2017 14:58:29 UTC+2 schrieb beginnerGG:
>>>>>>>>>>>>
>>>>>>>>>>>> Dear Sergey,
>>>>>>>>>>>>
>>>>>>>>>>>> with the following code I can only scroll vertical (the scale
>>>>>>>>>>>> of the y-axis changes). But I am looking for a possibility to
>>>>>>>>>>>> scroll
>>>>>>>>>>>> horizontal (changing the scale of the x-axis and sliding the
>>>>>>>>>>>> window over
>>>>>>>>>>>> different visible times), as the number of values along the x-axis
>>>>>>>>>>>> is
>>>>>>>>>>>> increasing from time to time. When I place "axis: 'horizontal'
>>>>>>>>>>>> between the
>>>>>>>>>>>> curly braces, I can not scroll at all. Have you got any idea to
>>>>>>>>>>>> achieve
>>>>>>>>>>>> this? It seams, that it has something to do with the kind of data
>>>>>>>>>>>> (format)
>>>>>>>>>>>> for my x-axis (?).
>>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>> var data = new google.visualization.DataTable(jsonData);
>>>>>>>>>>>>
>>>>>>>>>>>> var chart = new google.visualization.LineChart
>>>>>>>>>>>> (document.getElementById('chart_start_div'));
>>>>>>>>>>>> chart.draw(data, {explorer: {}, width: 800, height: 240});
>>>>>>>>>>>>
>>>>>>>>>>>> Thank you!
>>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>> Am Montag, 29. Februar 2016 15:59:57 UTC+1 schrieb Sergey:
>>>>>>>>>>>>>
>>>>>>>>>>>>> The "explorer" option is what will provide the "drag-to-move"
>>>>>>>>>>>>> functionality. You can find the documentation for how to use
>>>>>>>>>>>>> explorer mode
>>>>>>>>>>>>> on the page of any chart that supports it, for example the
>>>>>>>>>>>>> line chart
>>>>>>>>>>>>> <https://developers.google.com/chart/interactive/docs/gallery/linechart>.
>>>>>>>>>>>>> Here's a simple example of explorer mode:
>>>>>>>>>>>>> http://jsfiddle.net/kxL09t5t/
>>>>>>>>>>>>>
>>>>>>>>>>>>> By default, the chart will show *all* the data that you give
>>>>>>>>>>>>> to it. If this behavior works for you, you don't need to do any
>>>>>>>>>>>>> of the
>>>>>>>>>>>>> other things I said, including enabling explorer mode. However,
>>>>>>>>>>>>> from your
>>>>>>>>>>>>> first post, I got the impression that you didn't want your chart
>>>>>>>>>>>>> to be too
>>>>>>>>>>>>> crowded (I probably got that from the fact that you mentioned
>>>>>>>>>>>>> scrollbars
>>>>>>>>>>>>> multiple times in your first post.)
>>>>>>>>>>>>>
>>>>>>>>>>>>> However, if I was correct in my previous assumption that you
>>>>>>>>>>>>> do not want your chart to be too crowded, you'll need some method
>>>>>>>>>>>>> of
>>>>>>>>>>>>> mitigating that. One way would be to have the database only send
>>>>>>>>>>>>> the last N
>>>>>>>>>>>>> (100, 200, 1000, whatever you're comfortable with) rows to the
>>>>>>>>>>>>> chart, and
>>>>>>>>>>>>> just draw all the data. However, if you want your user to be able
>>>>>>>>>>>>> to
>>>>>>>>>>>>> explore all the data, you'll need to do this on the client side,
>>>>>>>>>>>>> by
>>>>>>>>>>>>> limiting the view window (with the hAxis.viewWindow.min/max
>>>>>>>>>>>>> options). This
>>>>>>>>>>>>> is also where the explorer mode will come into play, since it
>>>>>>>>>>>>> will allow
>>>>>>>>>>>>> your users to explore the data you have hidden by customizing the
>>>>>>>>>>>>> view
>>>>>>>>>>>>> window.
>>>>>>>>>>>>>
>>>>>>>>>>>>> Hopefully that explains things better?
>>>>>>>>>>>>>
>>>>>>>>>>>>> On Fri, Feb 26, 2016 at 5:49 AM beginnerGG <[email protected]>
>>>>>>>>>>>>> wrote:
>>>>>>>>>>>>>
>>>>>>>>>>>>>> Dear Sergey,
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> thank you for your answer.
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> Drag-to-move would probably be nice, if I can fix the legend
>>>>>>>>>>>>>> and the y-axis with that, while the oldest data is hidden, if
>>>>>>>>>>>>>> there are
>>>>>>>>>>>>>> more than e.g. 5 values in the graph.
>>>>>>>>>>>>>> But I do not understand, why I have to analyze the range of
>>>>>>>>>>>>>> my data therefore? I also do not know, how to set the view
>>>>>>>>>>>>>> window (is it
>>>>>>>>>>>>>> the hAxis.viewWindow.max option?) And I do not find anything
>>>>>>>>>>>>>> about the "explorer mode". Is this also a chart.draw option?
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> Best regards
>>>>>>>>>>>>>>
>>>>>>>>>>>>>
>>>>>>>>>>>>>
>>>>>>>>>>>>> --
>>>>>>>>>>> You received this message because you are subscribed to the
>>>>>>>>>>> Google Groups "Google Visualization API" group.
>>>>>>>>>>> To unsubscribe from this group and stop receiving emails from
>>>>>>>>>>> it, send an email to google-visualization-api+unsub
>>>>>>>>>>> [email protected].
>>>>>>>>>>> To post to this group, send email to
>>>>>>>>>>> [email protected].
>>>>>>>>>>> Visit this group at https://groups.google.com/grou
>>>>>>>>>>> p/google-visualization-api.
>>>>>>>>>>> To view this discussion on the web visit
>>>>>>>>>>> https://groups.google.com/d/msgid/google-visualization-api/
>>>>>>>>>>> bcd4cc9e-4ff1-4036-ade9-b62f030d911d%40googlegroups.com
>>>>>>>>>>> <https://groups.google.com/d/msgid/google-visualization-api/bcd4cc9e-4ff1-4036-ade9-b62f030d911d%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>>>>>>>>> .
>>>>>>>>>>>
>>>>>>>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> --
>>>>>>>>>> Daniel LaLiberte
>>>>>>>>>> <https://plus.google.com/100631381223468223275?prsrc=2>
>>>>>>>>>> [email protected] 5CC, Cambridge MA
>>>>>>>>>>
>>>>>>>>> --
>>>>>>>>> You received this message because you are subscribed to the Google
>>>>>>>>> Groups "Google Visualization API" group.
>>>>>>>>> To unsubscribe from this group and stop receiving emails from it,
>>>>>>>>> send an email to google-visualization-api+unsub
>>>>>>>>> [email protected].
>>>>>>>>> To post to this group, send email to
>>>>>>>>> [email protected].
>>>>>>>>> Visit this group at https://groups.google.com/grou
>>>>>>>>> p/google-visualization-api.
>>>>>>>>> To view this discussion on the web visit
>>>>>>>>> https://groups.google.com/d/msgid/google-visualization-api/
>>>>>>>>> 5a4ce1d7-20eb-42ea-98ff-fb5dda27fbda%40googlegroups.com
>>>>>>>>> <https://groups.google.com/d/msgid/google-visualization-api/5a4ce1d7-20eb-42ea-98ff-fb5dda27fbda%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>>>>>>> .
>>>>>>>>>
>>>>>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> --
>>>>>>>> Daniel LaLiberte
>>>>>>>> <https://plus.google.com/100631381223468223275?prsrc=2>
>>>>>>>> [email protected] 5CC, Cambridge MA
>>>>>>>>
>>>>>>> --
>>>>>>> You received this message because you are subscribed to the Google
>>>>>>> Groups "Google Visualization API" group.
>>>>>>> To unsubscribe from this group and stop receiving emails from it,
>>>>>>> send an email to google-visualization-api+unsub
>>>>>>> [email protected].
>>>>>>> To post to this group, send email to [email protected]
>>>>>>> om.
>>>>>>> Visit this group at https://groups.google.com/grou
>>>>>>> p/google-visualization-api.
>>>>>>> To view this discussion on the web visit
>>>>>>> https://groups.google.com/d/msgid/google-visualization-api/
>>>>>>> 11338c33-96d3-4875-b112-e3e30eaff1f7%40googlegroups.com
>>>>>>> <https://groups.google.com/d/msgid/google-visualization-api/11338c33-96d3-4875-b112-e3e30eaff1f7%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>>>>> .
>>>>>>>
>>>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> --
>>>>>> Daniel LaLiberte
>>>>>> <https://plus.google.com/100631381223468223275?prsrc=2>
>>>>>> [email protected] 5CC, Cambridge MA
>>>>>>
>>>>> --
>>>>> You received this message because you are subscribed to the Google
>>>>> Groups "Google Visualization API" group.
>>>>> To unsubscribe from this group and stop receiving emails from it, send
>>>>> an email to [email protected].
>>>>> To post to this group, send email to [email protected].
>>>>> Visit this group at https://groups.google.com/grou
>>>>> p/google-visualization-api.
>>>>> To view this discussion on the web visit
>>>>> https://groups.google.com/d/msgid/google-visualization-api/
>>>>> c3303a08-eccd-4a9a-81c2-80b26db380a9%40googlegroups.com
>>>>> <https://groups.google.com/d/msgid/google-visualization-api/c3303a08-eccd-4a9a-81c2-80b26db380a9%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>>> .
>>>>>
>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> Daniel LaLiberte
>>>> <https://plus.google.com/100631381223468223275?prsrc=2>
>>>> [email protected] 5CC, Cambridge MA
>>>>
>>> --
>>> You received this message because you are subscribed to the Google
>>> Groups "Google Visualization API" group.
>>> To unsubscribe from this group and stop receiving emails from it, send
>>> an email to [email protected].
>>> To post to this group, send email to [email protected].
>>> Visit this group at https://groups.google.com/grou
>>> p/google-visualization-api.
>>> To view this discussion on the web visit https://groups.google.com/d/ms
>>> gid/google-visualization-api/62f628e9-eb11-4b74-9c54-b2064f
>>> 5281a9%40googlegroups.com
>>> <https://groups.google.com/d/msgid/google-visualization-api/62f628e9-eb11-4b74-9c54-b2064f5281a9%40googlegroups.com?utm_medium=email&utm_source=footer>
>>> .
>>>
>>> For more options, visit https://groups.google.com/d/optout.
>>>
>>
>>
>>
>> --
>> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
>> [email protected] 5CC, Cambridge MA
>>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Visualization API" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to google-visualization-api@
> googlegroups.com.
> Visit this group at https://groups.google.com/
> group/google-visualization-api.
> To view this discussion on the web visit https://groups.google.com/d/
> msgid/google-visualization-api/1c7d3484-6a71-41ed-bf07-
> 970443ec98a0%40googlegroups.com
> <https://groups.google.com/d/msgid/google-visualization-api/1c7d3484-6a71-41ed-bf07-970443ec98a0%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
>
> For more options, visit https://groups.google.com/d/optout.
>
--
Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
[email protected] <[email protected]> 5CC, Cambridge MA
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJN0CiVB03R%3DR_usLV0hJej%3DYu4zRAJh1RFY3ydSg6HePA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
