Charting Components Don't Work

Ask, and ye shall receive.
deonsmt
Posts: 4
Joined: 16:14, 03 Nov 2015

Charting Components Don't Work

Postby deonsmt » 16:33, 03 Nov 2015

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]
Attachments
Evothings.png
Evothings.png (49.65 KiB) Viewed 13266 times

Fredrik
Site Admin
Posts: 196
Joined: 15:00, 18 Nov 2013

Re: Charting Components Don't Work

Postby Fredrik » 16:46, 03 Nov 2015

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
Posts: 4
Joined: 16:14, 03 Nov 2015

Re: Charting Components Don't Work

Postby deonsmt » 16:55, 03 Nov 2015

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!
Last edited by deonsmt on 18:32, 03 Nov 2015, edited 1 time in total.

deonsmt
Posts: 4
Joined: 16:14, 03 Nov 2015

Re: Charting Components Don't Work

Postby deonsmt » 17:01, 03 Nov 2015

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
Site Admin
Posts: 196
Joined: 15:00, 18 Nov 2013

Re: Charting Components Don't Work

Postby Fredrik » 17:06, 03 Nov 2015

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
Posts: 4
Joined: 16:14, 03 Nov 2015

Re: Charting Components Don't Work

Postby deonsmt » 17:25, 03 Nov 2015

Thanks Fredrik - things are looking good now!


Return to “Questions and answers”

Who is online

Users browsing this forum: No registered users and 4 guests