i'm trying to create a chart in my Ionic App using angular-chart.js, when i add the required code to the app and test it in the desktop, the chart apears correctly but when i build the app and test it in the phone the whole page where is supposed to be the chart goes blank and doesn't show anything.
I tried with another angular plugin to create charts but had the same result, both of them uses chart.js
Do you know another angular-chart framework that works with Ionic? or have any idea of what the problem could be?
Thanks a lot for the help
The way you include the style sheet's in Ionic framework will have the drawback to display the charts in simulator or in mobile device. I am uploading a sample project on Charts by using Ionic framework in github.
1.Please follow the steps in readme.md file of github
2.Download the required files to run the project
3.Having any queries please reply
I think the drawback for your project is the way of css file's you include
I followed like this
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" href="lib/angular-chart.js/dist/angular-chart.css">
<link href="css/style.css" rel="stylesheet">
I also had issues on android with Charts.js/angles.js, when testing using another useful set of ionic chart examples on github. Angular-nvD3, Highcharts or Google charts may be better options.
Related
I can't seem to find a way on how to use bootstrap locally in react without npm or yarn bootstrap installation or even without CDN, every tutorial I find on how to use bootstrap they don't explain using bootstrap locally.
Please I need steps on how I can achieve this thanks
So I don't know this for sure, so please correct me if I am wrong. I am just trying to help you to the best of my knowledge.
There are multiple ways.
The first way is to import the CSS in the app.js (or the start of the React app). For the CSS you should have a file called bootstrap.css that contains all the CSS for Bootstrap. import './bootstrap.css'.
The second way is to import it in the html file. If you add the the <link rel="stylesheet" type="text/css" href="bootstrap.css">.
I don't know if this is the way it should be done!
It's my first time to start working on mobile apps using angular and ionic so forgive me if this is just a simple problem. I tried googling about this issue but to no avail. Here's the problem, I tried recreating the sample app created using Ionic in the link below.
link here
I used the IBM MobileFirst environment to run my application. The issue is, if I didn't add a lot of < br > tags before the closing tag of the body, the display would look like the one on the right (see attached image).
Anyone can tell me why this is happening?
Code snippet from image on the left:
....
....
<script src="ionic/js/ionic.bundle.js"></script>
<!-- New lines to load our modules -->
<script src="app/app-main.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Code snippet for the one on the right
....
....
<script src="ionic/js/ionic.bundle.js"></script>
<!-- New lines to load our modules -->
<script src="app/app-main.js"></script>
</body>
</html>
So basically, it only gets fixed if I add lots of < br > tags before the body's closing tag. Isn't Ionic suppose to adjust to the full height? or the natural height of its contents?
Note: let me know if you cant see the image
There is pre-existing CSS in Worklight that may cause this. You can attempt at fixing it by adding:
html, body {
height: 100%;
}
It is suggested that instead of using Hybrid apps, you'll use Cordova apps in MobileFirst 7.1. Integration with Ionic is then much simpler. Read more here: https://www.raymondcamden.com/2015/03/23/working-with-ibm-mobilefirst-and-the-ionic-framework/
I am using angular material design for giving responsive design to my AngularJS app. I am using material design icons which I install using:
bower install material-design-icons
Then I declare the css as CDN link which is:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
I am using the icons by:
<i class="material-icons md-36 md-dark">person</i>
My problem is that there is no way to include css from bower_components. I want to replace CDN source to css with local source from bower_components. But I don't see any css file downloaded in my bower_components.
This is how my bower_components/material-design-icons directory look like:
I followed instructions given in Material icons guide, but couldn't figure out about including CSS from bower_components.
In your materil-design-icons folder you have the iconfont folder, which contains your required CSS files.
There are 2 types of material design icons .... font icons and svg icons
The markup you have shown is for font icons
The bower package for the icon fonts is material-design-iconfont
Try bower install material-design-iconfont ---save
If I understood your question, you're trying to use material design on your web app. the package material-design-icons is just the icons info.
I believe that, to achieve what you're looking for, you should get the bower google package material design lite info, they also provide a set of templates
There's also a bootstrap material design.
I have got extjs 5 which contains many folders (.sencha, build, cmd, examples, licences, overrides, packages, plugins, src, and welcome). I want to use charts in a web application, so what I did is that I copy/paste ext-all-debug.js file that was in the build folder. This gave me the possibility to display a panel, but there was no css. So I copy/paste the css files that I found in \ext-5.1.0\build\packages\ext-theme-neptune\build\resources. So the panel is displaying fine with css.
Then I want to use charts, but, for a reason I don't understand, charts are not included in ext-all-debug.js file. So I copy/paste "ext-charts-debug.js". And now I'm able to display simple cartesian charts (others do not work), but their behaviour is not normal (wrong axis, legend always in bottom when it locked it right or left, etc.). The code I wrote to display the chart has been tested on sencha fiddle and is working perfectly.
So my question is: What should I inlcude in my web application lib folder to let me use EVERY sencha components (with css). Thanks a lot !
PS: Here is my current web application lib folder:
For ExtJS 5 you really should read the documentation on Sencha Command, it's by far the easiest way to get your project running.
If you really want to manually add the files, copy the build folder from the ExtJS Framework to your project's folder and then add this to your index.html:
<link rel="stylesheet" href="build/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" />
<link rel="stylesheet" href="build/packages/sencha-charts/build/crisp/resources/sencha-charts-all.css" />
<script src="build/ext-all-debug.js"></script>
<script src="build/packages/sencha-charts/build/sencha-charts.js"></script>
Your Sencha Charts are not being displayed correctly because you forgot to add the css for your sencha charts theme.
PS: Really, really read the docs on Sencha Command.
I created dynamic web project in eclipse and want to use extjs. I added my extjs folder into the project folder and added
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
into my html file but it can not find it.
Can somebody help me please!
Tnx
This is how I have it set up. I'm using Webstorm (not eclipse), but principle should be the same. I have my extJS in a seperate project. Under my folder webapp\js\lib\ I have the extJS library
Hope this helps.