html - Charts.js Pie Chart -


i cannot pie chart (top right) load in bootstrap admin theme.

it load fine until add in information 'panel' or other non charts.js panel, , no longer load.

i uploaded files @ link below, included on page html below.

http://econics.liift.io/admin/charts-chartjs.html

<!-- .page-content -->  <div class="page-content sidebar-page right-sidebar-page clearfix">    <!-- .page-content-wrapper -->    <div class="page-content-wrapper">      <div class="page-content-inner">        <!-- start .page-content-inner -->        <div id="page-header" class="clearfix">          <div class="page-header">            <h2>chartjs</h2>            <span class="txt">nice chart plugin.</span>          </div>          <div class="header-stats">            <div class="spark clearfix">              <div class="spark-info">                <span class="number">2345</span>visitors              </div>              <div id="spark-visitors" class="sparkline"></div>            </div>            <div class="spark clearfix">              <div class="spark-info">                <span class="number">17345</span>views              </div>              <div id="spark-templateviews" class="sparkline"></div>            </div>            <div class="spark clearfix">              <div class="spark-info">                <span class="number">3700$</span>sales              </div>              <div id="spark-sales" class="sparkline"></div>            </div>          </div>        </div>        <!-- start .row -->        <div class="row">          <div class="col-lg-6">            <!-- col-lg-6 start here -->            <div class="panel panel-default toggle panelmove panelclose panelrefresh">              <!-- start .panel -->              <div class="panel-heading">                <h4 class="panel-title">line chart dots</h4>              </div>              <div class="panel-body">                <div class="canvas-holder">                  <canvas id="line-dots-chartjs" height="200"></canvas>                </div>              </div>            </div>            <!-- end .panel -->            <div class="panel panel-default toggle panelmove panelclose panelrefresh">              <!-- start .panel -->              <div class="panel-heading">                <h4 class="panel-title">line chart unfilled<small>and curved</small></h4>              </div>              <div class="panel-body">                <div class="canvas-holder">                  <canvas id="line-unfilled-chartjs" height="100"></canvas>                </div>              </div>            </div>            <!-- end .panel -->            <div class="panel panel-default toggle panelmove panelclose panelrefresh">              <!-- start .panel -->              <div class="panel-heading">                <h4 class="panel-title">line chart</h4>              </div>              <div class="panel-body">                <div class="canvas-holder">                  <canvas id="line-chartjs" height="100"></canvas>                </div>              </div>            </div>            <!-- end .panel -->          </div>          <!-- col-lg-6 end here -->          <div class="col-lg-6">            <!-- col-lg-6 start here -->            <div class="panel panel-default toggle panelmove panelclose panelrefresh">              <!-- start .panel -->              <div class="panel-heading">                <h4 class="panel-title">pie chart</h4>              </div>              <div class="panel-body">                <div class="canvas-holder">                  <canvas id="pie-chartjs" height="100"></canvas>                </div>              </div>            </div>            <!-- end .panel -->            <div class="panel panel-default toggle panelmove panelclose panelrefresh">              <!-- start .panel -->              <div class="panel-heading">                <h4 class="panel-title">information</h4>              </div>              <div class="panel-body">                <div class="canvas-holder">                  <div class="panel-body">                    <h1>this h1 heading</h1>                    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>                    <h2>this h2 heading</h2>                    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>                    <h3>this h3 heading</h3>                    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>                    <h4>this h4 heading</h4>                    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>                    <h5>this h5 heading</h5>                    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>                    <h6>this h6 heading</h6>                    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>                  </div>                </div>              </div>            </div>            <!-- end .panel -->          </div>          <!-- col-lg-6 end here -->        </div>        <!-- end .row -->      </div>      <!-- end .page-content-inner -->    </div>    <!-- / page-content-wrapper -->  </div>  <!-- / page-content -->

check out inspector. you'll see throwing error on line 293 of charts-chartjs.js.

[error] typeerror: null not object (evaluating 'document.getelementbyid("bar-chartjs").getcontext')

the code pie chart comes after this, pie chart code isn't ran.

edit - add code checking if element exists. getelementbyid returns null if element doesn't exist. so, can wrap creation of chart in simple if statement:

var bar = document.getelementbyid("bar-chartjs"); var ctxbar; if (bar) {     ctxbar = bar.getcontext("2d");     mybar = new chart(ctxbar).bar(barchartdata, {         responsive : true,         scaleshowgridlines : true,         scalegridlinecolor : "#bfbfbf",         scalegridlinewidth : 0.2,         //bar options         barshowstroke : true,         barstrokewidth : 2,         barvaluespacing : 5,         bardatasetspacing : 2,         //animations         animation: true,         animationsteps: 60,         animationeasing: "easeoutquart",         //scale         showscale: true,         scalefontfamily: "'roboto'",         scalefontsize: 13,         scalefontstyle: "normal",         scalefontcolor: "#333",         scalebeginatzero : true,         //tooltips         showtooltips: true,         tooltipfillcolor: "#344154",         tooltipfontfamily: "'roboto'",         tooltipfontsize: 13,         tooltipfontcolor: "#fff",         tooltipypadding: 8,         tooltipxpadding: 10,         tooltipcornerradius: 2,         tooltiptitlefontfamily: "'roboto'",     }); }

Comments

Post a Comment

Popular posts from this blog

shopping cart - Page redirect not working PHP -

im trying redirect user when click "empty cart". redirect working "add cart" not "empty cart". ideas great. in main .php file set current url seen $current_url = base64_encode("http://$_server[http_host]$_server[request_uri]"); then below cartaction.php file handles actions such "add cart" , "empty cart" <?php session_start(); include_once 'config.php'; //add item in shopping cart if(isset($_post["add"])) { $product_id = $_post["product_id"]; //product id $return_url = base64_decode($_post["return_url"]); //return url $qty = $_post["qty"]; $product = $mysqli->query("select product_name, unit_price, unit_quantity products product_id = '$product_id'"); $obj = $product->fetch_object(); if(!isset($_session['products'])) { $_session['products'] = array(); } if(array_key_exists($product_id...
Read more

php - How to modify a menu to show sub-menus -

i have custom php menu made person, displays categories menu. however, need display subcategories well. tried adding hierarchical parameter didn't work. hoping assistance! here code: <ul> <?php /* categories wp e-commerce products */ $wpec_product_categories = get_terms( 'wpsc_product_category', 'hide_empty=0&parent=0&exclude=298'); $myarray = array(); foreach($wpec_product_categories $wpec_categories){ $myarray[$wpec_categories->term_id]['name'] = $wpec_categories->name; $myarray[$wpec_categories->term_id]['slug'] = $wpec_categories->slug; $myarray[$wpec_categories->term_id]['term_id'] = $wpec_categories->term_id; } foreach($myarray $wpec_categories1){ $wpec_term_name = $wpec_categories1['name']; $wpec_term_slug = $wpec_categories1['slug']; $wpec_term_id = $wpec_categories1['term_id']; echo '<li> <a href="'.get_page_link(19)....
Read more

python - Installing PyDev in eclipse is failed -

unable read repository @ http://pydev.sf.net/updates/content.xml. sun.security.validator.validatorexception: pkix path building failed: sun.security.provider.certpath.suncertpathbuilderexception: unable find valid certification path requested target i installing pydev in eclipse using python, doesn't install successfully. gives above error. happened? how solve error? i had error when trying install on laptop behind corporate firewall. couldn't tell setup of firewall, not sure of root cause. i got passed error installing pydev eclipse when out behind firewall. another way got around have eclipse on non-firewalled machine, install pydev eclipse, , copy whole eclipse directory non-firewalled machine firewalled machine. there better way, , way fix properly, didn't have time work out firewall doing. this on windows 7 machine (yeah know) not work *nix versions installed through package manager yum or apt.
Read more