Forums

Custom Charts with REST API

Permalink
Hey all!

My name is Seth and I'm a university student practicing some web development (woohoo!). I'm stuck on a particular point and would love some help.

Essentially, I have a custom HTML chart that needs a value from an external secure proxy server. Right now, I am inserting HTML blocks into the relevant areas on the page that include a javascript to get the correct data through an XHTTP GET request.

It works wonderfully until we restrict access to our proxy server to be limited to our SSL from our C5 site (which is also what we want).

This prevents the chart from getting the correct value because the HTML and the javascript get executed on the client side and not through C5.

Essentially, what I need to do (I think) is to move the GET request inside of C5 so that it can pass through with the SSL certificate. I then need to take that value and plug it back into the chart.

I've been stuck on this for a couple of days and though to post for some help.
Below is some pseudo-code based on the HTML code that I'm currently dropping into the page.

I'm very new to C5 and would live your advice on this one! 

<div id="SomeCustomChart328" data-updateto = 0>
<script type="text/javascript>
// Global Var to store updating value 
var amount = 0;
// Open a new HTTP Request)
var xhr = new XMLHttpRequest();
xhr.open("GET", "Some_ElasticSearch Server", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      var person = JSON.parse(xhr.responseText);
      amount = person._source.age; // Grabs the person's age
      $('#chart_328').data('updateto', amount); //updates the above HTML data value
         document.getElementById('chart_328_text').innerHTML = amount + '%';
    } else {
Viewing 15 lines of 27 lines. View entire code block.
sethmartin
 
rge replied on at Permalink Reply
Hello,

You can try to use JSONP if you want to use JavaScript.
http://stackoverflow.com/questions/22780430/javascript-xmlhttpreque...

With PHP you can make use of CURL to retrieve the data. You can place it in a controller and sent the data to the view.
http://php.net/manual/en/curl.examples-basic.php...
sethmartin replied on at Permalink Reply
sethmartin
Hey rge,

Can you elaborate/provide an example on the curl request in the controller file?
If I can use curl, I want to pass in an SSL certificate to trust... any idea how?
rge replied on at Permalink Reply
Well I am not sure... But within the on start function in the controller I would init Curl.

public function on_start()
{
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'https://url.com');
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 1);
    $result = curl_exec($ch);
    $data = json_decode($result);
    curl_close();
}


Some info on the curl and ssl:http://stackoverflow.com/questions/731117/error-using-php-curl-with...

Instead of curl you can also try Guzzle. On this page you can find some info on SSL:
http://guzzle3.readthedocs.org/http-client/client.html...

If you use a package you can autoload Guzzle. You can do this by using Composer.
http://documentation.concrete5.org/developers/packages/advanced-inc...