Assuming you meant to set the filters range end at 30 days from the start, the way to do it is to get the start date + 30 days and set that as the control's state.range.end parameter.
The reason you see months multiple times is because the tick marks correspond to multiple dates in the month (change the hAxis.format option to 'MMM,d,y' and you will see the difference). You can override the default tick marks by setting the hAxis.ticks option to an array of dates of your choice. I wrote some code that will generate a list of dates, one per month, in a given data set: http://jsfiddle.net/asgallant/vt8verhq/5/ On Friday, August 29, 2014 1:29:15 AM UTC-4, Richie Khandelwal wrote: > > Andrew - thanks for your response. here is my JS fiddle ( > http://jsfiddle.net/rkv328/vt8verhq/2/) It currently pulls data from an > excel. couple of quick questions. > > 1. How can I set the filter - so that it's initial state is 30 days out > from the first row? > > 2. As you see on the chart filter graph - aug and september are shown two > times. How can I make them show up only once? > > > On Wed, Aug 27, 2014 at 7:12 PM, Richie Khandelwal <[email protected] > <javascript:>> wrote: > >> Never mind, found it. Will report back after trying it. Much Thanks! >> >> >> On Wednesday, August 27, 2014 7:05:52 PM UTC-5, Richie Khandelwal wrote: >>> >>> Andrew: This is great and could work perfectly for us. Is there a JS >>> fiddle for this, or where can I see the script? Maybe I am missing the link >>> >>> >>> On Wed, Aug 27, 2014 at 6:24 PM, Andrew Gallant <[email protected] >>> <javascript:>> wrote: >>> >>>> It is possible to make a paging system like that which uses a DataView >>>> to restrict the visible rows of data. For a pre-packaged solution, >>>> however, I suggest taking a look at the ChartRangeFilter >>>> <https://google-developers.appspot.com/chart/interactive/docs/gallery/controls#chartrangefilter>. >>>> >>>> If that won't work for you, I can help you set up a paging system. >>>> >>>> On Wednesday, August 27, 2014 12:35:23 AM UTC-4, Richie Khandelwal >>>> wrote: >>>>> >>>>> Hi, >>>>> >>>>> I am fairly new to charting and google visualization API. I get data >>>>> from my application in JSON format with three columns: date, number, and >>>>> text string >>>>> >>>>> I use the following code to chart it: >>>>> >>>>> function drawChart(graph_data) { >>>>> >>>>> var data = new google.visualization.DataTable(); >>>>> data.addColumn('date', 'Days'); >>>>> data.addColumn('number', 'pressure'); >>>>> data.addColumn({type: 'string', role: 'tooltip'}); >>>>> >>>>> data.addRows(graph_data.length); >>>>> >>>>> $.each(graph_data, function (i, points) { >>>>> var date = points[0].split("-"); >>>>> data.setCell(i, 0, new Date(parseInt(date[0]), >>>>> parseInt(date[1]), parseInt(date[2]))); >>>>> data.setCell(i, 1, points[1]); >>>>> data.setCell(i, 2, 'pressure = '+points[1]+' '+points[2]); >>>>> }); >>>>> >>>>> var first_column = data.getDistinctValues(0); >>>>> var graph_width = (data.getNumberOfRows() * 70); >>>>> var options = { >>>>> title: 'Daily price', >>>>> width: graph_width, >>>>> height:$("#chart_div").height(), >>>>> backgroundColor: 'white', >>>>> lineWidth: 5, >>>>> legend: 'none', >>>>> pointSize: 10, >>>>> pointShape: 'circle', >>>>> chartArea: {left: 75, width: '97%'}, >>>>> hAxis: { ticks: first_column, format: 'MM/dd' } >>>>> }; >>>>> >>>>> var chart = new google.visualization.LineChart(document. >>>>> getElementById('chart_div')); >>>>> chart.draw(data, options); >>>>> } >>>>> >>>>> This works great as you see in the attached photo. >>>>> However, now I want to add two more things that I am struggling with. >>>>> >>>>> 1. Instead of the scroll bar at the bottom, I want to restrict view >>>>> window to 15 days and add buttons to dynamically move chart to next 15 >>>>> days >>>>> 2. More importantly - The x axis right now has data as MM/dd as you >>>>> see - I am wondering if it is possible to create 2 x-axis one that has >>>>> dates and the other that has month - some what like how momondo has it. >>>>> See >>>>> attached photo. (note - don't want bars just the way x-axis is handled >>>>> >>>>> Can someone help? >>>>> >>>> -- >>>> You received this message because you are subscribed to a topic in the >>>> Google Groups "Google Visualization API" group. >>>> To unsubscribe from this topic, visit https://groups.google.com/d/ >>>> topic/google-visualization-api/-SUI1W8VuMM/unsubscribe. >>>> To unsubscribe from this group and all its topics, send an email to >>>> [email protected] <javascript:>. >>>> To post to this group, send email to [email protected] >>>> <javascript:>. >>>> Visit this group at http://groups.google.com/ >>>> group/google-visualization-api. >>>> For more options, visit https://groups.google.com/d/optout. >>>> >>> >>> >>> >>> -- >>> Best, >>> Richie Khandelwal >>> linkedin <http://no.linkedin.com/pub/richie-khandelwal/b/a29/222> >>> >> -- >> You received this message because you are subscribed to a topic in the >> Google Groups "Google Visualization API" group. >> To unsubscribe from this topic, visit >> https://groups.google.com/d/topic/google-visualization-api/-SUI1W8VuMM/unsubscribe >> . >> To unsubscribe from this group and all its topics, send an email to >> [email protected] <javascript:>. >> To post to this group, send email to [email protected] >> <javascript:>. >> Visit this group at >> http://groups.google.com/group/google-visualization-api. >> For more options, visit https://groups.google.com/d/optout. >> > > > > -- > Best, > Richie Khandelwal > linkedin <http://no.linkedin.com/pub/richie-khandelwal/b/a29/222> > -- 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 http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
