Charting Components Don't Work

[deonsmt]

I would like to chart data I receive back from an RFDuino. I found a great library called CanvasJS to do this. The problem is that the graphs don't render in the the EvoThings client on Apple iOS 9. I switched to my Android 4.4.2 tablet and the same thing problem occurs. The graph background is drawn, but no titles or graph information is rendered. If I touch the canvas in the vicinity of a point, the point value is displayed.
After some googling, I found a reference in the Evothings Canvas example to another library at http://www.humblesoftware.com/flotr2
That also does not work with the EvoThings client on either Apple or Android products.

Has anyone found a JS charting component that works with the EvoThings client?

[img]

Evothings.png

[/img]

[Fredrik]

Curious.

As you may know, we use use vanilla JS and the Canvas element to draw our own graphs, as seen in the TI SensorTag examples. I have a faint memory of trying and failing to get flotr to work.

If you use a static data set and drop the rfduino connection, can you make your app work in a regular web browser? Will it then also work on the phone's web browser?

If no, then you've most likely found a bug in the chart library. If yes, you'll have found a bug in our webview.

[deonsmt]

The basic charting code works in a regular browser. What I found is that the problem is caused by the css file. If I remove the EvoThings css import shown below, then the charting components (both Flotr2 and CanvasJS) work

Code: Select all

<style>
      @import 'ui/css/evothings-app.css';
   </style>


Not sure what that means!

[deonsmt]

I removed the style applied to the <canvas> from the css file and that fixes the problem

Removed this:

Code: Select all

canvas {
   padding: 7px;

   border-radius: 4px;
   border: none;

   background-color: #f3f3f3; /* Default color: "Arctic" */
}


[Fredrik]

The file 'evothings-app.css' is a hodgepodge of many different stylesheets. It has not been tested with anything but our unmodified example apps. It is entirely possible that our css file caused your graphs to become invisible. I suggest that you keep it removed.

If you still need the styles from it, you could copy/paste parts of it, one at a time, so you can find which part breaks the charts.

... <reads the previous post>

You're fast.

[deonsmt]

Thanks Fredrik - things are looking good now!