There are a number of different ways of populating the data for a chart, most involve something similar to querying a database on your server, building a JSON representation of a DataTable from the query results, and serving that up to your charts. The specifics of how you do this depend largely on the programming environment on your server (PHP, Java, python, ASP.net, etc).
There are also public data sources you can query (Google Docs spreadsheets are a popular one) instead of querying a local database on your server. On Friday, September 12, 2014 5:17:03 PM UTC-4, Cycles Guy wrote: > > Well that looks easy enough if it's static data, but I can't imagine it is > static data that's been manually inputted. The real question I'm asking > would be how did they locate and then auto-populate those "social mention" > metrics into the Annotation Chart? I'm sure they are not manually adding > the mention data for every article they post. Any clue how they might be > finding this data and then automating the charting of it? I can't seem to > find any clues in their page source, unless I'm missing something. > > On Friday, September 12, 2014 5:07:56 PM UTC-4, Daniel LaLiberte wrote: >> >> It looks like this is the code they used: >> >> <script type="text/javascript" src="http://www.google.com/jsapi >> "></script> >> <script type="text/javascript"> >> google.load('visualization', '1.1', >> {'packages':['annotationchart']}); >> google.setOnLoadCallback(drawChart); >> function drawChart() { >> var data = new google.visualization.DataTable(); >> data.addColumn('datetime', 'Date'); >> data.addColumn('number', 'Total Shares'); >> data.addColumn('string', 'Kepler title'); >> data.addColumn('string', 'Kepler text'); >> data.addRows([ >> [new Date(2014, 8, 12, 13, 01), 2834, 'Total Mentions: 2,834', >> '<br/>Facebook Shares: 773<br/>Facebook Likes: 975<br/>Twitter: >> 1,042<br/>Pinterest: 2<br/>Google: 42<br/>'],[new Date(2014, 8, 12, 13, >> 17), 2834, 'Total Mentions: 2,834', '<br/>Facebook Shares: 773<br/>Facebook >> Likes: 975<br/>Twitter: 1,042<br/>Pinterest: 2<br/>Google: 42<br/>'],[new >> Date(2014, 8, 12, 13, 33), 2959, 'Total Mentions: 2,959', '<br/>Facebook >> Shares: 773<br/>Facebook Likes: 1,044<br/>Twitter: 1,091<br/>Pinterest: >> 3<br/>Google: 48<br/>'],[new Date(2014, 8, 12, 14, 04), 2988, 'Total >> Mentions: 2,988', '<br/>Facebook Shares: 773<br/>Facebook Likes: >> 1,059<br/>Twitter: 1,102<br/>Pinterest: 3<br/>Google: 51<br/>'],[new >> Date(2014, 8, 12, 14, 35), 3015, 'Total Mentions: 3,015', '<br/>Facebook >> Shares: 773<br/>Facebook Likes: 1,077<br/>Twitter: 1,111<br/>Pinterest: >> 3<br/>Google: 51<br/>'],[new Date(2014, 8, 12, 15, 35), 3095, 'Total >> Mentions: 3,095', '<br/>Facebook Shares: 773<br/>Facebook Likes: >> 1,135<br/>Twitter: 1,133<br/>Pinterest: 3<br/>Google: 51<br/>'],[new >> Date(2014, 8, 12, 16, 36), 3189, 'Total Mentions: 3,189', '<br/>Facebook >> Shares: 773<br/>Facebook Likes: 1,208<br/>Twitter: 1,154<br/>Pinterest: >> 3<br/>Google: 51<br/>'], >> ]); >> var chart = new >> google.visualization.AnnotationChart(document.getElementById('chart_div')); >> var options = { >> displayAnnotations: true, >> allowHtml: true, >> }; >> chart.draw(data, options); >> } >> </script> >> >> On Fri, Sep 12, 2014 at 4:46 PM, Cycles Guy <[email protected]> wrote: >> >>> Thank you Daniel. >>> >>> Glad to see it's already a template for the most part. Now I just have >>> to figure out how they're formatting the data so I can do something >>> similar. Any suggestions on how to figure out what they're doing? Is it >>> something I can tell by looking at their page code? >>> >>> On Friday, September 12, 2014 3:53:49 PM UTC-4, Daniel LaLiberte wrote: >>>> >>>> That's an AnnotationChart, which is a built-in chart type. The docs >>>> are here: https://developers.google.com/chart/interactive/ >>>> docs/gallery/annotationchart >>>> >>>> >>>> On Fri, Sep 12, 2014 at 3:43 PM, Cycles Guy <[email protected]> wrote: >>>> >>>>> I'd like to add a chart like this social mentions one to my blog: >>>>> http://www.viralnews365.com/article/Scottish-referendum- >>>>> too-close-to-call-says-ICM-poll-1410540303.html >>>>> >>>>> Is there a pre-made widget I can use, or will this require >>>>> custom-coding from scratch? If the latter, where would I start or who >>>>> could >>>>> I hire to create this? >>>>> >>>>> -- >>>>> >>>>> >>>> >>>> >>>> -- >>>> Daniel LaLiberte >>>> <https://plus.google.com/100631381223468223275?prsrc=2> - 978-394-1058 >>>> [email protected] 5CC, Cambridge MA >>>> [email protected] 9 Juniper Ridge Road, Acton MA >>>> >>> -- >>> >>> >> -- 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.
