Metronic Theme Charts and Graphs - javascript

I had downloaded the metronic theme from http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469 to use along with the PyroCMS framework but my issue is i can not get charts or graphs to work. The specific plugins used for these are flot and jquery(ex. jquery.sparkline.js)
Steps done in attempt to make this work:
Downloaded theme
Manipulated included base theme(included in PyroCMS) to display default.html
Copied over code from the charts/default page
Created Css.html and js.html and populated them with paths to the correct file location as well as referenced them in the default.html
Copied over css and js files into the correct folders
Installed in www.website.com/admin
double checked paths
tested if code worked inside pyro and if it worked right out of package and it worked directly out of the zip file
so after that i got everything to work correctly except the pie charts, graphs, and calendar(on the default page) and all the graphs/charts on the charts page. Does anyone know what i am doing wrong or have any other suggestions?
Because the default.html and charts.html work right out of the zip file i know everything is compatible(the plugins and css and all that), just not sure what i am missing when i try to integrate it with PyroCMS
P.S.This is my first post ever so please be tolerant and understanding if the question isnt clear or the question is too vague, i will respond as fast as i can to any comments

I have this theme so I will try to help. Can you confirm you have the following scripts included?
<script src="../../assets/global/plugins/flot/jquery.flot.min.js"></script>
<script src="../../assets/global/plugins/flot/jquery.flot.resize.min.js"></script>
<script src="../../assets/global/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="../../assets/global/plugins/flot/jquery.flot.stack.min.js"></script>
<script src="../../assets/global/plugins/flot/jquery.flot.crosshair.min.js"></script>
<script src="../../assets/global/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
<script src="../../assets/admin/pages/scripts/charts-flotcharts.js"></script>
AND most importantly, the initializers:
<script>
jQuery(document).ready(function() {
// initiate layout and plugins
Metronic.init(); // init metronic core components
Layout.init(); // init current layout
QuickSidebar.init(); // init quick sidebar
Demo.init(); // init demo features
ChartsFlotcharts.init();
ChartsFlotcharts.initCharts();
ChartsFlotcharts.initPieCharts();
ChartsFlotcharts.initBarCharts();
});
</script>

Related

Scripts not rendering properly after bundling in asp.net

So I had some external scripts being called on one of my views. I searched the URL, copied and pasted each function into a new js script locally. Then I bundled my script files in bundle config. The functions were rendering find and displaying correctly.But now after bundling and then trying to use #Script.Render. The display is slightly messed up.
Before
After
I've checked spelling and the paths were correct, so why is #Script.render not working, when essentially the same scripts worked before. Does jQuery have a tendency to not work when bundled or something?
Let me know if you have additional questions or need to see code..
Scripts:
<script src="~/Scripts/tools/jquerydatatables.js"> </script>
<script src="~/Scripts/tools/responsivebootstrap.js"></script>
<script src="~/Scripts/tools/bootstrapdatatable.js"></script>
<script src="~/Scripts/tools/responsivedatatable.js"></script>
<script src="~/Scripts/tools/cloudpopper.js"></script>
<script src="~/Scripts/tools/twitter.js"></script>
Bundle:
bundles.Add(new ScriptBundle("~/bundles/scripts/desktop")
.Include(
"~/Scripts/tools/bootstrapdatatable.js",
"~/Scripts/tools/cloudpopper.js",
"~/Scripts/tools/jquerydatatables.js",
"~/Scripts/tools/responsivebootstrap.js",
"~/Scripts/tools/responsivedatatable.js",
"~/Scripts/tools/twitter.js"
));
css sheet is linked with:<link href="//cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
but my css sheet is not bundled with the java script, but that shouldn't be a problem right?
This is the code that messes up the display when I use it:#section Scripts{
#Scripts.Render("~/bundles/scripts/desktop")
As far as I can see you have a css issue:
If you want to bundle css you need to use Styles.Render("~/css/myVirtualPath").
In bundle config class then you put something like this:
bundles.Add(new StyleBundle("~/css/myVirtualPath").Include("~/Styles/myStyle.css"))

Bootstrap 4 downloaded files not working. Am I missing something?

I've created a site with Bootstrap 4. I downloaded all the files necessary for Bootstrap to work, and for some strange reason, it's not working. When I use the CDN version of Bootstrap, everything works just fine. Am I missing something? You can view the site here.
This is my file structure for JS
This is my file structure for the CSS files
You seem to be including the Bootstrap CSS correctly using a relative path - css/bootstrap.min.css.
It appears you are using the CDN version of the Bootstrap JS and want to use the copy on your own server. You can include it in a similar way to that of the CSS above.
i.e.
<script src="js/bootstrap.min.js"></script>
If you have any further questions, comment below and I will help further.

gh-pages won't load CSS or JS

Alright, so I have Jekyll running my site locally and it runs perfectly fine. When I pushed everything to Github and made it a gh-page all styling and js functions disappeared. When I go onto the site I see that the css files that it is pointing to are empty, though they clearly have styling in github... So i've tried several of the solutions that I could see on here, but to no avail. This is the gh-page currently: https://jacobprice.github.io/Webpage/
The code is here: https://github.com/JacobPrice/Webpage
I've been changing stuff around based off solutions here, so hopefully I haven't broken something else... Any help is greatly appreciated.
Note** if the site is down it will show an old ruby on rails project with a countdown. That is not the gh-page site.
View page source your website.
I see your url failed
Edit Your Url load css and js file:
<link rel="stylesheet" href="/assets/css/main.css" />
<script src="/assets/js/jquery-2.1.1.min.js"></script>
<script src="/assets/js/functions.js" type="text/javascript"></script>
You should use relative path for url
Okay, so this is kind of a work around... Not sure why it wasn't directing to the proper folder, but the fix for me was to copy my main.css (the full css that sass compiles) and then create another main.css file where it kept pointing too. Kind of a hack and not proper, but it works...
In _config.yml, set baseurl: /Webpage and call your resources like this :
<script src="{{ site.baseurl }}/assets/js/jquery-2.1.1.min.js"></script>
It will now work both locally and on gh pages.

Semantic UI modules correctly styled but not responsive

I am quite new to JS and Jquery and I fear that I must have missed something fundamental to incur this error: none of the semantic modules I tried to include in the html and initiate with JS appears to be responsive, even when I just copy the snippet from semantic ui examples.
I used bower to install Semantic UI and Jquery to a separate bower_component directory which I then added as an additional content root to the project directory in phpstorm. I included semantic files in the html header as such and paths are all recognized:
<link rel="stylesheet" href="semantic/dist/semantic.min.css">
<script src="jquery/dist/jquery.min.js"></script>
<script src="semantic/dist/semantic.min.js"></script>
<script src="js/semantic_test.js"></script>
I copied the html from the first example this link to the html and the js to "js/semantic_test.js". The page is appearing static with all the styling correct but no response, in Chrome or Safari.
I tried some bootstrap components which functioned correctly. I have also tested CDN paths for both Jquery and Semantic UI - not working still. I have spent hours googling and would deeply appreciate some help please!
Did you wrap your jquery code in document.ready
$(document).ready(function() {
// your code here
// ...
});
Sometimes this can happen when the script to initialize your html components with JavaScript runs before the components are loaded into the dom.

Bootstrap starter page JavaScript

At the end of the starter page is this:
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
But I think with version 2, you just include 1 JavaScript file, don't you?
Yes. This actually threw me for a loop the other day.
The bootstrap.js file in the current .zip downloadable from the Bootstrap page has all of the plugins included. You don't need to (and shouldn't) include them separately if you're using the default .js file.
cf_PhillipSenn. The link provided by cetver in the comments is what you are looking for where you can customize what features you will be using, and then download it into a compiled file. If you know plugins you will be using from the beginning, might be the way to go.
The chunk you see on the bottom of the bootstrap page makes it easy to add / remove plugins as you need them.

Categories

Resources