How Refresh chart js data with same variable name - javascript

I am facing an issue while refreshing the data using the same variable. Every time data get changed in a variable(mydata) but after an update the chart loaded with same data.while click the refresh button chart get reloded but always showing the old chart in chart
<button type="button" onclick="refresh()">Refresh</button>
<canvas id="mychart"></canvas>
<script >
var config = {
type: 'bar',
options: {
scales: {
y: {
beginAtZero: true
}
}
},
};
var myChart=null;
function refresh(){
$.ajax({
url: '/mydata',
method: 'POST',
data: {"user":user},
async: false,
success: function(data) {
mydata = data;
}
})
config.data = {
labels: ["jan","Feb","Mar","Apr","may","june","july"],
datasets:
[{
data: mydata,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
]
}]
};
ctx = document.getElementById('mychart');
if(myChart == null){
myChart = new Chart(ctx, config);
} else{
myChart.data.datasets[0].data=mydata;
myChart.update();
}
}
</script>
</body>

Related

Django - Chart.js doesn't return nothing

I'm new on js and i'm trying to build something simple. I've no error in the console but chart doesn't display on my Django website.
If someone can help me, please, would be great.
{% extends 'account/main.html' %}
<script>
{% block jquery %}
var endpoint = '/api/chart/data/'
var defaultData = []
var labels = [];
$.ajax({
method: "GET",
url: endpoint,
success: function(data){
labels = data.labels
defaultData = data.default
setChart()
},
error: function(error_data){
console.log("error")
console.log(error_data)
}
})
function setChart(){
var ctx = document.getElementById("myChart");
var ctx2 = document.getElementById("myChart2");
var myChart = new Chart(ctx2, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: '# of Votes',
data: defaultData,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
var myChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: labels,
datasets: [{
label: '# of Votes',
data: defaultData,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
// var ctx = document.getElementById("myChart");
{% endblock %}
</script>
{% block content %}
<head>
<title>Home</title>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<form method="GET" action="" name="myform" value="home" id="subform">
{% csrf_token %}
</form>

Chart.js Cannot read property 'fontSize' of undefined

Html
<div class="chart-container" style="height:315px">
<canvas id="test"></canvas>
</div>
I've included these files
<script src="/assets/vendors/jquery/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" type="text/javascript"></script>
<script src="/assets/js/test.js"></script>
test.js
$(document).ready(function() {
var ctx = document.getElementById('test').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
});
I used the sample code from https://www.chartjs.org/docs/latest/ for test.js. I'm also using laravel if that could have something to do with it.
Here's the error I'm getting.
Chart.min.js:7 Uncaught TypeError: Cannot read property 'fontSize' of
undefined
at Object._parseFont (Chart.min.js:7)
at i.fit (Chart.min.js:7)
at i.update (Chart.min.js:7)
at Chart.min.js:7
at Object.each (Chart.min.js:7)
at Object.update (Chart.min.js:7)
at ni.updateLayout (Chart.min.js:7)
at ni.update (Chart.min.js:7)
at ni.construct (Chart.min.js:7)
at new ni (Chart.min.js:7)
EDIT
Removing $(document).ready() fixed the problem

Please check this example jquery 2.2.4
// find elements
var ctx = document.getElementById('myChart');
var ctx = document.getElementById('myChart').getContext('2d');
var ctx = $('#myChart');
var ctx = 'myChart';
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" type="text/javascript"></script>

It works perfectly fine if you properly source the jQuery library.
Check here https://jsfiddle.net/g7qmh8wL/1/
// no code changes required.

Integrate chart.js with single javascript file

I am implementing an application with codeigniter framework, I want to produce charts with Chart.JS, I have a controller an array with the data and I intend to send them to the javascript file with the graph implementation, and show everything in the view, but I can not pass the data.
Controller
function index() {
$data['DT'] = $this->Dashboard_main_model->get_dt_in();
$data['CL'] = $this->Dashboard_main_model->get_cl_in();
$data['MT'] = $this->Dashboard_main_model->get_mt_in();
$data['SN_AU'] = $this->Dashboard_main_model->get_sn_au_in();
$data['SN_AT'] = $this->Dashboard_main_model->get_sn_at_in();
$data['SN_MR'] = $this->Dashboard_main_model->get_sn_mr_in();
$data['DT_TMPs'] = $this->Dashboard_main_model->get_dt_tmp_in();
$data['CL_TMPs'] = $this->Dashboard_main_model->get_cl_tmp_in();
$data['_view'] = 'dashboard';
$this->load->view('layouts/main', $data);
}
JS FILE teste.js
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
view
<div class="col-md-6">
<div class="box">
<div class="box-header">
<h3 class="box-title">Chamadas Atendidas</h3>
</div>
<div class="box-body no-padding">
<canvas id="myChart" style="auto;"></canvas>
</div>
</div>
</div>
</div>

Well I had a go at this and it seems the best bet is to install the Chart.min.js locally on your server - I grabbed it from Github - the link is on the chartjs.org site ( which you have obviously been to already)
Download it and save it where appropriate for your setup.
Controller - Chart.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Chart extends CI_Controller {
public function __construct() {
parent::__construct();
}
public function index() {
$this->load->helper('url');
$this->load->view('chart_view');
}
}
View - chart_view.php
<canvas id="myChart"></canvas>
// Load the Chart.min.js locally on the server
// Note: make sure you have application/config/config.php config['base_url'] correctly set.
<script src="<?=base_url('assets/chart/2.8.0/Chart.min.js');?>"></script>
<script type="application/javascript">
let ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
And I got a nice little chart showing up.
See if that works for you.

Chart.js with TypeScript

var myCharts = <HTMLCanvasElement>document.getElementById("myChart");
var ctx = myCharts.getContext('2d');
var myChart = new Chart(ctx) => ({
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
// Please someone help me with this function. I am currently learning and not understanding whats wrong with this. The error says I am missing a semi colon at =>

Your problem is on this line:
var myChart = new Chart(ctx) => ({
This isn't valid JavaScript. My best guess is you meant something like this:
var myChart = new Chart(ctx, {

Displaying data from simple html form to display in chartjs

I am trying to create a simple form to collect input from the user then display the user data in a bar chart using chartjs. Below is my current javascript code. I want the testValue1, testValue2, testValue3 and testValue4 to display as my data. Any help on what I am missing would be greatly appreciated.
function displayGraph () {
let testOutput = document.getElementById("welcome");
let testValue1 = document.getElementById("test1");
let testValue2 = document.getElementById("test2");
let testValue3 = document.getElementById("test3");
let testValue4 = document.getElementById("test4");
}
let barChart = new Chart(rateOfReturn, {
type: 'bar',
data: {
labels: ["Rate of Return", "Fee #1", "Fee #2", "Fee #3"],
datasets: [{
label: 'Balance by Year',
data: [],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
});

I am not sure your implementation. If you trying to get a value from an input into a chart. Won't something like this work?
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var testOutput = document.getElementById("welcome").value;
var testValue1 = document.getElementById("test1").value;
var testValue2 = document.getElementById("test2").value;
var testValue3 = document.getElementById("test3").value;
var testValue4 = document.getElementById("test4").value;
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [testValue1, testValue2, testValue3, testValue4],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
Reference: http://www.chartjs.org/docs/latest/

Maybe you can pass data instead of the empty array
datasets: [{
label: 'Balance by Year',
data: [], // Empty Array
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
You can first follow the latest Bar chart example and then reproduce it for yourself. http://www.chartjs.org/docs/latest/charts/bar.html

Here you go. This works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SimpleAdd</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" charset="utf-8"></script>
</head>
<body>
<form>
Test:<br>
<input id="test1" type="text">
<input type="button" value="Add data" onclick="adddata()">
</form>
<canvas id="myChart"></canvas>
<script type="text/javascript">
var ctx = document.getElementById("myChart").getContext('2d');
function adddata() {
let test1 = document.getElementById("test1").value;
// myChart.data.labels[1] = testName1;
myChart.data.datasets[0].data[0] = test1;
myChart.update();
}
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red"],
datasets: [{
label: '# of Votes',
data: [test1],
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>

Categories