Open hostcubit opened 5 years ago
rarestoma
commented
5 years ago Hello,
Thank you for the interest in our products. You have to replace the id of the chart with 'CountryChart''s chart id. This is the one that fits the chart you attached in the photo.
Please let me know if i can help you with anything else.
All the best, Rares.
hostcubit
commented
5 years ago Hi
If I have this chart, it is the third in the list, but it does not display and in console it gives me an error
<div class="col-lg-12">
<div class="card card-chart">
<div class="card-header">
<h5 class="card-category">Completed Tasks</h5>
<h3 class="card-title"><i class="tim-icons icon-send text-success"></i> 12,100K
</h3>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="CountryChart"></canvas>
</div>
</div>
</div>
</div>
</div>CONSOLE LOG:####################################
jQuery.Deferred exception: document.getElementById(...) is null initDashboardPageCharts@http://127.0.0.1:5500/assets/js/charts.js:430:15 @http://127.0.0.1:5500/index.html:215:7 j@http://127.0.0.1:5500/assets/js/core/jquery.min.js:2:29997 g/</k<@http://127.0.0.1:5500/assets/js/core/jquery.min.js:2:30313 undefined jquery.min.js:2:31569 TypeError: document.getElementById(...) is null[Saber más]
stevenrugg
commented
3 years ago The blue chart does not have an ID in the HTML. You must add an id="blue-chart" or something similar to the tag. The jQuery is not finding the ID. The jQuery was written using document.getElementById() but the ID of the element its saying is null. Add an ID to the element and update the jQuery with that ID and you should be good to go.
Hi
I try to add the blue chart from ( black-dashboard ) to BLK ( blk-design-system ) theme
All the other charts work but the blue does not work ... everything seems fine I do not know why it returns that error
Can anybody help me ?
CONSOLE LOG:####################################
jQuery.Deferred exception: document.getElementById(...) is null initDashboardPageCharts@http://127.0.0.1:5500/assets/js/charts.js:430:15 @http://127.0.0.1:5500/index.html:215:7 j@http://127.0.0.1:5500/assets/js/core/jquery.min.js:2:29997 g/</k<@http://127.0.0.1:5500/assets/js/core/jquery.min.js:2:30313 undefined jquery.min.js:2:31569 TypeError: document.getElementById(...) is null[Saber más]
################# INDEX.HTML ######################
<!DOCTYPE html>
BLK•
A beautiful Design System for Bootstrap 4. It's Free and Open Source.
Daily Sales
3,500€
Total Shipments
763,215
Completed Tasks
12,100K
################## CARTSJS ###########################
type = ['primary', 'info', 'success', 'warning', 'danger'];
siteCharts = { initPickColor: function() { $('.pick-class-label').click(function() { var new_class = $(this).attr('new-class'); var old_class = $('#display-buttons').attr('data-class'); var display_div = $('#display-buttons'); if (display_div.length) { var display_buttons = display_div.find('.btn'); display_buttons.removeClass(old_class); display_buttons.addClass(new_class); display_div.attr('data-class', new_class); } }); },
initDocChart: function() { chartColor = "#FFFFFF";
},
initDashboardPageCharts: function() {
},
initGoogleMaps: function() { var myLatlng = new google.maps.LatLng(40.748817, -73.985428); var mapOptions = { zoom: 13, center: myLatlng, scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page styles: [{ "elementType": "geometry", "stylers": [{ "color": "#1d2c4d" }] }, { "elementType": "labels.text.fill", "stylers": [{ "color": "#8ec3b9" }] }, { "elementType": "labels.text.stroke", "stylers": [{ "color": "#1a3646" }] }, { "featureType": "administrative.country", "elementType": "geometry.stroke", "stylers": [{ "color": "#4b6878" }] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [{ "color": "#64779e" }] }, { "featureType": "administrative.province", "elementType": "geometry.stroke", "stylers": [{ "color": "#4b6878" }] }, { "featureType": "landscape.man_made", "elementType": "geometry.stroke", "stylers": [{ "color": "#334e87" }] }, { "featureType": "landscape.natural", "elementType": "geometry", "stylers": [{ "color": "#023e58" }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#283d6a" }] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [{ "color": "#6f9ba5" }] }, { "featureType": "poi", "elementType": "labels.text.stroke", "stylers": [{ "color": "#1d2c4d" }] }, { "featureType": "poi.park", "elementType": "geometry.fill", "stylers": [{ "color": "#023e58" }] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [{ "color": "#3C7680" }] }, { "featureType": "road", "elementType": "geometry", "stylers": [{ "color": "#304a7d" }] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [{ "color": "#98a5be" }] }, { "featureType": "road", "elementType": "labels.text.stroke", "stylers": [{ "color": "#1d2c4d" }] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [{ "color": "#2c6675" }] }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{ "color": "#9d2a80" }] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "color": "#9d2a80" }] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [{ "color": "#b0d5ce" }] }, { "featureType": "road.highway", "elementType": "labels.text.stroke", "stylers": [{ "color": "#023e58" }] }, { "featureType": "transit", "elementType": "labels.text.fill", "stylers": [{ "color": "#98a5be" }] }, { "featureType": "transit", "elementType": "labels.text.stroke", "stylers": [{ "color": "#1d2c4d" }] }, { "featureType": "transit.line", "elementType": "geometry.fill", "stylers": [{ "color": "#283d6a" }] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [{ "color": "#3a4762" }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#0e1626" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "color": "#4e6d70" }] } ] };
},
showNotification: function(from, align) { color = Math.floor((Math.random() * 4) + 1);
}
};