Menu
I am using flot pie chart for showing plotting pie chats for New visitors, Bounce Rate, Search, Traffic . But it shows error in console.
Uncaught Error: Invalid dimensions for plot, width = null, height = null
I have used this html like:
<div class="row">
<div class="col-lg-3 col-sm-6">
<!-- START widget-->
<div data-toggle="play-animation" data-play="fadeInDown" data-offset="0" data-delay="100" class="panel widget">
<div class="panel-body bg-primary">
<div class="row row-table row-flush">
<div class="col-xs-8">
<p class="mb0">New visitors</p>
<h3 class="m0">1.5k</h3>
</div>
<div class="col-xs-4 text-center">
<em class="fa fa-user fa-2x"><sup class="fa fa-plus"></sup>
</em>
</div>
</div>
</div>
<div class="panel-body">
<!-- Bar chart-->
<div class="text-center">
<div data-bar-color="primary" data-height="30" data-bar-width="6" data-bar-spacing="6" class="inlinesparkline inline">5,3,4,6,5,9,4,4,10,5,9,6,4</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<!-- START widget-->
<div data-toggle="play-animation" data-play="fadeInDown" data-offset="0" data-delay="500" class="panel widget">
<div class="panel-body bg-warning">
<div class="row row-table row-flush">
<div class="col-xs-8">
<p class="mb0">Bounce Rate</p>
<h3 class="m0">50%</h3>
</div>
<div class="col-xs-4 text-center">
<em class="fa fa-users fa-2x"></em>
</div>
</div>
</div>
<div class="panel-body">
<!-- Bar chart-->
<div class="text-center">
<div data-bar-color="warning" data-height="30" data-bar-width="6" data-bar-spacing="6" class="inlinesparkline inline">10,30,40,70,50,90,70,50,90,40,40,60,40</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<!-- START widget-->
<div data-toggle="play-animation" data-play="fadeInDown" data-offset="0" data-delay="1000" class="panel widget">
<div class="panel-body bg-danger">
<div class="row row-table row-flush">
<div class="col-xs-8">
<p class="mb0">Searchs</p>
<h3 class="m0">28%</h3>
</div>
<div class="col-xs-4 text-center">
<em class="fa fa-search fa-2x"></em>
</div>
</div>
</div>
<div class="panel-body">
<!-- Bar chart-->
<div class="text-center">
<div data-bar-color="danger" data-height="30" data-bar-width="6" data-bar-spacing="6" class="inlinesparkline inline">2,7,5,9,4,2,7,5,7,5,9,6,4</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<!-- START widget-->
<div data-toggle="play-animation" data-play="fadeInDown" data-offset="0" data-delay="1500" class="panel widget">
<div class="panel-body bg-success">
<div class="row row-table row-flush">
<div class="col-xs-8">
<p class="mb0">Traffic</p>
<h3 class="m0">140.5 kb</h3>
</div>
<div class="col-xs-4 text-center">
<em class="fa fa-globe fa-2x"></em>
</div>
</div>
</div>
<div class="panel-body">
<!-- Bar chart-->
<div class="text-center">
<div data-bar-color="success" data-height="30" data-bar-width="6" data-bar-spacing="6" class="inlinesparkline inline">4,7,5,9,6,4,8,6,3,4,7,5,9</div>
</div>
</div>
</div>
</div>
</div>
Script:
/**=========================================================
* SparkLines Mini Charts
=========================================================*/
(function($, window, document){
var Selector = '.inlinesparkline';
// Match color with css values to style charts
var colors = {
primary: '#5fb5cb',
success: '#27ae60',
info: '#22bfe8',
warning: '#ffc61d',
danger: '#f6504d'
};
// Inline sparklines take their values from the contents of the tag
$(Selector).each(function() {
var $this = $(this);
var data = $this.data();
if(data.barColor && colors[data.barColor])
data.barColor = colors[data.barColor];
var options = data;
options.type = data.type || 'bar'; // default chart is bar
$(this).sparkline('html', options);
});
}(jQuery, window, document));
$(function () {
// Bar chart
(function () {
var Selector = ".chart-bar";
$(Selector).each(function() {
var source = $(this).data('source') || $.error('Bar: No source defined.');
var chart = new FlotChart(this, source),
panel = $(Selector).parents(".panel"),
option = {
series: {
bars: {
align: "center",
lineWidth: 0,
show: true,
barWidth: 0.6,
fill: 0.9
}
},
grid: {
borderColor: "#eee",
borderWidth: 1,
hoverable: true,
backgroundColor: "#fcfcfc"
},
tooltip: true,
tooltipOpts: {
content: "%x : %y"
},
xaxis: {
tickColor: "#fcfcfc",
mode: "categories"
},
yaxis: {
tickColor: "#eee"
},
shadowSize: 0
};
// Send Request
chart.requestData(option);
});
})();
// Bar Stacked chart
(function () {
var Selector = ".chart-bar-stacked";
$(Selector).each(function() {
var source = $(this).data('source') || $.error('Bar Stacked: No source defined.');
var chart = new FlotChart(this, source),
option = {
series: {
stack: true,
bars: {
align: "center",
lineWidth: 0,
show: true,
barWidth: 0.6,
fill: 0.9
}
},
grid: {
borderColor: "#eee",
borderWidth: 1,
hoverable: true,
backgroundColor: "#fcfcfc"
},
tooltip: true,
tooltipOpts: {
content: "%x : %y"
},
xaxis: {
tickColor: "#fcfcfc",
mode: "categories"
},
yaxis: {
tickColor: "#eee"
},
shadowSize: 0
};
// Send Request
chart.requestData(option);
});
})();
// Area chart
(function () {
var Selector = ".chart-area";
$(Selector).each(function() {
var source = $(this).data('source') || $.error('Area: No source defined.');
var chart = new FlotChart(this, source),
option = {
series: {
lines: {
show: true,
fill: 0.8
},
points: {
show: true,
radius: 4
}
},
grid: {
borderColor: "#eee",
borderWidth: 1,
hoverable: true,
backgroundColor: "#fcfcfc"
},
tooltip: true,
tooltipOpts: {
content: "%x : %y"
},
xaxis: {
tickColor: "#fcfcfc",
mode: "categories"
},
yaxis: {
tickColor: "#eee",
tickFormatter: function (v) {
return v + " visitors";
}
},
shadowSize: 0
};
// Send Request and Listen for refresh events
chart.requestData(option).listen();
});
})();
// Line chart
(function () {
var Selector = ".chart-line";
$(Selector).each(function() {
var source = $(this).data('source') || $.error('Line: No source defined.');
var chart = new FlotChart(this, source),
option = {
series: {
lines: {
show: true,
fill: 0.01
},
points: {
show: true,
radius: 4
}
},
grid: {
borderColor: "#eee",
borderWidth: 1,
hoverable: true,
backgroundColor: "#fcfcfc"
},
tooltip: true,
tooltipOpts: {
content: "%x : %y"
},
xaxis: {
tickColor: "#eee",
mode: "categories"
},
yaxis: {
tickColor: "#eee"
},
shadowSize: 0
};
// Send Request
chart.requestData(option);
});
})();
// Pïe
(function () {
var Selector = ".chart-pie";
$(Selector).each(function() {
var source = $(this).data('source') || $.error('Pie: No source defined.');
var chart = new FlotChart(this, source),
option = {
series: {
pie: {
show: true,
innerRadius: 0,
label: {
show: true,
radius: 0.8,
formatter: function (label, series) {
return '<div class="flot-pie-label">' +
//label + ' : ' +
Math.round(series.percent) +
'%</div>';
},
background: {
opacity: 0.8,
color: '#222'
}
}
}
}
};
// Send Request
chart.requestData(option);
});
})();
// Donut
(function () {
var Selector = ".chart-donut";
$(Selector).each(function() {
var source = $(this).data('source') || $.error('Donut: No source defined.');
var chart = new FlotChart(this, source),
option = {
series: {
pie: {
show: true,
innerRadius: 0.5 // This makes the donut shape
}
}
};
// Send Request
chart.requestData(option);
});
})();
});
Using this library
<!-- Sparklines-->
<script src="vendor/sparklines/jquery.sparkline.min.js"></script>
<!-- Flot Charts-->
<script src="vendor/flot/jquery.flot.min.js"></script>
<script src="vendor/flot/jquery.flot.tooltip.min.js"></script>
<script src="vendor/flot/jquery.flot.resize.min.js"></script>
<script src="vendor/flot/jquery.flot.pie.min.js"></script>
<script src="vendor/flot/jquery.flot.time.min.js"></script>
<script src="vendor/flot/jquery.flot.categories.min.js"></script>
<!--[if lt IE 8]><script src="js/excanvas.min.js"></script><![endif]-->
<!-- END Page Custom Script-->
Ref: http://omnipotent.net/jquery.sparkline/#s-about
At this moment what should i do?
915
I just faced this error. You have to define
style="width:aaapx; height:bbbpx"
to the div you're filling with the chart. I made this for example
<div ui-jp="plot" id="placeholder" style="width:450px; height:250px" ></div>
and loaded data to #placeholder through jQuery
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
