automatic adaption of the width of the graph area depending on the amount of data points

113 views
Skip to first unread message

beginnerGG

unread,
Feb 23, 2016, 4:49:22 AM2/23/16
to Google Visualization API
Dear Users,

I have the following code to draw a graph from a DB query in my html-body:

<div id="chart_neo_div">
    <script>
    function drawChart() {
      var jsonData = $.ajax({
          url: "Antwortzeiten_.php?seite=Neo",
          dataType:"json",
          async: false
          }).responseText;
       
      // 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_neo_div'));
      chart.draw(data, {width: 1000, height: 240});
    }
    window.setTimeout(drawChart(), 10000);    
    </script>
</div>

The width is 1000 fixed. The source of the data is a database, that is growing. Thus the amount of data points to be displayed is increasing each time the LineChard is drawn.

1. To display more and more data points in this graph its width should dynamically grow with the data.
2. As the width of the html-page is limited, I need a scroll-bar for this at some limit.
3. Ideally the y-axis label and the legend is fixed outside the scroll-able area, so that this information is always seen (When I make the whole div scroll, the legend and the x-axis is also shifted out of the displayed area).

I would be pleased, if you have some hints how to do this, as I am a total beginner in this field.

Best regards and thank you! 

Sergey Grabkovsky

unread,
Feb 23, 2016, 10:09:24 AM2/23/16
to Google Visualization API
Hi,

The Line Chart will always scale your data to fit the chart. So if you have a lot of data, then it will just all be squished into the chart, instead of having a certain part no longer be visible (Column Charts have slightly different behavior). If that's the behavior you want, then you will have to analyze the range of your data and set the chart's view window appropriately. You'll then want to hook up 'explorer' mode in order to enable drag-to-move on the chart (to be able to explore the older data).

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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/67f7eeba-2a0c-4456-bb6e-940e092a38b0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
--

unnamed.gif

•

Sergey Grabkovsky

•

Software Engineer

•

Google, Inc

•

gra...@google.com


beginnerGG

unread,
Feb 26, 2016, 5:49:34 AM2/26/16
to Google Visualization API
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

Sergey Grabkovsky

unread,
Feb 29, 2016, 9:59:57 AM2/29/16
to Google Visualization API
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. 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?

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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/2f9d42de-4355-49c3-9f19-76603bfbd74a%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

beginnerGG

unread,
May 16, 2017, 8:58:29 AM5/16/17
to Google Visualization API
Dear Sergey,

with the following code I can scroll vertical (the scale of the y-axis changes). But I am looking for a possibility to scroll horizionally (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 replace "horiziontal" with "vertical", 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: {axis: 'horizontal'}, width: 800, height: 240});

Thank you!

beginnerGG

unread,
May 16, 2017, 9:21:32 AM5/16/17
to Google Visualization API
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});

Daniel LaLiberte

unread,
May 16, 2017, 12:01:21 PM5/16/17
to Google Visualization API
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. 

--
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...@googlegroups.com.
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/bcd4cc9e-4ff1-4036-ade9-b62f030d911d%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

beginnerGG

unread,
May 31, 2017, 7:59:10 AM5/31/17
to Google Visualization API
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?
To post to this group, send email to google-visua...@googlegroups.com.



--

Daniel LaLiberte

unread,
May 31, 2017, 9:19:13 AM5/31/17
to Google Visualization API
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.  

Hello Daniel,

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
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/5a4ce1d7-20eb-42ea-98ff-fb5dda27fbda%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

beginnerGG

unread,
Jul 12, 2017, 10:30:35 AM7/12/17
to Google Visualization API

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
Hello Daniel,

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
Jul 12, 2017, 11:49:54 AM7/12/17
to Google Visualization API
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.


Hello Daniel,

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
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/11338c33-96d3-4875-b112-e3e30eaff1f7%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

beginnerGG

unread,
Jul 18, 2017, 11:00:30 AM7/18/17
to Google Visualization API
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!
Hello Daniel,

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
Jul 18, 2017, 11:15:16 AM7/18/17
to Google Visualization API
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/datatables_dataviews and https://developers.google.com/chart/interactive/docs/reference#DataView

Hello Daniel,

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
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/c3303a08-eccd-4a9a-81c2-80b26db380a9%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

beginnerGG

unread,
Jul 19, 2017, 4:44:47 AM7/19/17
to Google Visualization API
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!
Hello Daniel,

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
Jul 19, 2017, 9:29:48 AM7/19/17
to Google Visualization API
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/customizing_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.  

Hello Daniel,

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
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/62f628e9-eb11-4b74-9c54-b2064f5281a9%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

beginnerGG

unread,
Jul 20, 2017, 5:11:53 AM7/20/17
to Google Visualization API
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!
Hello Daniel,

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
Jul 20, 2017, 10:35:13 AM7/20/17
to Google Visualization API
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.


Hello Daniel,

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
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.

For more options, visit https://groups.google.com/d/optout.



--

beginnerGG

unread,
Jul 24, 2017, 9:54:24 AM7/24/17
to Google Visualization API
Thank you very much. I am sorry, but I have some more beginners problems with this:

1. Does this array have one or two dimensions?
I get this:  Array ( [0] => Array ( [v] => 1 [f] => 26.11.15 ) [1] => Array ( [v] => 2 [f] => 09.12.15 ) or this: [{"v":1,"f":"26.11.15"},{"v":2,"f":"09.12.15"},... out of the PHP-script, that I also use for the graphing. But I do not know how to build the exact "[{v: 1, f: '26.11.15'}, {v: 2, f: '09.12.15'},..."-array.
2. Anyway I do not know, if I can use the same PHP-script call for this or if PHP only returns one array variable at a time, so I have to call the PHP-script once for the visualizing of the data and once for the ticks option?
3. DataView seams to get data from other tables by URLs, but I do not know how to connect to my database table with DataView.

Best regards
Hello Daniel,

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
Jul 24, 2017, 10:21:01 AM7/24/17
to Google Visualization API
What you need for the ticks option is an array of values or objects.  [{"v":1,"f":"26.11.15"},{"v":2,"f":"09.12.15"}, ..., 5, 6, 7]  I don't know enough about PHP to help you with how to do that, though I am sure it is possible.

A DataView gets data from a DataTable (or another DataView), but it doesn't deal with URLs. (You may be confusing the DataView with the ChartWrapper.)  If you get a DataTable delivered to the browser, then you can use that to construct a DataView.


Hello Daniel,

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
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/56c81fab-0411-4778-a6ee-a52ef0979378%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

beginnerGG

unread,
Jul 28, 2017, 11:13:45 AM7/28/17
to Google Visualization API
Ok I will look deeper into php arrays. Meanwhile my explorer and ticks does not work anymore and I can not find a reason:
I just get all the values on the y-axis and 1,2,3,...20 on the x-axis, but it is not scrollable anymore and does not show the f-ticks.

function drawChart() {     
var jsonData = $.ajax({
          url: "Antwortzeiten_ZDF.php?seite=Start",
          dataType:"json",
          async: false
          }).responseText;
   
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'}, {v: 7, f: '02.03.16'}, {v: 8, f: '16.03.16'}, {v: 9, f: '14.04.16'}, {v: 10, f: '11.05.16'}, {v: 11, f: '04.08.16'}, {v: 12, f: '07.09.16'}, {v: 13, f: '08.12.16'}, {v: 14, f: '19.12.16'}, {v: 15, f: '22.12.16'}, {v: 16, f: '05.04.17'}, {v: 17, f: '11.05.17'}, {v: 18, f: '08.06.17'}, {v: 19, f: '13.07.17'}, {v: 20, f: '28.07.17'}]
       
      // 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: [ticksArray]}});
    }
window.setTimeout(drawChart(), 10000);
</script>
Hello Daniel,

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
Jul 28, 2017, 11:28:22 AM7/28/17
to Google Visualization API
Your ticks option is now an array in an array.  You said:

  hAxis: {ticks: [ticksArray]}

but since the value in ticksArray is an array, that is equivalent to:

  hAxis: {ticks: [[{v: 1, f: '26.11.15'}, {v: 2, f: '09.12.15'}, {v: 3, f: '22.12.15'}, ...]] }

So you should have said:

  hAxis: {ticks: ticksArray}

The vertical axis should be scrollable, if you have specified values in your data table that are numbers and not strings.  Note that "1" is a string, but 1 is a number.

Hello Daniel,

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
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/3a74475e-7e7e-4da2-9460-01dae0496d1e%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

beginnerGG

unread,
Aug 18, 2017, 4:48:35 AM8/18/17
to Google Visualization API
Hello Daniel,

thank you very much! I now have a intermediate solution, that looks ok. Just, the fact, that one can scroll into negative time line area left of the vertical zero-startpoint-line, where no mesurement results (y-values) exist, is a little bit irritating. Is there an option to suppress this?
Hello Daniel,

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--
Reply all
Reply to author
Forward
0 new messages