Chart Support

1

Hi,

I want to display some data in form of charts in my ionic app. There are a lots of javascript chart libraries available. I am wondering which would be the best to use with ionic. Also will there be any issue with the mobile versions. Has anyone tried to use chart with ionic apps.

I experimented with Chart.js (http://www.chartjs.org/) , but this doesn’t seem to work well on mobile.

Can anyone suggest me options for charting which are compatible with ionic and also responsive and supported on mobile devices

Thanks

3 Likes
2

I hate to replay with a “me too” but this is a great question! I think this should go in the official Learn Ionic section of the website when a solution is architected/implemented.

In the mean time, I’ve used jqplot in past non-ionic Cordova projects to some success. I’m not sure how well it will play with Ionic though since it depends on jquery.

3

As far as charts go, you can use chart.js, D3 (which pairs nicely with angular). Take a look at this blog post

http://coenraets.org/blog/2014/02/interactive-mobile-dashboard-d3-charts/

Personal I like D3, and you can have it re-render the svg on page size change.

http://www.ng-newsletter.com/posts/d3-on-angular.html

1 Like
4

You may also want to consider Google Charts. They work pretty well too.

5

@Calendee very nice, are they responsive at all?

6

I am using highcharts.com, work pretty well, responsive supported

7

Yes, they are responsive.

I don’t know if Google Charts is the best option; however, I had prior experience with it so throwing it into this app was quick and easy with this angular module :

1 Like
8

I’m using Flotr2 without any angular module and it works quite well.
I had only some issues putting the chart in a modal: when it showed up, the app closed anomaly. Can’t figure out why. Maybe css animations but I’m not sure.
Anyway, when choosing your library remember that SVG is supported from Android 3.0+ while Canvas from Android 2.1+.

PS: I used Google Charts before, but then switched to a standalone library because you can use google charts only if you have internet connection

1 Like
9

Here is a sample usage of some charting libraries (above mentioned).

Github Repo URL : https://github.com/saurabhgupta050890/ionic-chart-example.git

It includes the basic usage of 3 charting libraries:

  1. Google Charts ( with angular wrapper https://github.com/bouil/angular-google-chart.git )
  2. D3 JS ( used nvd3 with angular wrapper https://github.com/cmaurer/angularjs-nvd3-directives.git)
  3. Highcharts ( www.highcharts.com) (angualr wrapper : https://github.com/pablojim/highcharts-ng.git )

All of them responsive and integarted with ionic very easily.

I didn’t get the chance to test them on various devices especially iOS devices. It would be great to have a report of the tests done on various devices.

Also feel free to fork the repo and add or modify it to include other libraries.

Thanks

6 Likes
10

i tried chart.js on an android build and it failed am going to checkout your D3 implementaion

1 Like
11

I used high chart. It working fine, Just change option chart type for various chart -
options: {
chart: {
type: ‘line’
}
},
I have checked bar and line till now.


Ref Demo - http://codepen.io/anon/pen/VYrvvV

1 Like
12

Do you have some sample code for looking how responsiveness works on Ionic and in the web ? ?

13

Hi you can show a example in ionic try but it just don’t show the chart

14

For those interested in a list of charting libraries, check this out: http://stackoverflow.com/a/34122065/2050333

15

Angular Charts should do the trick. Here is a tutorial:

Best,

16

I am having trouble when trying to run the application. It shows card with title. No Graph is shown. Also Can u please share anguler-chart.css file as I am not able to extract it from zip only js files were present in .zip.