I have the following code in a simple Bootstrap html file which displays a Chart.js chart.
this is chart.html
<head>
<meta charset="utf-8" />
<title>Chart.js </title>
<!-- import plugin script -->
<script src='app/static/js/Chart.min.js'></script>
</head>
<body>
<div class="chartjs">
<h1>Flask Chart.js</h1>
<!-- bar chart canvas element -->
<canvas id="chart" width="600" height="400"></canvas>
</div>
<script>
// bar chart data
var barData = {
labels : [{% for item in labels %}
"{{item}}",
{% endfor %}],
datasets : [
{
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)",
bezierCurve : false,
data : [{% for item in values %}
{{item}},
{% endfor %}]
}]
}
Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,0,0,0.8)";
Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = false;
Chart.defaults.global.scaleLineColor = "black";
Chart.defaults.global.scaleFontSize = 16;
// get bar chart canvas
var mychart = document.getElementById("chart").getContext("2d");
steps = 10
max = 10
// draw bar chart
var LineChartDemo = new Chart(mychart).Line(barData, {
scaleOverride: true,
scaleSteps: steps,
scaleStepWidth: Math.ceil(max / steps),
scaleStartValue: 0,
scaleShowVerticalLines: true,
scaleShowGridLines : true,
barShowStroke : true,
scaleShowLabels: true,
bezierCurve: false,
});
</script>
</body>
the direction of Chart.min.js
it turns out the chart.js doesn't work
this is part of views.py which is concern with chart.html
#main.route('/chart', methods=['GET', 'POST'])
def chart():
labels = ["January","February","March","April","May","June","July","August"]
values = [10,9,8,7,6,4,7,8]
return render_template('chart.html', values=values, labels=labels)
I doubt if the js was not referenced correctly and there was something wrong with the chart.html.
I had a similar problem. It was solved by replacing labels and data parts with
{{labels | tojson}}
{{values | tojson}}
if they are lists.
I found the answer here
Related
I have a Razor application that generates three columns of data to use in a chart graph. The page and javascript to do that looks like this:
<div><canvas id="myChart"></canvas></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var Maanden = [];
var Totalen = [];
#foreach (var m in Model.Grafieks)
{
#:Maanden.push("#m.maand" + "-" + "#m.jaar");
#:Totalen.push(#m.Total);
}
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: Maanden,
datasets: [
{ label: 'Facturen €',
data: Totalen,
backgroundColor: 'rgb(255, 255, 132)',
borderColor: 'rgb(255, 99, 132)',
borderWidth: 1,
}
]
},
});
</script>
Problem is that the labels are displayed OK but the data is off. Every second column is empty and its data pushed to the next column:
Chrome says:
Is there something wrong pushing the data into the arrays?
I had to convert the comma in decimal Totalen to a period!
#foreach (var m in Model.Grafieks)
{
#:Maanden.push("#m.maand" + "-" + "#m.jaar");
<text>bedrag = parsePotentiallyGroupedFloat("#m.Total");</text>
#:Totalen.push(bedrag);
}
function parsePotentiallyGroupedFloat(stringValue) {
stringValue = stringValue.trim();
var result = stringValue.replace(/[^0-9]/g, '');
if (/[,\.]\d{2}$/.test(stringValue)) {
result = result.replace(/(\d{2})$/, '.$1');
}
return parseFloat(result);
}
The function "parsePotentiallyGroupedFloat" is from here: Convert String with Dot or Comma as decimal separator to number in JavaScript
EDITED
I have a code to show a html in wxPython WebView but it just load the html without the css and javascript inside the html file. Here is my code.
gui.py
class MainFrame(wx.Frame):
def __init__( self, parent ):
wx.Frame.__init__ ( self, parent, id = wx.ID_ANY, title = u"PlagDetect", pos = wx.DefaultPosition, size = wx.Size( 493,389 ),
self.htmlSummary = wx.html2.WebView.New(self)
page = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summary</title>
</head>
<body>
<h1>Summary</h1>
<div id="piechart"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['TV', 4],
['Gym', 2],
['Sleep', 8]
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'My Average Day', 'width':550, 'height':400};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</body>
</html>
"""
summary.htmlSummary.SetPage(page, "")
I've found the answer to create Pie Chart in other way with PieCtrl instead of using WebView, thanks to mr #Rolf of Saxony . The answer is written below.
In answer to your comment, "is there any other way to create a pie chart in wxpython", yes, see: https://wxpython.org/Phoenix/docs/html/wx.lib.agw.piectrl.PieCtrl.html
At it's simplest:
import wx
import wx.lib.agw.piectrl
from wx.lib.agw.piectrl import PieCtrl, PiePart
class Frame(wx.Frame):
def __init__(self, parent):
wx.Frame.__init__ (self, parent, -1, "Simple Pie Chart")
panel = wx.Panel(self, -1, size=(650,650))
# Create A Simple PieCtrl With 3 Sectors
self._pie = PieCtrl(panel, -1, wx.DefaultPosition, wx.Size(180,270))
self._pie.GetLegend().SetTransparent(True)
self._pie.GetLegend().SetHorizontalBorder(10)
self._pie.GetLegend().SetWindowStyle(wx.STATIC_BORDER)
self._pie.GetLegend().SetLabelFont(wx.Font(10, wx.FONTFAMILY_DEFAULT,
wx.FONTSTYLE_NORMAL,
wx.FONTWEIGHT_NORMAL,
False, "Courier New"))
self._pie.GetLegend().SetLabelColour(wx.Colour(0, 0, 127))
self._pie.SetHeight(10)
self._pie.SetAngle(0.35)
part = PiePart()
part.SetLabel("Label_1")
part.SetValue(300)
part.SetColour(wx.Colour(200, 50, 50))
self._pie._series.append(part)
part = PiePart()
part.SetLabel("Label 2")
part.SetValue(200)
part.SetColour(wx.Colour(50, 200, 50))
self._pie._series.append(part)
part = PiePart()
part.SetLabel("Label 3")
part.SetValue(50)
part.SetColour(wx.Colour(50, 50, 200))
self._pie._series.append(part)
self.Show()
app = wx.App()
frame = Frame(None)
app.MainLoop()
After a tiny clean up of your posted code, it appears to work well. Although, I don't see any css, the javascript section works
Note: I run on Linux
import wx
import wx.html2
class MainFrame(wx.Frame):
def __init__( self, parent ):
wx.Frame.__init__ ( self, parent, id = wx.ID_ANY, title = u"PlagDetect", pos = wx.DefaultPosition, size = wx.Size( 600,450 ))
self.htmlSummary = wx.html2.WebView.New(self)
page = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summary</title>
</head>
<body>
<h1>Summary</h1>
<div id="piechart"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['TV', 4],
['Gym', 2],
['Sleep', 8]
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'My Average Day', 'width':550, 'height':400};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</body>
</html>
"""
self.htmlSummary.SetPage(page, "")
if __name__ == "__main__":
app = wx.App()
frame_1 = MainFrame(None)
frame_1.Show()
app.MainLoop()
I am working on displaying weather info received from a weather station to display as live chart on my web page. I am using charts.js library to render weather data that's fetched from the weather station as JSON data.
In The code, function loadChart() fetched the json data about one field from weather station i.e. 'Humidity' and passes it (as int) to dspChrt(hum) to render the graph.
The main task to do in dspChrt(hum) method that renders the graph to put the data received from laodChrt() in an array that is updated each minute to use it as parameter to display live weather data as a line graph.
As the weather station updates data each minute, I am using setInterval(loadChart, 60000) method to fetch updated json data each minute.
I am following this tutorial that uses this method I am trying to implement.
[Chart.js] little update example
But it's not working though.
Here is my code:
<html>
<head>
<meta charset="utf-8">
<title>Weather Update</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
function dspChrt(hum[]) { // to be called by loadChart() to render live chart
var ctx = document.getElementById('myChart').getContext('2d');
var N = 10;
for(i=0; i<N; i++)
hum.push(0);
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'Humidity',
data: hum, // json value received used in method
backgroundColor: "rgba(153,255,51,0.4)"
}, {
label: 'Temprature',
data: [2, 29, 5, 5, 2, 3, 10],
backgroundColor: "rgba(255,153,0,0.4)"
}]
}
});
}
</script>
<script>
var myVar = setInterval(loadChart, 60000);
function loadChrt() { //fetches json data & calls dspChart() to render graph
var wData, hum;
var requestURL = 'https://cors.io/?http://api.holfuy.com/live/?s=759&pw=h1u5l4kka&m=JSON&tu=C&su=m/s'; //URL of the JSON data
var request = new XMLHttpRequest({
mozSystem: true
}); // create http request
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
wData = JSON.parse(request.responseText);
hum = wData.humidity;
console.log("wData: " + wData);
console.log("hum: " + hum);
dspChrt(hum);
}
}
request.open('GET', requestURL);
request.send(); // send the request
//dspChrt(hum);
}
</script>
</head>
<body onload="loadChart();">
<div class="container">
<h2>Weather Update</h2>
<div>
<canvas id="myChart"></canvas>
</div>
</div>
</body>
</html>
You have typo in the for function name loadChart.
The variable declarations and function definitions are needed to be added before being used.
Reduced the length of array to 7 instead of 10.
Here is updated code snippet. I've added the temperature as well. ;)
var humArray = [];
var temArray = [];
var N = 7;
for (i = 0; i < N; i++) {
humArray.push(0);
temArray.push(0);
}
function loadChart() { //fetches json data & calls dspChart() to render graph
var wData, hum, tem;
var requestURL = 'https://cors.io/?http://api.holfuy.com/live/?s=759&pw=h1u5l4kka&m=JSON&tu=C&su=m/s'; //URL of the JSON data
var request = new XMLHttpRequest({
mozSystem: true
}); // create http request
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
wData = JSON.parse(request.responseText);
hum = wData.humidity;
tem = wData.temperature;
humArray.shift();
humArray.push(hum);
temArray.shift();
temArray.push(tem);
dspChrt(humArray, temArray);
}
}
request.open('GET', requestURL);
request.send(); // send the request
//dspChrt(hum);
}
var myVar = setInterval(loadChart, 60000);
function dspChrt(humArray, temArray) { // to be called by loadChart() to render live chart
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'Humidity',
data: humArray, // json value received used in method
backgroundColor: "rgba(153,255,51,0.4)"
}, {
label: 'Temprature',
data: temArray,
backgroundColor: "rgba(255,153,0,0.4)"
}]
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body onload="loadChart();">
<div class="container">
<h2>Weather Update</h2>
<div>
<canvas id="myChart"></canvas>
</div>
</div>
</body>
Hope it helps.
I am new to SAPUI5 and I have assignment to display row index (consecutive numbering) in table (sap.ui.table.Table). For Example, I have this data in table:
Dente Al
Friese Andy
Mann Anita
and so on..
I want it to have column with row index, (preferably that will count from 1 to 3 even if rows are filtered/sorted):
1 Dente Al
2 Friese Andy
3 Mann Anita
Is there any UI component or some rendering callback or similar that will help me solve this problem in SAPUI5 manner?
Here is the code example:
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
</head>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.commons,sap.ui.table"
data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"sap.ui.demo.wt": "./"
}'>
</script>
<script>
sap.ui.getCore().attachInit(function() {
//Define some sample data
var aData = [
{lastName: "Dente", name: "Al"},
{lastName: "Friese", name: "Andy"},
{lastName: "Mann", name: "Anita"},
{lastName: "Schutt", name: "Doris"},
{lastName: "Open", name: "Doris"},
{lastName: "Dewit", name: "Kenya"}
];
//Create an instance of the table control
var oTable2 = new sap.ui.table.Table({
visibleRowCount: 7,
firstVisibleRow: 3
});
//Define the columns and the control templates to be used
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Last Name"}),
template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "First Name"}),
template: new sap.ui.commons.TextField().bindProperty("value", "name"),
width: "200px"
}));
//Create a model and bind the table rows to this model
var oModel2 = new sap.ui.model.json.JSONModel();
oModel2.setData({modelData: aData});
oTable2.setModel(oModel2);
oTable2.bindRows("/modelData");
//Initially sort the table
oTable2.sort(oTable2.getColumns()[0]);
//Bring the table onto the UI
oTable2.placeAt("content");
});
</script>
<body class="sapUiBody" id="content">
</body>
</html>
Another Solution (besides one answered):
This solution is based on modifying table rows directly. Although modifying model is preferable, our current project circumstances might not allow model editing:
Add Index column:
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Index"}),
template: new sap.ui.commons.TextView({
text: "12"
}),
width: "200px"
}));
After binding was successful (or in onAfterRendering event in controller), use following code:
for (var i = 0, len = oTable2.getRows().length; i < len; i++){
var row = oTable2.getRows()[i];
var firstControl = row.getCells()[0];
firstControl.setText(row.getIndex()+1);
};
If you are using controller/jsview, make sure to give id to your table with createId method in jsview and to get component in controller by using byId method.
This can be done without having to add a "rowIndex" property to the model, but instead by using a formatter function which gets the index from the BindingContext path (which in this example would look like "/modelData/x" where x is the index of the item in the model).
Please see the modified code below. Note the use of the formatRowNumber function.
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="utf-8"/>
</head>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.commons,sap.ui.table"
data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"sap.ui.demo.wt": "./"
}'>
</script>
<script>
sap.ui.getCore().attachInit(function() {
//Define some sample data
var formatRowNumber = function(val) {
if(!this.getBindingContext()) return null;
var index = this.getBindingContext().getPath().split("/")[2];
// (an example of path value here is "/modelData/0")
return parseInt(index) + 1;
};
var aData = [
{lastName: "Dente", name: "Al"},
{lastName: "Friese", name: "Andy"},
{lastName: "Mann", name: "Anita"},
{lastName: "Schutt", name: "Doris"},
{lastName: "Open", name: "Doris"},
{lastName: "Dewit", name: "Kenya"}
];
//Create an instance of the table control
var oTable2 = new sap.ui.table.Table({
visibleRowCount: 7,
firstVisibleRow: 3
});
//Define the columns and the control templates to be used
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Index"}),
template: new sap.ui.commons.TextView().bindProperty("text", {path: '', formatter:formatRowNumber}),
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Last Name"}),
template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "First Name"}),
template: new sap.ui.commons.TextField().bindProperty("value", "name"),
width: "200px"
}));
//Create a model and bind the table rows to this model
var oModel2 = new sap.ui.model.json.JSONModel();
oModel2.setData({modelData: aData});
oTable2.setModel(oModel2);
oTable2.bindRows("/modelData");
//Initially sort the table
oTable2.sort(oTable2.getColumns()[0]);
//Bring the table onto the UI
oTable2.placeAt("content");
});
</script>
<body class="sapUiBody" id="content">
</body>
</html>
See the screenshot below:
Please find the updated function code hope this helps
sap.ui.getCore().attachInit(function() {
//Define some sample data
var aData = [
{lastName: "Dente", name: "Al"},
{lastName: "Friese", name: "Andy"},
{lastName: "Mann", name: "Anita"},
{lastName: "Schutt", name: "Doris"},
{lastName: "Open", name: "Doris"},
{lastName: "Dewit", name: "Kenya"}
];
//Create an instance of the table control
var oTable2 = new sap.ui.table.Table({
visibleRowCount: 7,
firstVisibleRow: 3
});
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Index"}),
template: new sap.ui.commons.TextView().bindProperty("text", "rowIndex"),
width: "200px"
}));
//Define the columns and the control templates to be used
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Last Name"}),
template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "First Name"}),
template: new sap.ui.commons.TextField().bindProperty("value", "name"),
width: "200px"
}));
function fnAppenData(count,data, objName){
return Array.apply(null, Array(count)).map(function(obj, i) {
var obj = data[i];
var name = data[i][objName];
data[i][objName] = (i + 1) + " " + name;
data[i]["rowIndex"] = (i + 1);
var returndata = data[i];
return returndata;
//return {name: names[i % names.length] + i};
});
}
//Create a model and bind the table rows to this model
var oModel2 = new sap.ui.model.json.JSONModel(fnAppenData(aData.length, aData, "lastName"));
oModel2.setData({modelData: aData});
oTable2.setModel(oModel2);
oTable2.bindRows("/modelData");
//Initially sort the table
oTable2.sort(oTable2.getColumns()[0]);
//Bring the table onto the UI
oTable2.placeAt("content");
});
sample output:
I am getting dynamically generated data from my Raspberry PI in .csv format and I want to make a webpage for my institute to analyze the waveform of the output . The main feature of this graph is that the graph should auto-update according to the modified data. How should I go about making this?
I am assuming that the solution you are looking for must work in HTML 5 and JavaScript where there is NO server side processing. The raspberry pi posts a file to the server.
We are using morris charts which is JavaScript library
http://morrisjs.github.io/morris.js/
Morris uses a json format
1: read the csv file
2: convert the csv data to a json object
3: initialise the chart
try this example csv data
"elapsed","value",b
"Oct-12",24,2
"Oct-13",34,22
"Oct-14",33,7
"Oct-15",22,6
"Oct-16",28,17
"Oct-17",60,15
"Oct-18",60,17
"Oct-19",70,7
"Oct-20",67,18
"Oct-21",86,18
"Oct-22",86,18
$(document).ready(function() {
$.ajax({
url: "linechartdata.csv",
success: function(data) {
processData(data)
}
});
});
function processData(data) {
var record_num = 3; // or however many elements there are in each row
var dataLines = data.split(/\r\n|\n/);
var entries = dataLines[0].split(',');
var records = [];
var headers = entries.splice(0, record_num);
console.log(dataLines.length)
for (var i = 1; i < dataLines.length; i++) {
var obj = dataLines[i].split(',');
if (obj.length == headers.length) {
var tarr = [];
for (var j = 0; j < headers.length; j++) {
//doing it this way to get strings and numbers
var field01;
var field02;
var field03;
if (j == 0) {
field01 = obj[j]
}
if (j == 1) {
field02 = obj[j]
}
if (j == 2) {
field03 = obj[j]
}
var o = {
elapsed: field01,
value: field02,
b: field03
}
records.push(o);
}
}
}
initChart(records)
}
function initChart(records) {
var chart = Morris.Line({
element: 'morris-chart-network',
data: records,
axes: false,
xkey: 'elapsed',
ykeys: ['value', 'b'],
labels: ['Download Speed', 'Upload Speed'],
yLabelFormat: function(y) {
return y.toString() + ' Mb/s';
},
gridEnabled: false,
gridLineColor: 'transparent',
lineColors: ['#5b6b79', '#a5a5a5'],
lineWidth: [2, 1],
pointSize: [0, 2],
fillOpacity: .7,
gridTextColor: '#999',
parseTime: false,
resize: true,
behaveLikeLine: true,
hideHover: 'auto'
});
};
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Morris Chart</title>
</head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<body>
<div>Morris Chart</div>
<div id="morris-chart-network" style="width:800px;height:600px">
</div>
<div>
example
</div>