Line chart with changing view window and 2 x-axis (how do I do this?)

[Richie Khandelwal]

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?

[Andrew Gallant]

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.  If that won't work for you, I can help you set up a paging system.

[Richie Khandelwal]

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

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
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

[Richie Khandelwal]

Never mind, found it. Will report back after trying it. Much Thanks!

To unsubscribe from this group and all its topics, 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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Richie Khandelwal]

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?

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Andrew Gallant]

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/

To unsubscribe from this group and all its topics, 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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--
Best,

Richie Khandelwal

linkedin

--

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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.