Metronic Theme Charts and Graphs

user3334987 picture user3334987 · Feb 21, 2014 · Viewed 7k times · Source

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:

  1. Downloaded theme
  2. Manipulated included base theme(included in PyroCMS) to display default.html
  3. Copied over code from the charts/default page
  4. 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
  5. Copied over css and js files into the correct folders
  6. Installed in www.website.com/admin
  7. double checked paths
  8. 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

Answer

Tomanow picture Tomanow · Nov 8, 2014

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>