Link to home
Start Free TrialLog in
Avatar of QuinnDex
QuinnDex

asked on

Json in asp classic

I am trying to add bar charts and pie charts to my application, D3 graphs fit the bill well however, i need the data pulled from the database and D3 requires it in a Json format

I have absolutely no experience with Json and dont know where to begin can anybody help me with this please
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

This is what I use  https://code.google.com/p/aspjson/

very easy
Avatar of QuinnDex
QuinnDex

ASKER

thanks i have that, how do i use that to call the db and pass the result to my script


this is the part in my script that picks up the json result

  d3.json = function(url, callback) {
    return d3_xhr(url, "application/json", d3_json, callback);
  };

Open in new window


and this is the javaScript code in the page that calls the d3 script

 d3.json("../json.asp", function(error, json) {
   color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

Open in new window


what i am not understanding is where i insert the DB query
Are you talking about creating the json?

<!--#include file="JSON_latest.asp"-->
<!--#include file="JSON_UTIL_latest.asp"-->
<%
QueryToJSON(dbconn, "SELECT name, surname FROM members WHERE age < 30").Flush
%>

Open in new window

Out put
[
    {
        "name":"ali",
        "surname":"osman"
    },
    {
        "name":"mahmut",
        "surname":"\u00E7\u0131nar"
    }
]

Open in new window

From there you will use your javascript or jquery to access the json.  Once the page runs, all the json is on the page unless you are doing this remotely.
do i need to create a new asp page, that includes the json.asp and does the database query and put that page as the path to the json?
That is up to you.   These are probably better samples.  https://code.google.com/p/aspjson/wiki/Samples2

I would suggest before using this, get your page running with some fake static json data.  Get all the bugs out that way first.    Then replace the static json with your asp json.    If it breaks, you already know the base code is fine and it must me in the asp to json, viewing source will help show what the possible error may be.  

Also with javascript it is good to start using the chrome or firebug console if you have not already to view js errors.
do you have an example of a db call passing the rsult to json?
There are great examples already.  I have posted one above. If you look on on the wiki three are more then you need https://code.google.com/p/aspjson/w/list

Keep in mind there are 2 parts.

1) Getting the data from your db to json format. This is what asptojson does.

2) Reading json data.  This is what your javascript or jquery will do.  

Like I said, before you get mixed up, start with a static sample not using your database at all.  Get that working then move on.
Static Sample http://jsbin.com/axohid/1/edit
<!DOCTYPE html>
<html>
<head>

<meta charset=utf-8 />
<title>Padas</title>
</head>
<body>
  <div class="results"></div>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
         var myData = [{"first":"bill","color":"red"},{"first":"mike","color":"green"},{"first":"steve","color":"blue"}];

$.each(myData, function(i, item) {
   var firstName=item.first;
  var color=item.color;
 
 $('div.results').append(firstName+' likes the color '+color+'<br>');
 
});
  </script>
</body>
</html>

Open in new window

Thank you for your patience, i understand the code you have shown me, i am not understanding the connections between the asp pages, the json and my d3 script.

i understand you saying hard code it before using database. the problem i am having is grasping how communication between test.asp json.asp and d3.v3.js is initiated, i can hard code directly between asp page and d3 but i dont use json for that, i use flat files like csv or tsv or xml,

i am missing an important piece of the puzzle, and is probably so basic you are assuming i know it :)
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
got it :) so using asp i am actually writing a dynamic csv file in the eyes of d3, so i dont need json at all

i will use that method to incorporate my graphs, i can create a select case so it builds data in the structure i need for each type of chart.

Thank you so much for the effort and time you have put in to this, wish there was a way i could add bonus points here.

i will also persevere with the json, as i need to understand it, if i understand it correctly, its the same as creating the asp CSV file only i would create it using a json file.
>so using asp i am actually writing a dynamic csv file
Yes.  d3 is programmed using javascript.  It is looking for the external (or internal) data. It does not interact with your asp/vb, just the final html/text.

 Keep in mind your asp/vb code is run on the server and of course BEFORE the page loads.  Javascript and  jquery are run on the client(your computer) and meaning the page has to be loaded before it can work.  

If you were to write a lot of data as the same page as the chart, that could delay the page from loading.  The reason to use the external page is page one will load fast and the javascript will call the data in page 2.  With a lot of data, you may see your chart load after the other page content.

When loading a lot of data, try and use the option 2 above that places all of the recordset in an array.  It is significantly faster, especially if you need to call the same data multiple times.

> its the same as creating the asp CSV file only i would create it using a json file
It is similar for basic data.  Although in the more complex example, you can see the hierarchy and groupings required that the chart requires.  That is where you would use the asptojson.  

In either case, you can send a querystring.  Instead of this:
d3.csv("population.asp", function(error, data) {
This:
d3.csv("population.asp?zip=99999&MinAge=25", function(error, data) {
Or:
d3.csv("population.asp?zip=<%=zip%>&MinAge=<%=age%>", function(error, data) {
OR:
d3.csv("population.asp?<%=querystring%>", function(error, data) {

It is ok to place asp code inside of javascript because the asp code runs before the page loads and js loads after.  You just can't load javascript inside of asp unless you are using serverside js (slow) or figured out the space time thing.

For security, the last thing you want is a bot or people simply see the url you are calling and use it for their own.  You can use a one way hash like sha or md5 http://www.freevbcode.com/ShowCode.asp?ID=2565.

You would simple include the sha file in your page.

d3.csv("population.asp?zip=<%=zip%>&MinAge=<%=age%>&key=<%=SHA256(zip&MinAge&date()&"SomePassword")%>", function(error, data) {

On your receiving page you would have
<%
<!--#include virtual="/folder/sha256.asp"-->
zip=request.querystring("zip")
MinAge=request.querystring("MinAge")
key=request.querystring("key")

if key=SHA256(zip&MinAge&date()&"SomePassword") then
   ' run your data

end if

%>

Open in new window

Good luck!