Reading a CSV File into a Google - Annotated Time Line Chart?

75 views
Skip to first unread message

Lee Deneault

unread,
Mar 19, 2018, 11:46:18 AM3/19/18
to Google Visualization API
Dear Forum!

It appears as though this is a common "issue" with Google Visualization API Users...!

So, after reading the Goggle Developers Website, I was able to construct an exquisitely beautiful "Annotated Time Line Chart" (Annotations temporarily disabled!) but, was UNABLE to get the HTML code to read a CSV file of the original data set. 

I spent considerable time on this and spent an even more considerable time generating a version of the CSV File that the code would draw and pasted it into the HTML Code. 

...UGH!

This working "sample" version of the HTML file but, pasted-in CSV Data is attached to this posting, along with a "logo" that is also displayed by the code and a screen shot of what it should look like when loaded into a browser! As you might imagine, healthcare data can be collected over many days, weeks, months so this process has to be done automatically!

I am in the process of writing some C++ software to generate the HTML code needed and have it automatically read the CSV file and paste it into the HTML code but, this seems to be an absolutely ridiculous thing to have to do! I am certain that someone has successfully read in a CSV file into this type of Google Chart but, it appears that the documentation is not adequate enough to allow many users, like me, to do this easily.

Can anyone please help?

If you are willing to help, please feel free to paste the required code into the attached HTML file and return it to me!

Thanks, in advance, for your time and consideration!

Best Regards,

LEE


HBU-CARDIAC-SAMPLE.html
HBULOGO.png
HBU Screen Shot.png

Scott Riddick

unread,
Apr 18, 2018, 5:07:23 PM4/18/18
to Google Visualization API
Here's the code I use.  Not sure if this is what you're looking for:

<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1.0', {'packages':['corechart']});
  google.setOnLoadCallback(drawChart);
  function drawChart () {
      $.ajax({
          url: 'output.txt',
          type: 'get',
          success: function (txt) {
              var dataArray = [['Date', 'Price']];
              var txtArray = txt.split('\n');
              for (var i = 0; i < txtArray.length; i++) {
                  var tmpData = txtArray[i].split(/,/);
                  dataArray.push([tmpData[0], parseInt(tmpData[1])]);
              }
              var data = google.visualization.arrayToDataTable(dataArray);
              var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
              var options = {
title: 'Value of this Car',
width: 430,
height: 252,
vAxis: { format:'$####'}
};
              chart.draw(data,options);
          }
      });
  }
  google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
</script>

The text file I use (output.txt):

Jan 2016,940
Apr 2016,940
Jul 2016,950
Oct 2016,950
Jan 2017,975 
Apr 2017,977 
Jul 2017,1045 
Oct 2017,1115 
Jan 2018,1115 
Apr 2018,1123

Hope this helps.

Scott

Lee Deneault

unread,
Apr 18, 2018, 5:25:38 PM4/18/18
to google-visua...@googlegroups.com
Oh my GOODNESS, Scott! 

I will review this and give it a try! 

Needless to say, I am so very grateful to you for your time and consideration! 

NEVER hesitate to contact me, should I ever be able to help you in any way...    ...if I cannot thank you, then I promise to pay it forward! 

You made my day! 

Sincerely, 

LEE 


--
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/Q5zuRJbtEJ4/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 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/df2565a6-6fb8-402f-a14f-d17eccfc9eae%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages