I'm new to electron so I'm learning the basic configuration.
So, i want to implement chart.js in my electron app. The problem is: on my main page, the chart is simply a blank space... but with a look in the html inspector I can see the canvas created.
What I already did:
- I've installed chart.js with
npm install chart.js --savewhich we can find in the official chart.js documentation (.html).
My feeling tells me that I'm doing something wrong in the call for the chart library or something like that. My code is below:
<canvas id="myChart"></canvas>
<script>
const { chart } = require('electron-chartjs');
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {}
});
</script>
As you can see, I'm using the official example. The only addition was the const { chart } = require('electron-chartjs');. So, I believe I'm doing something wrong or ignoring some big step.
I'm new to electron so I'm learning the basic configuration.
So, i want to implement chart.js in my electron app. The problem is: on my main page, the chart is simply a blank space... but with a look in the html inspector I can see the canvas created.
What I already did:
- I've installed chart.js with
npm install chart.js --savewhich we can find in the official chart.js documentation (https://www.chartjs/docs/latest/getting-started/installation.html).
My feeling tells me that I'm doing something wrong in the call for the chart library or something like that. My code is below:
<canvas id="myChart"></canvas>
<script>
const { chart } = require('electron-chartjs');
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {}
});
</script>
As you can see, I'm using the official example. The only addition was the const { chart } = require('electron-chartjs');. So, I believe I'm doing something wrong or ignoring some big step.
3 Answers
Reset to default 4Update:
Here is the new code:
<canvas id="chart"></canvas>
<script>
var Chart = require('chart.js');
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {}
});
</script>
I had to require "chart.js", but i was requiring "electron-chart,js". And the canvas id was wrong.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
// ** entire Chart.js library **
</script>
<style>
</style>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
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: {{chartData}}
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(data);
</script>
</body>
</html>Notice the placeholder {{chartData}}. Also do note that you have to substitute in the actual script from the Chart.js file (you could link to the script file, but then you'll need a module that serves up static files)
var http = require('http');
var fs = require('fs');
http.createServer(function (req, response) {
fs.readFile('index.html', 'utf-8', function (err, data) {
response.writeHead(200, { 'Content-Type': 'text/html' });
var chartData = [];
for (var i = 0; i < 7; i++)
chartData.push(Math.random() * 50);
var result = data.replace('{{chartData}}', JSON.stringify(chartData));
response.write(result);
response.end();
});
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');We just substitute the placeholder with actual data.
Update for electron 21.2.0.
Download chart.js module from npm
Modify Index.html:
Add 'unsafe-inline' in meta
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'">Now we can use chart.js as usual.
I only have no idea how to set custom width/height of my chart ):
Demo code is available on: https://github./zdzmzych/electronNoiseAnalyzer