Home/ Questions/Q 8378047
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T15:49:58+00:00

So I have been trying to scrape a websites data.asp file (which seems to

  • 0

So I have been trying to scrape a websites data.asp file (which seems to be formatted in json) into my website to be displayed as a chart I seem to be able to get the json data but will not display as a chart in either googles chart API or fusioncharts I am not sure what I am doing wrong although in the examples on google and fusioncharts there json data is formatted differently would i have to change mine to meet that? and how would i do this to make sure that as the data.asp file is updated on the external website it is updated on mine also?

EDIT: Is there an easier way to get the data (aswell as on update) into a chart?

        <meta charset="utf-8">
        <title>Olympic Results</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!--styles -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <style type="text/css">
          body {
            padding-top: 60px;
            padding-bottom: 40px;
          }
          .sidebar-nav {
            padding: 9px 0;
          }
        </style>
        <link href="css/bootstrap-responsive.css" rel="stylesheet">

        <!--HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <?php
            if(!function_exists("curl_init")) die("cURL extension is not installed");
            $ch = curl_init("http://hosted.stats.com/olympics/medals_widget/data.asp?country=NZL");
            //Configuring curl options 
            $options=array(CURLOPT_RETURNTRANSFER => true, 
                           CURLOPT_HTTPHEADER => array('Content-type: application/json'));
            //Setting curl options
            curl_setopt_array($ch, $options);
            $pageData = curl_exec($ch);
            curl_close($ch); 
            //Cache the channel file 
            $cache_expire = 60*60*24*365;
            header("Pragma: public");
            header("Cache-Control: max-age=".$cache_expire);
            header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
        ?>
        <script type="text/javascript" src="Charts/FusionCharts.js"></script>

      </head>
      <body>
        <div class="navbar navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container-fluid">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </a>
              <a class="brand" href="#">Olympic Results</a>

              <div class="nav-collapse">
                <ul class="nav">
                  <li class="active"><a href="#">Home</a></li>
                </ul>
              </div><!--/.nav-collapse -->

            </div>
          </div>
        </div>

        <div class="container-fluid">
        <div id="chartContainer">FusionCharts XT will load here!</div>          
        <script type="text/javascript">

        <!--       
          var data = <?php echo $pageData; ?>;
          document.write(data);
          var myChart = new FusionCharts( "Charts/Column3D.swf", "myChartId", "400", "300", "0", "1" );
          myChart.setJSONData(data);
          myChart.render("chartContainer");

        // -->     
        </script> 
        <?php echo("$pageData"); ?>
            <footer style="padding-top:100px;">
            <hr>
            <p>&copy; Olympic Results 2012</p>
            </footer>

        </div><!--/.fluid-container-->

        <!-- javascript -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap-transition.js"></script>
        <script src="js/bootstrap-alert.js"></script>
        <script src="js/bootstrap-modal.js"></script>
        <script src="js/bootstrap-dropdown.js"></script>
        <script src="js/bootstrap-scrollspy.js"></script>
        <script src="js/bootstrap-tab.js"></script>
        <script src="js/bootstrap-tooltip.js"></script>
        <script src="js/bootstrap-popover.js"></script>
        <script src="js/bootstrap-button.js"></script>
        <script src="js/bootstrap-collapse.js"></script>
        <script src="js/bootstrap-carousel.js"></script>
        <script src="js/bootstrap-typeahead.js"></script>
      </body>
    </html>

Forgot to add what the JSON looks like –

{"medals": { 
"Archery":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze":       "0", "total": "0" }], 
"Track & Field":[ { "stats_id": "83", "gold": "0", "silver": "1", "bronze": "0", "total": "1" }], 
"Badminton":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Basketball":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Beach Volleyball":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Boxing":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Diving":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Equestrian":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "1", "total": "1" }], 
"Soccer":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Fencing":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Handball":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Field Hockey":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Judo":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Modern Pentathlon":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }],
"Rowing":[ { "stats_id": "83", "gold": "3", "silver": "0", "bronze": "2", "total": "5" }],  
"Sailing":[ { "stats_id": "83", "gold": "1", "silver": "1", "bronze": "0", "total": "2" }], 
"Shooting":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Swimming":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Synchronized Swimming":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Tennis":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Taekwondo":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Triathlon":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Table Tennis":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Volleyball":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Weightlifting":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Water Polo":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Wrestling":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Cycling":[ { "stats_id": "83", "gold": "0", "silver": "1", "bronze": "2", "total": "3" }], 
"Gymnastics":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Canoe":[ { "stats_id": "83", "gold": "1", "silver": "0", "bronze": "0", "total": "1"     }] 
}}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Yes, you will need to reformat your data. Get the data, convert it to a real javascript object and iterates over it and re-create the structure in the way your APIs understand. To convert JSON to an Object you cand use $.parseJSON method of the jQuery library.

    Another thing. These data are obtained by your server and them redirected to your application?

    Edit: Here is one example:

    // this way, data is already an object
var data = { "medals": {
    "Archery":[{
        "stats_id": "83",
        "gold": "0",
        "silver": "0",
        "bronze":  "0",
        "total": "0"
    }],
    "Track & Field":[{
        "stats_id": "83",
        "gold": "0",
        "silver": "1",
        "bronze": "0",
        "total": "1"
    }] // more data here...
}};

// if data comes this way (a String), it needs to be parsed
var dataStr = "{ \"medals\": {" +
"    \"Archery\":[{" +
"        \"stats_id\": \"83\"," +
"        \"gold\": \"0\"," +
"        \"silver\": \"0\"," +
"        \"bronze\":  \"0\"," +
"        \"total\": \"0\"" +
"    }]," +
"    \"Track & Field\":[{" +
"        \"stats_id\": \"83\"," +
"        \"gold\": \"0\"," +
"        \"silver\": \"1\"," +
"        \"bronze\": \"0\"," +
"        \"total\": \"1\"" +
"    }]" + // more data here...
"}}";

console.log( data );

var obj = $.parseJSON( dataStr );
console.log( obj );

traverseObj(obj);

// traverses the object to see all its properties
function traverseObj( data ) {
    for ( var key in data ) {

        var value = data[key];

        if ( $.isPlainObject( value ) ) {

            console.log( "**key: " + key );
            traverseObj( value );

        } else if ( $.isArray( value ) ) {

            console.log( "key: " + key );
            var values = "";

            for ( var i = 0; i < value.length; i++ ) {
                var currValue = value[i];
                if ( $.isPlainObject( currValue ) ) {
                    traverseObj(currValue);
                } else {
                    values += currValue + ", ";
                }
                if ( values != "" ) {
                    console.log( " - value: " + value );
                }
            }

        } else {
            console.log( "key: " + key + " - value: " + value );
        }
    }
}

    Here is the fiddle: http://jsfiddle.net/davidbuzatto/MysPe/

    • 0