Related
I am fetching json data from a API and I have to display some of the numbers as %. The json data displays them as 0.00. I tried this method, but it didn't work. I want to use a url to fetch my data, and then use Numeral.js to make the filtered data I got in %. What am I doing wrong? I create a template for my graph. I then make a fetch request to get my data and filter it, so I get the values I need. Then I take that value and try to format it. The new value I want to put on the graph.
const data = {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{
label: "ADOPTION",
data: [18, 12, 6, 9, 12, 3, 9],
backgroundColor: "rgba(73, 117, 197, 1)",
borderColor: "rgba(73, 117, 197, 1)"
},
{
label: "Target",
data: [0.654, 0.654, 0.751],
backgroundColor: "rgba(236, 123, 46, 1)",
borderColor: "rgba(236, 123, 46, 1)"
}
]
};
// config for graph
const config = {
type: "line",
data: data,
options: {
plugins: {
title: {
display: true,
text: 'data'
},
},
scales: {
y: {
beginAtZero: true
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById("data"),
config
);
// Fethc block for the graph
async function fetchJSON() {
const url="link";
const response = await fetch(url);
//* loads waiting to complete the request
const datapoints = await response.json();
return datapoints;
}
fetchJSON().then((datapoints) => {
const month = datapoints.map(function (index) {
return index.PERIOD_NAME; //*reffers to jSon word from file
});
console.log(month);
myChart.config.data.labels = month;
myChart.update();
});
fetchJSON().then((datapoints) => {
const total = datapoints.map(function (index) {
return index.ADOPTION //*reffers to jSon word from file
});
var string = numeral(datapoints).format('0.000%');
console.log(string);
myChart.config.data.datasets[0].data = total;
myChart.update();
});
<div class="col-sm-12 col-md-4 col-lg-4">
<canvas id="data"></canvas>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
I'm guessing datapoints is an array. Numeral takes numbers or strings that it trys to convert into a number. You can use datapoints.map(val => numeral(val).format('0.00%')) to format the datapoints elements.
I am using the ChartJS library to display a bar chart on my HTML page. The issue I am facing is when the page loads, it displays an empty bar chart without the data I have passed into it and without rendering the bars. After one click to the legend, the chart resizes and my labels appear on the x-axis, on the second click the bars are rendered and the y-axis populates to my passed in data. I am not sure why the chart is behaving this way.
I tested the chart with the code provided in the chart.js documentation and it appears instantly. I think the issue has to do with how I am calling my express backend to retrieve data from my endpoint.
Not sure how to resolve this issue. Any help is appreciated.
index.html:
<canvas
id="patents-per-category-bar-chart"
width="400"
height="400"
></canvas>
<script type="text/javascript">
var categoryLabels = [];
var categoryValues = [];
var centerLabels = [];
var centerValues = [];
$.getJSON("http://localhost:5000/api").done((data) => {
for (let item in data.patentsPerCategory) {
if (!data.patentsPerCategory.hasOwnProperty(item)) {
continue;
}
categoryLabels.push(item);
categoryValues.push(data.patentsPerCategory[item]);
}
for (let item in data.patentsPerCenter) {
if (!data.patentsPerCenter.hasOwnProperty(item)) {
continue;
}
centerLabels.push(item);
centerValues.push(data.patentsPerCenter[item]);
}
});
var ctx = document
.getElementById("patents-per-category-bar-chart")
.getContext("2d");
var barChartConfig = {
type: "bar",
data: {
labels: categoryLabels,
datasets: [
{
backgroundColor: "blue",
label: "# Patents Per Category",
data: categoryValues,
},
],
},
options: {
legend: {
onClick: null,
},
responsive: true,
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
},
};
var categoryBarChart = new Chart(ctx, barChartConfig);
</script>
mock data returned from the api:
{
"category": {
"health medicine and biotechnology": 37,
"instrumentation": 38,
"storage": 30,
"systems": 71,
"aeronautics": 1,
"electronics": 47,
"optics": 60,
"materials": 119,
"undefined": 3,
"communications": 32,
"sensors": 102,
"robotics": 37,
"software": 49,
"propulsion": 9,
"manufacturing": 40,
"environment": 24,
"aerospace": 79
}
}
After returning this data from the api, I iterate over it and push the keys and values into separate arrays which are categoryLabels, categoryValues. Then pass these arrays directly into the labels and data for the chart
Created a jsFiddle:
https://jsfiddle.net/tkdamxr5/2/
It works fine in the jsFiddle enviornment so the issue must be in the way I am calling my data using jQuery. Can anyone clarify how I need to call my express backend to get the data and pass it into the chart so it works correctly?
Figured it out. In my original code I was using
$.getJSON('http://localhost:5000/api').done((data) => {}
to call my expressjs backend.
I changed it to use
$.ajax({
url: "http://localhost:5000/api",
success: function (result) {
let labels = [];
let data = [];
for (let item in result.category) {
if (!result.category.hasOwnProperty(item)) {
continue;
}
labels.push(item);
data.push(result.category[item]);
}
},
error: function(err) { console.log(err); }
})
and was able to display my bar chart successfully and as expected.
I have sqlite database with single table. I am trying to read data with Python and pandas and return the data as json file in a function. Then the goal is to use Javascript to fetch the json data and use it for chart.js.
Here is my Python Code that should read the data form the database:
#cherrypy.expose
def chart_data(self):
cnx = sqlite3.connect('Production.db', check_same_thread=False)
daily_df = pd.read_sql_query("SELECT * FROM data_object", cnx)
return daily_df.to_json()
Then here is the part of the JavaScript code that I am trying to use to fetch data from that python call:
function get_chart_data() {
fetch('/chart_data').then( x => {
return x.json();
}).then( x => {
console.log(x);
});
}
In this instance i am trying to print the data in console.log just to see if i am getting data from Python. However I need this data to be fed into chart.js
var data = {
labels: [],
datasets: [{
label: "Dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [],
}]
};
var options = {
maintainAspectRatio: false,
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
};
Chart.Bar('chart', {
options: options,
data: data
});
And finally, the sqilite table has these columns:timestamp,capacity,max_capacity, true_count.
There is only 24 rows of data, one for each hour of the day.
And here is where I am stuck. I am not sure how to properly pull this data into the chart. The goal is to plot true count over the 24h period.
With the code I have so far I know i am very close but i am missing something to make this work.
Am I pulling the data properly with javascript from python?
And how do i then push that json data in javascript into label variable and data variable in chart.js?
I have made some progress. I am now able to get data to javascript console log while using your ajax example.
/* chart.js chart examples */
$(document).ready(function(){
var _data;
var _labels;
$.ajax({
url: "chart_data",
type: "get",
success: function(response) {
full_data = JSON.parse(response);
_data = full_data['true_count'];
_labels = full_data['timestamp'];
},
});
// chart colors
var colors = ['#007bff','#28a745','#333333','#c3e6cb','#dc3545','#6c757d'];
/* large line chart */
var chLine = document.getElementById("chLine");
var chartData = {
labels:_labels,
datasets: [
{
data:_data,
backgroundColor: [
'rgba(42, 157, 244, 0.1)'
],
borderColor: [
'rgba(42, 157, 244, 1)',
'rgba(33, 145, 81, 0.2)',
],
borderWidth: 1
}]
};
if (chLine) {
new Chart(chLine, {
type: 'line',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false
}
}
});
}
;
});
So if i do console.log(full_data) i get my data from python in json format as i wanted. However, i am getting error that says: full_data is not defined at the line where I am saying that labels: full_data['timestamp']
It seems that my full data is not accessable from the chart block. I am sure i am misplacing few brackets to make this work but I am unable to figure out where.
Any ideas?
My json file looks like this:
[{"timestamp":"00:00:00.000000","true_count":0},{"timestamp":"01:00:00.000000","true_count":0},{"timestamp":"02:00:00.000000","true_count":0},{"timestamp":"03:00:00.000000","true_count":0},{"timestamp":"04:00:00.000000","true_count":0},{"timestamp":"05:00:00.000000","true_count":0},{"timestamp":"06:00:00.000000","true_count":2},{"timestamp":"07:00:00.000000","true_count":5},{"timestamp":"08:00:00.000000","true_count":7},{"timestamp":"09:00:00.000000","true_count":8},{"timestamp":"10:00:00.000000","true_count":12},{"timestamp":"11:00:00.000000","true_count":15},{"timestamp":"12:00:00.000000","true_count":20},{"timestamp":"13:00:00.000000","true_count":17},{"timestamp":"14:00:00.000000","true_count":14},{"timestamp":"15:00:00.000000","true_count":13},{"timestamp":"16:00:00.000000","true_count":11},{"timestamp":"17:00:00.000000","true_count":19},{"timestamp":"18:00:00.000000","true_count":22},{"timestamp":"19:00:00.000000","true_count":16},{"timestamp":"20:00:00.000000","true_count":14},{"timestamp":"21:00:00.000000","true_count":10},{"timestamp":"22:00:00.000000","true_count":7},{"timestamp":"23:00:00.000000","true_count":4}]
I have been trying to parse this so timestamp goes to _labels and true_count goes to _data but no luck.
Here is what i have:
$(document).ready(function(){
var _data =[];
var _labels = [];
$.ajax({
url: "chart_data",
type: "get",
success: function(response) {
full_data = JSON.parse(response);
full_data.forEach(function(key,index){
_data = key.true_count;
_labels= key.timestamp;
});
//_data = [full_data['true_count']];
//_labels = [full_data['timestamp']];
},
});
Any suggestion what am I doing wrong now?
I am sharing my example which I used using Google charts .I am fetching live data from OPC Server using ajax and updated my real-time graph. It won't be a big difference if you use database instead of opc server. I hope you can relate it with your example.
Html
<div class="row" id="grap">
<div class="col-lg-12">
<div class="row">
<div class="col-12">
<div class="card">
<div class="chart-wrapper">
<div id="graph"></div>
</div>
</div>
</div>
</div>
</div>
</div>
This is django file from where I am passing data to gettemp() function via ajax call in json format. In your case it is database and there wont be issue.
Views.py
def plcdata(request):
url="opc.tcp://127.0.0.1:9000"
client=Client(url)
client.connect()
print("Client Connected")
data={}
dt=[]
while True:
pres=client.get_node("ns=2;i=2")
Pressure=pres.get_value()
adp=client.get_node("ns=2;i=3")
ap=adp.get_value()
rh=client.get_node("ns=2;i=4")
r=rh.get_value()
sp=client.get_node("ns=2;i=5")
s=sp.get_value()
nitro=client.get_node("ns=2;i=6")
n=nitro.get_value()
o2n=client.get_node("ns=2;i=7")
o=o2n.get_value()
hgl=client.get_node("ns=2;i=8")
h=hgl.get_value()
stempress=client.get_node("ns=2;i=9")
sps=stempress.get_value()
cond=client.get_node("ns=2;i=10")
co=cond.get_value()
dmwp=client.get_node("ns=2;i=11")
dmp=dmwp.get_value()
dmwf=client.get_node("ns=2;i=12")
dmf=dmwf.get_value()
chwp=client.get_node("ns=2;i=13")
chp=chwp.get_value()
chwt=client.get_node("ns=2;i=14")
cht=chwt.get_value()
icp=client.get_node("ns=2;i=16")
ip=icp.get_value()
icf=client.get_node("ns=2;i=15")
iff=icf.get_value()
ict=client.get_node("ns=2;i=17")
it=ict.get_value()
dcpp=client.get_node("ns=2;i=19")
dpp=dcpp.get_value()
dcff=client.get_node("ns=2;i=18")
dff=dcff.get_value()
dctt=client.get_node("ns=2;i=20")
dtt=dctt.get_value()
#Time=client.get_node("ns=2;i=3")
#Ti=Time.get_value()
#Ti1=datetime.time(Ti.hour,Ti.minute,Ti.second)
ti=datetime.now()
ti1=(str(ti.strftime('%Y-%m-%d %H:%M:%S')))
dt.append(str(Pressure)+','+ti1+','+str(ap)+','+str(r)+','+str(s)+','+str(n)+','+str(o)+','+str(h)+','+str(sps)+','+str(co)+','+str(dmp)+','+str(dmf)+','+str(chp)+','+str(cht)+','+str(ip)+','+str(it)+','+str(iff)+','+str(dpp)+','+str(dtt)+','+str(dff))
data['final']=dt
return JsonResponse(data)
Please check the getTemp() function as data is recieved from django in the success function. This is the part where you will have to make changes as per your requirement.
JS
<script type="text/javascript">
google.charts.load('current', {
callback: function () {
var chart = new google.visualization.LineChart(document.getElementById('graph'));
var options = {'title' : 'CTL-2 AIR PRESSURE (Bar)',
titleTextStyle: {
fontName: "Arial",
fontSize: 18,
},
animation: {
duration: 1000,
easing: 'out',
startup: true
},
hAxis: {
title: 'Time',
format: "HH:mm:ss",
textStyle: {
fontSize : 14,
bold:'true',
},
},
vAxis: {
title: 'Air Pressure',
format: '0.00',
textStyle: {
fontSize : 14,
bold:'true',
},
},
height: 450,
width:1000,
legend:'bottom'
};
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Air Pressure');
var go=[];
function getTemp() {
$.ajax({
type:"get",
url:"{% url 'plcdata' %}",
success:function(dat){
for(i=0;i<dat.final.length;i++){
var go=dat.final[i].split(',');
var tm = new Date();
if(data.hg.length>15){
data.removeRow(0);
}
data.addRow([tm, Number(go[0])]);
chart.draw(data, options);
}
return dat;
},
error: function(){
console.log("Error Occurred");
}
})
}
getTemp();
setInterval(getTemp, 3000);
},
packages:['corechart']
});
</script>
[1]: https://i.stack.imgur.com/bMWVB.png
I would like to chart data from an external JSON file using chart.js. As an example, the json file here lists movies ("title") and ratings ("rt_score"). I'd like to be able to show each movie and its rating without including the static JSON in the .js file, but rather using the $.ajax call method to refer to the /films endpoint.
I'd like to have:
labels: labelsVariable
data: dataVariable
Here is a fiddle with the setup so far with static data.
Here's my HTML:
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">
</script>
</body>
Here's the js that successfully generates a bar chart like I want, but with static data in "labels" and "data" instead of referencing the JSON file.
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Castle in the Sky', 'Grave of the Fireflies'],
datasets: [{
label: 'rating',
data: [95, 97],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
Instead of using the static data and labels, how can I reference the external JSON file using the $.ajax call method?
Based on what I've read, I may have to use "map" to break down the objects into arrays that contain labels and data?
Thank you in advance.
I think you are looking for Ajax request to fill your chart.
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var ctx_live = document.getElementById("mycanvas");
var myChart = new Chart(ctx_live, {
type: 'bar',
data: {
labels: [],
datasets: [{
data: [],
borderWidth: 1,
borderColor:'#00c0ef',
label: 'liveCount',
}]
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js - Dynamically Update Chart Via Ajax Requests",
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
}
}
});
var postId = 1;
var getData = function() {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts/' + postId + '/comments',
success: function(data) {
myChart.data.labels.push("Post " + postId++);
myChart.data.datasets[0].data.push(getRandomIntInclusive(1, 25));
// re-render the chart
myChart.update();
}
});
};
setInterval(getData, 3000);
see live example here.
Load the json chart data dynamically and set it when you are creating the graph. There are many ways you can load the chart json data. However, I believe the JQuery getJSON function is more relevant to you.
$.getJSON( "chartdata/test.json", function( data ) {
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
I figured it out. Here's what worked. I had to use .map to set up the data properly inside variables and then use those variables as data and labels.
function renderChart(data, labels) {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'This week',
data: data,
}]
},
});
}
function getChartData() {
$("#loadingMessage").html('<img src="./giphy.gif" alt="" srcset="">');
$.ajax({
url: "https://ghibliapi.herokuapp.com/films",
success: function (result) {
var data = result.map(x=>x.rt_score);
var labels = result.map(x=>x.title);
renderChart(data, labels);
console.log(data);
},
});
$("#renderBtn").click(
function () {
getChartData();
});
I wish to pass data from a Grails controller to a chart.js chart in a Grails view. My code will not display the chart labels correctly.
The issue is that labels (an arrayList of dates) is not being read correctly as an array of strings in Javascript which is causing Chart.js not to display.
Can anyone offer any help?
Any help would be gratefully received. Thanks in advance!
My code is here:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script>
var userResult = ${userResultMap as JSON};
var data = userResult.result;
var labels = userResult.dateCreated;
var config = {
type: 'line',
data: {
labels: testDate,
datasets: [{
label: 'Clinical FRE',
backgroundColor: '#7A564A',
borderColor: '#7A564A',
data: result,
fill: false
}]
},
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
responsive: true,
scales: {
yAxes: [{
gridLines: {
drawBorder: false,
color: ['#9b1f22', '#9b1f22', '#ed1c24', '#ed1c24', '#f7931f', '#f7931f', '#206b36', '#206b36', '#206b36', '#206b36', '#206b36']
},
ticks: {
min: 0,
max: 100,
stepSize: 10,
callback: function (value) {
return value + "%"
}
}
}]
}
}
};
window.onload = function createChart(data) {
var ctx = document.getElementById('myChart').getContext('2d');
window.myLine = new Chart(ctx, config)
};
</script>
Data is sent from controller using ModelandView command:
#Secured('ROLE_USER')
def home() {
try {
SecUser user = springSecurityService.currentUser
Participant p = Participant.findByUser(user)
Result userResults = Result.findByUser(user)
def userResultsList
def riskLevelMap
def iconClassMapList = []
def riskLevelMapList = []
def colourNameList = []
Map userResultMap = [:]
if (userResults!= null){
userResultsList = userResults.list()
if(userResultsList != null)
userResultsList.each {list->
iconClassMapList.add(previousTestsService?.getIconType(list))
riskLevelMap = riskAdviceService?.riskLevel(list.result)
riskLevelMapList.add(riskLevelMapList)
colourNameList.add(riskLevelMap?.colourName)
}
userResultMap.put("result",userResultsList?.result)
userResultMap.put("dateCreated",userResultsList?.dateCreated)
println userResultMap
println userResultsList.dateCreated
println(userResultsList.dateCreated.getClass())
}
return new ModelAndView('home', [user: user, participant: p, username: user.username,userResultsList: userResultsList,iconClassMapList:iconClassMapList,colourNameList:colourNameList,userResultMap:userResultMap])
} catch (Exception ex) {
log.error(ex.printStackTrace())
}
}
Sample data:
data - [13.7]
labels - [2018-09-17 16:39:00.0]
The main issue here is that grails automatically escapes values as HTML upon insertion in the GSP page. You can suppress this by adding the advice
<%# expressionCodec="none" %>
at the beginning of the GSP page.
Be aware that your application will be less secure after the change. Especially if the data can contain user-created input people might start messing with your application.
Here is a running example using Grails 3.3.8 based on the test data supplied by #Kumar Chapagain, thank you very much.
In the controller you don't need to package the data in a ModelAndView, as this is done automatically by Grails. Just return a map with the needed entries. I prefer to convert the map to JSON within the controller and not in the gsp page as it keeps the control where it belongs and the GSP more simple.
Controller:
package g338
import grails.converters.JSON
class ChartController {
def index() {
Map userResultMap = [:]
List dateCreated = ["2018-09-17 13:07:06.0","2018-09-17 13:27:06.0","2018-09-17 14:27:06.0","2018-09-17 17:27:06.0"]
List result = [50, 56, 23, 42]
userResultMap.put("dateCreated",dateCreated)
userResultMap.put("result",result)
[ userResultMap: userResultMap as JSON ]
}
}
gsp page: views/chart/index.gsp
<%# expressionCodec="none" %>
<!doctype html>
<html>
<head>
<meta name="layout" content="main"/>
<title>Welcome to Grails</title>
</head>
<body>
<canvas id="myChart"></canvas>
<g:javascript>
var result = ${userResultMap};
var data = result.result;
var labels = result.dateCreated;
var config = {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Clinical FRE',
backgroundColor: '#7A564A',
borderColor: '#7A564A',
data: result,
fill: false
}]
},
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
responsive: true,
scales: {
yAxes: [{
gridLines: {
drawBorder: false,
color: ['#9b1f22', '#9b1f22', '#ed1c24', '#ed1c24', '#f7931f', '#f7931f', '#206b36', '#206b36', '#206b36', '#206b36', '#206b36']
},
ticks: {
min: 0,
max: 100,
stepSize: 10,
callback: function (value) {
return value + "%"
}
}
}]
}
}
};
window.onload = function createChart(data) {
var ctx = document.getElementById('myChart').getContext('2d');
window.myLine = new Chart(ctx, config)
};
</g:javascript>
</body>
</html>
Make sure userResultsList(userListMap) data must be in the form below from the controller.
Map userResultMap = [:]
List dateCreated = ["2018-09-17 13:07:06.0","2018-09-17 13:27:06.0","2018-09-17 14:27:06.0","2018-09-17 17:27:06.0"]
List result = [50, 56, 23, 42]
userResultMap.put("dateCreated",dateCreated)
userResultMap.put("result",result)
Then you need to parse the userResultMap data as JSON if not parsed and do similar like this in gsp page:
<script>
var userResult = ${userResultMap as JSON};
var result = userResult.result;
var labels = userResult.dateCreated;
</script>
You would need to convert your array, object whatever you are using to JSON for JavaScript to understand it.
<g:javascript>
var testDate = ${userResultsList.dateCreated}
var result = ${userResultsList.result as JSON} // make sure grails.converters.JSON is imported
</g:javascript>
var labels = userResult.dateCreated;
var config = {
type: 'line',
data: {
labels: testDate,
you are using labels: testDate,
but assigning labels to labels
try
var testDate = userResult.dateCreated;
**labels: testDate**