Re: [visualization-api] Line Chart --returning json data only...no chart...

101 views
Skip to first unread message
Message has been deleted

Sergey Grabkovsky

unread,
Nov 18, 2014, 4:28:48 PM11/18/14
to google-visua...@googlegroups.com
Hi, it appears that your problem is actually very simple. For dates, we expect the string format to look like the JavaScript Date constructor, so for example, instead of "2014-10-20", you would have "Date(2014, 10, 20)". Here's a jsfiddle that uses the correct date format: http://jsfiddle.net/gfnwy3f1/

On Tue Nov 18 2014 at 4:21:51 PM Dom Laviola <domla...@gmail.com> wrote:
I've been up so long on this I cant read the text anymore. Please help:

Here's the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  
    <title>RealShortData.Com</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   
   <!--Load the Ajax API-->

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

    <script type="text/javascript">
    
    google.load('visualization', '1', {'packages':['corechart','geochart','table']});

    // Set a callback to run when the Google Visualization library is loaded.
 
    google.setOnLoadCallback(drawChart);
                                        function drawChart() {
                                        var jsonData = $.ajax({
                                        url: "functions/json30.php",
                                        dataType: "json",
                                        async: false
                                        }).responseText;

        
        var data = new google.visualization.DataTable(JSON.parse(jsonData);
     
        var options = {
                       title: 'Short Volume Percentage Breakdown'
                       };
           
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }

</script>

<style type="text/css">

    body {
    background-color: #f0f0f2;
    margin: 0;
    padding: 0;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans- serif;
      }
      
  
    a:link, a:visited {
    color: #38488f;
text-decoration: none;
}    
  
</style>
</head>
<header>

<divid="headerdiv">

    <h1>RealShortData.com</h1>
    <p>Coming Soon!</p>
<img src="includes/bar1.png" style="float:center"> 

</div>
<br>
 </br>
 <divid="searchdiv">
<h3>Short Volume &amp; Dark Pool Volume Search</h3>
    <form method="GET"  action="<?php echo $_SERVER['PHP_SELF']; ?>" >
Enter Ticker Symbol: <input type="text" name="query" />
<input type="submit" value="Search" /></form>
<img src="includes/bar1.png" style="float:center"> 
</div>
</header>
<?php
include("functions/json30.php");
?>          
<body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>


And the php

<?php

include("includes/connect.php");
//include("linechart30.php"); 
$query = $_GET['query'];
$query = strtoupper($query);
$query = htmlspecialchars($query);
$query = mysql_real_escape_string($query);

$chrt30dtsp= "SELECT  `date`,  `open_short_percent` ,  `total_short_percent` 
FROM  `tsp30d` 
WHERE  `symbol` =  '$query'  ORDER BY  `date` ASC";    
$result = mysql_query($chrt30dtsp);
$table = array();
$table['cols'] = array(
                 array('label' => 'date', 'type' => 'date'), 
                        array('label' => 'Open Short Pct', 'type' => 'number'), 
                        array('label' => 'Total Short Pct', 'type' => 'number')
           );
$rows = array();
while($r = mysql_fetch_assoc($result)) {
              $temp = array();
              $temp[] = array('v' => $r['date']);  
              $temp[] = array('v' => (float) $r['open_short_percent']);
              $temp[] = array('v' => (float) $r['total_short_percent']); 
        $rows[] = array('c' => $temp);
        }
$table['rows'] = $rows;

$jsonData = json_encode($table);

echo $jsonData;
?>


and the result set:

RealShortData.com

Coming Soon!



Short Volume & Dark Pool Volume Search

Enter Ticker Symbol:  
{"cols":[{"label":"date","type":"date"},{"label":"Open Short Pct","type":"number"},{"label":"Total Short Pct","type":"number"}],"rows":[{"c":[{"v":"2014-10-20"},{"v":50.28},{"v":43.92}]},{"c":[{"v":"2014-10-21"},{"v":48.84},{"v":52.51}]},{"c":[{"v":"2014-10-22"},{"v":62.18},{"v":52.88}]},{"c":[{"v":"2014-10-23"},{"v":74.94},{"v":138.07}]},{"c":[{"v":"2014-10-27"},{"v":78.98},{"v":16.18}]},{"c":[{"v":"2014-10-28"},{"v":54.11},{"v":39.22}]},{"c":[{"v":"2014-10-29"},{"v":58.77},{"v":57.33}]},{"c":[{"v":"2014-10-30"},{"v":43.02},{"v":41.5}]},{"c":[{"v":"2014-10-31"},{"v":61.03},{"v":54.9}]},{"c":[{"v":"2014-11-03"},{"v":52.6},{"v":69.08}]},{"c":[{"v":"2014-11-05"},{"v":66.67},{"v":58.63}]},{"c":[{"v":"2014-11-06"},{"v":48.44},{"v":47.81}]},{"c":[{"v":"2014-11-07"},{"v":48.57},{"v":43.04}]},{"c":[{"v":"2014-11-10"},{"v":53.45},{"v":42.73}]},{"c":[{"v":"2014-11-11"},{"v":62.89},{"v":64.35}]},{"c":[{"v":"2014-11-12"},{"v":67.48},{"v":69.58}]},{"c":[{"v":"2014-11-13"},{"v":58.34},{"v":62.46}]},{"c":[{"v":"2014-11-14"},{"v":54.91},{"v":54.93}]},{"c":[{"v":"2014-11-17"},{"v":48.75},{"v":36.2}]}]}

I'm stuck and exhausted///please help//

Thank you in advance.....


--
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.
For more options, visit https://groups.google.com/d/optout.
Message has been deleted

Sergey Grabkovsky

unread,
Nov 19, 2014, 9:40:16 AM11/19/14
to google-visua...@googlegroups.com
Don't worry about it. I work on the chart library, so I know it inside and out. Now, I don't really know PHP, but it seems like you should just be able to do something like:
while($r = mysql_fetch_assoc($result)) {
              $temp = array();
              $temp[] = array('v' => "Date(" . str_replace("-", ",", $r['date']) . ")");  
              $temp[] = array('v' => (float) $r['open_short_percent']);
              $temp[] = array('v' => (float) $r['total_short_percent']); 
        $rows[] = array('c' => $temp);
        }

On Wed Nov 19 2014 at 12:48:01 AM Dom Laviola <domla...@gmail.com> wrote:
Now I feel worse.. Definitely sick. That's the story I'm sticking to anyway....I see the fiddle...it's lovely....especially seeing my data there...I am still stuck on the original problem of how to convert what I have to what you acheived..in what I gather took all of 60 seconds to accomplish....I have found a host of  posts of similar people having the same problem yet have not found a single solution to it.   That said, the database that I'm pulling the data from, allows me to change the query from `date` (which I can extract() from.... to `year`, `month`,` day` as 3 new (INT) columns from `date` . Near as I can tell thus far my only option is to toss everything I have and create a .csv file, that I can then apply   $row = str_replace("-", "",  $row); to...and then convert that to json....I cant see that taking 60 seconds so what am I missing here?
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-visualization-api@googlegroups.com.
Message has been deleted
Message has been deleted

Daniel LaLiberte

unread,
Nov 20, 2014, 8:19:46 AM11/20/14
to google-visua...@googlegroups.com
The Date constructor month argument is 0-based, so 0 is January.  This is not true not just for Google Charts, or even JavaScript, but most programming languages.

On Thu, Nov 20, 2014 at 3:18 AM, Dom Laviola <domla...@gmail.com> wrote:
well I got them to show up....the dates however after all that are showing up ahead one month....10/23 for instance appears on the chart for 11/23....I even have data in december already! any ideas where to start on that? the json data clearly has the right dates...

On Wed, Nov 19, 2014 at 5:48 PM, Dom Laviola <domla...@gmail.com> wrote:
okay...it took me all day, but I got it formatted with this:

<?php

include("includes/connect.php");
//include("linechart30.php");
$query = $_GET['query'];
$query = strtoupper($query);
$query = htmlspecialchars($query);
$query = mysql_real_escape_string($query);
$chrt30dtsp= $chrt30dtsp= "SELECT  `year`,`month`,`day`,  `open_short_percent` ,  `total_short_percent` 
FROM  `tsp30d` 
WHERE  `symbol` =  '$query'  ORDER BY  `date` ASC";    
$result = mysql_query($chrt30dtsp);
$table = array();
$table['cols'] = array(
                         array('label' => 'date', 'type' => 'date'), 
                        array('label' => 'Open Short Pct', 'type' => 'number'), 
                        array('label' => 'Total Short Pct', 'type' => 'number')
           );

$rows = array();
while($r = mysql_fetch_assoc($result)) {
              $temp = array();
              $r['date']= array($r['year'], $r['month'], $r['day']);
              $r['date'] = implode(",", $r[('date')]);
              $temp[] = array('v' =>"Date(".$r['date'].")");  
              $temp[] = array('v' => (float) $r['open_short_percent']);
              $temp[] = array('v' => (float) $r['total_short_percent']); 
        $rows[] = array('c' => $temp);
        }
$table['rows'] = $rows;

$jsonData = json_encode($table);

echo $jsonData;
?>

Output now is:

{"cols":[{"label":"date","type":"date"},{"label":"Open Short Pct","type":"number"},{"label":"Total Short Pct","type":"number"}],"rows":[{"c":[{"v":"Date(2014,10,20)"},{"v":50.28},{"v":43.92}]},{"c":[{"v":"Date(2014,10,21)"},{"v":48.84},{"v":52.51}]},{"c":[{"v":"Date(2014,10,22)"},{"v":62.18},{"v":52.88}]},{"c":[{"v":"Date(2014,10,23)"},{"v":74.94},{"v":138.07}]},{"c":[{"v":"Date(2014,10,27)"},{"v":78.98},{"v":16.18}]},{"c":[{"v":"Date(2014,10,28)"},{"v":54.11},{"v":39.22}]},{"c":[{"v":"Date(2014,10,29)"},{"v":58.77},{"v":57.33}]},{"c":[{"v":"Date(2014,10,30)"},{"v":43.02},{"v":41.5}]},{"c":[{"v":"Date(2014,10,31)"},{"v":61.03},{"v":54.9}]},{"c":[{"v":"Date(2014,11,3)"},{"v":52.6},{"v":69.08}]},{"c":[{"v":"Date(2014,11,5)"},{"v":66.67},{"v":58.63}]},{"c":[{"v":"Date(2014,11,6)"},{"v":48.44},{"v":47.81}]},{"c":[{"v":"Date(2014,11,7)"},{"v":48.57},{"v":43.04}]},{"c":[{"v":"Date(2014,11,10)"},{"v":53.45},{"v":42.73}]},{"c":[{"v":"Date(2014,11,11)"},{"v":62.89},{"v":64.35}]},{"c":[{"v":"Date(2014,11,12)"},{"v":67.48},{"v":69.58}]},{"c":[{"v":"Date(2014,11,13)"},{"v":58.34},{"v":62.46}]},{"c":[{"v":"Date(2014,11,14)"},{"v":54.91},{"v":54.93}]},{"c":[{"v":"Date(2014,11,17)"},{"v":48.75},{"v":36.2}]}]}


So now with the above html code unchanged, where to I go from here to get the chart to render??

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

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



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA
Message has been deleted
Message has been deleted
Message has been deleted

Daniel LaLiberte

unread,
Nov 21, 2014, 8:26:29 AM11/21/14
to google-visua...@googlegroups.com
Since the PieChart only accepts 2 columns, you probably want to use a DataView to specify just the 2 columns you want to see in the PieChart.  So if you want columns 0 and 1 to be used, replace your chart.draw() call with this:

  var view = google.visualization.DataView(data);
  view.setColumns([0, 1]);
  chart.draw(view, options);

  

On Fri, Nov 21, 2014 at 2:10 AM, Dom Laviola <domla...@gmail.com> wrote:
Well hello again! I got line charts....woohoo! ...but I have been fiddling with pie charts all day since about 11 am here and its almost 2 am again...I keep getting the same error...and believe me I've tried 1000 different ways...followed several different examples, including the preceding of course, and it just will not render a pie chart...most examples I see use 2 columns of data...I have the distinction of having 5 columns, and only one row per request out of 10,000 ticker symbols ..so the mysql data is returned as this: (adjusted to accommodate the first column string requirement )

symboltotal_volumeshort_exempt_volumeopen_short_volumeopen_trade_volumedark_pool_volumedate
GOOG        ##########                  ##########              #########                   ##########             ####        Not req'd


I want the breakdown to show the breakdown of volume for the prior session, per stock symbol.

See? I'm not  a total idiot. I did all the back-end grunt-work myself..The data updates every day automatically for every listed US stock...Guess where else you get this information...Answer: No where on earth. .ten years of my life and everyone and everything is gone now because of it....and just my luck...I pet a dog 15 years ago that's going to kill me now...Echinococcosis.....no surgeon general warnings on dogs...

So if anyone can point me to a solution that will work, I'd appreciate it. This is my gift to the world...my legacy...my penance if you will....I'd like to get it done before I stop breathing. I have a site to launch and I cant do it without pictures because data is too complex for most people..I've been putting it out for years...I could really use a break and forgive me if I seem ungrateful...I am grateful for all the help I can get...but my time is short. If its not done I will have lived for nothing.

Here's the last code attempt: I had much better earlier, but you know how it goes when you've been at this too long and cant stop...eyes blur, mind fades...we end up with this:

<?php
include("includes/connect.php");
include("functions/piecharttable.php");
$query = $_GET['query'];
$query = strtoupper($query);
$query = htmlspecialchars($query);
$query = mysql_real_escape_string($query);
$chartpies= "SELECT `symbol` AS '$query_Volume_Source', `short_exempt_volume`, `open_short_volume`, `open_trade_volume`, `dark_pool_volume` FROM `piechart`WHERE `symbol`= '$query'";    
$result = mysql_query($chartpies);
$rows = array();
$table = array();
$table['cols'] = array(array('label' => '$query Volume Source',  'type' => 'string'), array('label' => 'Short Exempt Volume', 'type' => 'number'), array('label' => 'Open Short Volume', 'type' => 'number'), array('label' => 'Open Trade Volume', 'type' => 'number'), array('label' => 'Dark Pool Volume', 'type' => 'number') );
foreach($result as $r) {
                        $temp = array();
                        $temp[] = array('v' => (string) $r['$query_Volume_Source']);
                        $temp[] = array('v' => (int) $r['short_exempt_volume']);
                        $temp[] = array('v' => (int) $r['open_short_volume']);
                        $temp[] = array('v' =>  (int) $r['open_trade_volume']);
                        $temp[] = array('v' =>  (int) $r['dark_pool_volume']); 
                        $rows = array('c' => $temp); 
    }
$table['rows'] = $rows;    
                       
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
    <html>
      <head>
       <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the chart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {

          // Create our data table out of JSON data loaded from server.
          var data = new google.visualization.DataTable(<?=$jsonTable?>);
          var options = {
              title: 'Volume Analysis',
              is3D: 'false',
              width: 800,
              height: 600
            };
          // Instantiate and draw our chart, passing in some options.
          // Do not forget to check your div ID
          var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
          chart.draw(data, options);
        }
        </script>
      </head>

      <body>
        <!--this is the div that will hold the pie chart-->
        <div id="chart_div"></div>
      </body>
    </html>






On Thu, Nov 20, 2014 at 9:32 AM, Dom Laviola <domla...@gmail.com> wrote:
 for the person that googles the problem next...here's the solution:

$r['date']= array($r['year'], $r['month']=1, $r['day']);

On Thu, Nov 20, 2014 at 9:23 AM, Dom Laviola <domla...@gmail.com> wrote:
that explains yahoos use of the prior month...php we would write a variable like $mon=date('m')-1 to get yahoo data because mysql isnt a team player either, 10 is october there also......to me ...most are not written that way...seeing as im self taught,....and not very good yet....that said...thank you...i'll spend another day looking for a solution to the problem....knowing the cause is nice ...but as usual...the problem is a date formatting issue due to the need for 9 languages to be used to perform a task... I cannot begin to express my joy that the years i have put into this are no where near ending....sorry...no coffee yet... and still sick...fwiw...i'm dying...so this is like a race to see if i can get it done before i dont wake up one morning...so thanks for the condescending effort .to start my day...i'll figure it out...like i did everything else 
Reply all
Reply to author
Forward
Message has been deleted
Message has been deleted
0 new messages