Chart responsively - javascript

I have a line chart. But my chart is not responsive. How can I make it responsive?
Here is my script code:
$(document).ready(function(){
var data = <?php echo json_encode($data) ?>;
var id = [];
var akim = [];
for(var i in data) {
id.push(data[i].id);
akim.push(data[i].akim);
}
var chartdata = {
labels: id,
datasets: [
{
label: "akim",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(211, 72, 54, 1)",
borderColor: "rgba(211, 72, 54, 1)",
pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
pointHoverBorderColor: "rgba(211, 72, 54, 1)",
data: akim
}
]
};
var ctx = $("#mycanvas");
var LineGraph = new Chart(ctx, {
type: 'line',
data: chartdata
});
});
And here is my drawing code:
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">Dakikalık Gösterim</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="chart-container">
<canvas id="mycanvas"></canvas>
</div>
</div>
<!-- /.box-body-->
</div>
But it shows like this.
What should I do to make it responsive?


My CSS code is in pixel format. I changed it. And It becomes normal.
<style>.chart-container {width: 100%;height: auto;}</style>

Related

Multiple ChartJS scripts are not working at the same time

When I am using a Single Chart in ChartJS, it works well but whenever I use more than a Chart, only the last chart works, the others don't longer display.
I am not sure of what the problem might actually be as I have checked the console and terminal if I would get any error or so so as to debuy it.
index.html
{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3/dist/Chart.min.js"></script>
# The Script for the first chart
<script>
// Driver Status
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [{{pending}},{{hired}},{{terminated}}],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
label: 'Population'
}],
labels: ['pending', 'hired', 'terminated']
},
options: {
responsive: true
}
};
window.onload = function() {
var ctx = document.getElementById('pie-chart').getContext('2d');
window.myPie = new Chart(ctx, config);
};
</script>
# The Script for the Second chart
<script>
// EVR STATUS
var config2 = {
type: 'doughnut',
data: {
datasets: [{
data: [{{done}},{{partial}},{{not_started}}],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
label: ['EVR Status']
}],
labels: ['done', 'partial', 'not_started']
},
options: {
responsive: true
}
};
window.onload = function() {
var ctx2 = document.getElementById('evr-status').getContext('2d');
window.myPie2 = new Chart(ctx2, config2);
};
</script>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="card">
<div class="card-body">
<h5 class="text-muted">No of Drivers: {{drivers_list.count}}</h5>
<div class="metric-value d-inline-block" style="margin-bottom: -20px!important;">
<h1 class="fs-20">Driver Status</h1>
</div>
</div>
# THE FIRST CHART
<canvas id="pie-chart" style="margin-bottom: 20px!important;"></canvas>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="card">
<div class="card-body">
<h5 class="text-muted">Driver</h5>
<div class="metric-value d-inline-block" style="margin-bottom: -20px!important;">
<h1 class="fs-20">EVR Status</h1>
</div>
</div>
# THE SECOND CHART
<canvas id="evr-status" style="margin-bottom: 20px!important;"></canvas>
</div>
</div>
{% endblock %}

The problem seems to be 2 onload functions. If you make both charts in the second onLoad function it will work. It will look better if you make it a single script tag also then.
<body>
<!--<canvas id="chartJSContainer" width="600" height="400"></canvas>-->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="card">
<div class="card-body">
<h5 class="text-muted">No of Drivers:</h5>
<div class="metric-value d-inline-block" style="margin-bottom: -20px!important;">
<h1 class="fs-20">Driver Status</h1>
</div>
</div>
# THE FIRST CHART
<canvas id="pie-chart" style="margin-bottom: 20px!important;"></canvas>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="card">
<div class="card-body">
<h5 class="text-muted">Driver</h5>
<div class="metric-value d-inline-block" style="margin-bottom: -20px!important;">
<h1 class="fs-20">EVR Status</h1>
</div>
</div>
# THE SECOND CHART
<canvas id="evr-status" style="margin-bottom: 20px!important;"></canvas>
</div>
</div>
<script>
// Driver Status
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [10, 20, 30],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
label: 'Population'
}],
labels: ['pending', 'hired', 'terminated']
},
options: {
responsive: true
}
};
</script>
# The Script for the Second chart
<script>
// EVR STATUS
var config2 = {
type: 'doughnut',
data: {
datasets: [{
data: [30, 20, 10],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
label: ['EVR Status']
}],
labels: ['done', 'partial', 'not_started']
},
options: {
responsive: true
}
};
window.onload = function() {
var ctx2 = document.getElementById('evr-status').getContext('2d');
window.myPie2 = new Chart(ctx2, config2);
var ctx = document.getElementById('pie-chart').getContext('2d');
window.myPie = new Chart(ctx, config);
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

Why is my Line Chart.JS starting in the middle?

I am trying to add some JS chart to my webpage, but somehow the line starts in the middle of the graph. (No matter how many data points there are)
See Below:
There are only 3 data points, but the line starts only at the very end. And only one label shows up even there are 3 data point
Does anyone have any idea why? Thanks!
Code:
// Line chart
var ctx = document.getElementById("instance_countChart");
var instance_countChart = new Chart(ctx, {
type: 'line',
data: {
labels: [
"gukumar_skb_regression_03_17_17_23.45",
"gukumar_skb_regression_03_18_17_23.45",
"gukumar_skb_regression_03_19_17_23.45",
],
datasets: [{
label: "instance_count",
backgroundColor: "transparent",
borderColor: "rgba(38, 185, 154, 0.7)",
pointBorderColor: "rgba(38, 185, 154, 0.7)",
pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointBorderWidth: 1,
//backgroundColor: "#26B99A",
data: [ 7409085.0, 7409085.0, 7409041.0,
]
}]
},
});
How I am calling it:
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>instancecount </h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>Settings 1
</li>
<li>Settings 2
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<canvas id="instance_countChart" width="400" height="200"></canvas>
</div>
</div>
</div>

Not sure why it happens, after reading the documentation, and doing some experiments. If I turn off the XAxes, the line starts from the beginning. But with the Axes label on, I am still not able to get it correctly.
options: {
scales: {
xAxes: [{
display: false
}]
}
}

Charts.js & Bootstrap Accordion

I have been trying to understand why Charts.js wouldn't draw a chart if it's inside a Bootstrap Accordion.
After many attempts I managed to understand why it's not drawing the chart! it's because the panel is basically hiding the canvas so Charts.js doesn't draw it.
Can anyone help me come up with a solution to this?
I've also tried to draw the chart only when the Bootstrap event shown.bs.collapse is active, doesn't work.
Here's a jsfiddle I've created to illustrate the problem:
If you want to reproduce the problem simply add in to the class in line <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

I got it to work with the following code:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<canvas id="q_chart" width="400" height="400"></canvas>
</div>
</div>
</div>
</div>
and javascript
var ctx = document.getElementById("q_chart").getContext("2d");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}, {
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
var MyNewChart=null;
$('#collapseOne').on('shown.bs.collapse', function () {
setTimeout(function() {
if(MyNewChart == null)
MyNewChart = new Chart(ctx).Bar(data);
},200);
});

I did some testing and found that you can call MyNewChart.update() instead of recreating the chart on a timeout as the verified answer does. The first transition is a bit rough (maybe because a transition is happening as it's created) but after that the transitions are smooth.
Example JSFiddle: https://jsfiddle.net/akh9cnx5/
<div class="container">
<button type="button" class="col-12 btn btn-light mb-2" data-toggle="collapse" data-target="#viewgraph" aria-expanded="false" aria-controls="viewgraph">View Graph</button>
<div id="viewgraph" class="collapse mb-2">
<div class="card card-body">
<div class="d-flex justify-content-center">
<div class="col-12 col-sm-8">
<canvas id="graph"></canvas>
</div>
</div>
</div>
</div>
</div>
and javascript
var ctx = document.getElementById('graph').getContext('2d');
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}, {
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
var myNewChart = new Chart(ctx, {
type: 'bar',
data: data
});
$("#viewgraph").on('shown.bs.collapse', function () {
myNewChart.update();
});

For anyone coming to this later, I had the same issue but preferred not to rely on a timer delay as offered in the accepted answer. The following is what worked for me using Bootstrap 3.3.7 with the shown event:
shown.bs.collapse
$('#accordion').on('shown.bs.collapse', function (e) {
switch (e.target.id)
{
case "panel1": ShowChart1(); break;
case "panel2": ShowChart2(); break;
case "panel3": ShowChart3(); break;
case "panel4": ShowChart4(); break;
default: ShowDefault();
}
})
Hopes this helps
btw - this is the above code working: greatdata.com/stats/newyork_ny

Chartjs line graph goes over panel

I am currently using chartjs for graphs and I want to be able to display these in a bootstrap panel. I have managed to get the graph on however the graph seems to go over the panel body a little bit.
<div class="panel panel-default" draggable="true">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
<span class="glyphicon glyphicon-pencil panel-icons"></span>
<span class="glyphicon glyphicon-zoom-in panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
</h3>
</div>
<div class="panel-body">
<canvas id="chartjs"></canvas>
</div>
</div>
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
function loadChart() {
var context = $('#chartjs').get(0).getContext("2d");
window.myLine = new Chart(context).Line(data, {
responsive: true,
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
});
}
window.onload = loadChart();
this is what it currently looks like
Chart Image.
I am unsure on how to get the graph within the bounds of the panel. If more information is needed I would be happy to provide more.

Just add some padding-right to the canvas element. That should give you enough space to fit the canvas right in to the panel-body.
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
function loadChart() {
var context = $('#chartjs').get(0).getContext("2d");
window.myLine = new Chart(context).Line(data, {
responsive: true,
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
});
}
window.onload = loadChart();
canvas {
padding: 0 30px 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div class="col-sm-6">
<div class="panel panel-default" draggable="true">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
<span class="glyphicon glyphicon-pencil panel-icons"></span>
<span class="glyphicon glyphicon-zoom-in panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
</h3>
</div>
<div class="panel-body">
<canvas id="chartjs"></canvas>
</div>
</div>
</div>

Chart.js not showing in my view

I have an app running with angular.js and one of my view should load an chart. I'm using chart.js for it, but for some reason it's not working and no error is shown on my console.
Here is my function that creates the chart:
$scope.writeBatteryChart = function(){
console.log("Function was called");
var data = {
labels: ["10:30am", "11:00am", "11:30am", "12:00pm", "12:30pm", "01:00pm", "01:30pm"],
datasets: [
{
label: "Battery",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
var options = {
responsive: true,
bezierCurve : false
}
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, options);
}
Here's the HTML where the chart should appear:
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-8" style="padding-left: 0px;">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Battery <i class="fi-battery-half"></i></h3>
</div>
<div class="panel-body">
<canvas id="myChart" height="300"></canvas>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4" style="padding-left: 0px; padding-right: 0px;">
</div>
</div>
and I'm also loading the latest version of the Chart.js:
<!--Chart plugin -->
<script src="bower_components/Chart.js/Chart.js" language="javascript"></script>
One thing that I noticed is that the canvas is being rendered with 0 dimensions:
Does someone can see where I'm doing something wrong?

The problem: I was calling the function before the canvas be loaded on the view, so I used a setTimeout() to call the writeBatteryChart() with a delay in order to wait the canvas be rendered.

You have to add your rendered things inside of canvas. Hope it will help Link

Categories