Google Dev: Line Chart (Simple Question)

61 views
Skip to first unread message

Elliot Davis

unread,
Nov 16, 2015, 3:04:25 PM11/16/15
to Google Visualization API
Would someone be able to provide feedback on my script? 

The data appears on this page:

I would like for the years on the x-axis to read 2010-11, 2012-13, 2013-14, 2014-15. I wasn't able to get that to work, so I changed it to 2011, 2012, 2013, 2014. But, they all show as 2K. How can I correct? 

Also, how can I add indicators on each data point on the line? Right now, it's a smooth line. I'd like the knotches to appear bolder. Thank you!

Here is the script:

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1.1', {packages: ['line']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Year');
      data.addColumn('number', 'Asia**');
      data.addColumn('number', 'Europe-Near East');
      data.addColumn('number', 'Latin America & Caribbean');
      data.addColumn('number', 'Middle East');
      data.addColumn('number', 'North America');
      data.addColumn('number', 'Oceania');

      data.addRows([
        [2010,  30492, 98860, 21738, 7505, 741297, 52885],
        [2011,  30687, 101808, 17568, 8627, 752531, 52973],
        [2012,  34078,   103438, 17224, 9304, 764207, 51523],
        [2013,  34708, 104910, 17584, 10008, 784247, 52630],
        [2014,  34678,  92284,  21138, 11247, 818834, 57586]
      ]);

      var options = {
        chart: {
          title: 'Undergraduate Enrollment by Region from 2010-11 through 2014-15',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500
      };

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

      chart.draw(data, options);
    }
  </script>

Elliot Davis

unread,
Nov 17, 2015, 10:33:48 AM11/17/15
to Google Visualization API
Just following up. Anyone have a thought on this? Much appreciated. 


On Monday, November 16, 2015 at 3:04:25 PM UTC-5, Elliot Davis wrote:
Would someone be able to provide feedback on my script? 

I would like for the years on the x-axis to read 2010-11, 2011-12, 2012-13, 2013-14, 2014-15. I wasn't able to get that to work, so I changed it to 2011, 2012, 2013, 2014. But, they all show as 2K. How can I correct? 

Sergey Grabkovsky

unread,
Nov 17, 2015, 10:41:11 AM11/17/15
to Google Visualization API
Hi Elliot,

You can change the formatting of the horizontal axis by changing the hAxis.format option to 'decimal' or '#'. Note that for material charts to accept the 'classic' options (the ones that are documented), you have to call google.charts.Line.convertOptions on your options before passing them to the chart. Here is an example: http://jsfiddle.net/dmvmuxw3/

--
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 http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/a807bae6-c5db-4cd9-a7a8-daca9925a5d2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
--
unnamed.gif 
Sergey Grabkovsky | SWE  | gra...@google.com

Elliot Davis

unread,
Nov 18, 2015, 10:53:03 AM11/18/15
to Google Visualization API
Thank you! This worked. 

Is there a way to show the years as 2011-12, 2012-13? As opposed to 2011, 2012, 2013? 

Also, how might I add knotches to the points on the graphs so that they are more obvious?
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

Sergey Grabkovsky

unread,
Nov 18, 2015, 10:56:48 AM11/18/15
to Google Visualization API
Well if you were using a classic line chart, you could do custom ticks via the hAxis.ticks option, but the Material charts do not support this yet.

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.
--
unnamed.gif 
Sergey Grabkovsky | SWE  | gra...@google.com

--
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 http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/139e1eed-8666-4d94-9376-51e1645a6522%40googlegroups.com.

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

Elliot Davis

unread,
Nov 18, 2015, 11:09:24 AM11/18/15
to Google Visualization API
How would you code that?

I switched over to the classic line chart:

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.
--
unnamed.gif 
Sergey Grabkovsky | SWE  | gra...@google.com

--
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.

Sergey Grabkovsky

unread,
Nov 18, 2015, 11:23:06 AM11/18/15
to Google Visualization API
Here's an example: https://jsfiddle.net/svfg2o64/1/

I did it in a general way that should be applicable to whatever data you have, as long as they're years. It'll have problems with years at the turn of the century, but I imagine if you're worried about it, you can fix it.

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.
--
unnamed.gif 
Sergey Grabkovsky | SWE  | gra...@google.com

--
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 http://groups.google.com/group/google-visualization-api.
--
unnamed.gif 
Sergey Grabkovsky | SWE  | gra...@google.com

--
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 http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/0c2179aa-990f-4564-8541-405a28e8b42a%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages