CODEWITHSUNDEEP
javascriptchartselectronchart.js
Daniel Dantas
Daniel Dantas

Reputation: 165

How can I configure Chart.js in a Electron app?

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:

  1. I've installed chart.js with npm install chart.js --save which we can find in the official chart.js documentation (https://www.chartjs.org/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.

Upvotes: 3

Views: 5132

Answers (3)

Michał Zych
Michał Zych

Reputation: 149

Update for electron 21.2.0.

  1. Download chart.js module from npm

  2. Modify Index.html:

  3. 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'">

  4. Now we can use chart.js as usual.

  5. I only have no idea how to set custom width/height of my chart ):

Demo code is available on: https://github.com/zdzmzych/electronNoiseAnalyzer

Upvotes: 0

Daniel Dantas
Daniel Dantas

Reputation: 165

Update:

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.

Upvotes: 4

user10361591
user10361591

Reputation: 

<!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.

Upvotes: 0

Related Questions