0

We want to use dc.js in our cumulocity web application but we have found a issue trying to do it. The applicaction works fine standalone but when we want to use it in cumulocity, it does not.

Here is our standalone code:

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>

<title>QWHealth Experiment</title>

<style type="text/css"></style>

<style>
h4 span {
  font-size:14px;
  font-weight:normal;
  }

h2 {
  float: right;
}
h2 span {
  font-size:14px;
  font-weight:normal;
  }
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0/dc.min.js' type='text/javascript'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' type='text/javascript'></script>
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js' type='text/javascript'></script>

<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<link href='http://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0/dc.min.css' rel='stylesheet' type='text/css'>

</head>
.....

Here is the standalone result:

enter image description here

Then we try to run it in Cumulocity and as cumulocity has already d3.js, bootstrap, etc.. we just modificate the script load.

<head>
<meta charset='utf-8'>

<title>QWHealth Experiment</title>

<style type="text/css"></style>

<style>
h4 span {
  font-size:14px;
  font-weight:normal;
  }

h2 {
  float: right;
}
h2 span {
  font-size:14px;
  font-weight:normal;
  }
</style>

<script src='https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0/dc.min.js' type='text/javascript'></script>
<link href='http://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0/dc.min.css' rel='stylesheet' type='text/css'>

</head>

and this is the result using the cli command : c8y server enter image description here

However , we see that dc.js is loaded successful, so, What I am missing?

Thanks in advance!

edit:

link to the index-cumulocity.html

link to the index.html which is the standalone app

Jorge
  • 238
  • 1
  • 10

1 Answers1

0

It looks like the first access to dc variable is made before it's fully loaded. Maybe you need to check the order of loaded files (in your screenshot I cannot see how you load your own code).

Paweł Rynarzewski
  • 38
  • 4
  • Pawel, please see my edit! I added the code so you can see how and where I use the dc call. – Jorge Mar 07 '17 at 16:30
  • How do you include index-cumulocity.html inside Cumulocity application? Are you aware that you can just upload your standalone application as *.zip file (http://cumulocity.com/guides/users-guide/administration/#creating-an-application). Then it will be served from Cumulocity platform but with all your own files. If you want to make your app a part of your custom Cumulocity application you would need to develop a plugin (http://cumulocity.com/guides/web/introduction/). – Paweł Rynarzewski Mar 08 '17 at 17:10
  • Pawel, it is a plugin based app. Could you give your mail? I could send you the folder with all files . – Jorge Mar 09 '17 at 16:28
  • Sure, you can send it to pawel.rynarzewski@cumulocity.com. – Paweł Rynarzewski Mar 10 '17 at 21:02