Project

General

Profile

How can I use chart.js in Wt

Added by Rene A about 5 years ago

here is the chart.js site

https://www.chartjs.org/samples/latest/

I tried this below to add the files to wt application

app->require("docroot/require.js");
app->require("docroot/chart.js");

but I am getting errror in the browser

Uncaught Error: Module name "core/core.js" has not been loaded yet for context: _. Use require([])
https://requirejs.org/docs/errors.html#notloaded
at makeError (require.js:417)
at Object.localRequire [as require] (require.js:1685)
at requirejs (require.js:2046)
at chart.js:4
favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)


Replies (7)

RE: How can I use chart.js in Wt - Added by Wim Dumon about 5 years ago

Hello,

I didn't test this or checked chart.js documentation, but what you pass to require should be a URL, so it's weird to see 'docroot' included in the path.

Look in the network tab of your browser's debugger, are there any 404 or other errors there?

RE: How can I use chart.js in Wt - Added by Rene A about 5 years ago

Hello Wim,

Thanks for the reply.

I have tried to use url like

app->require("hl/chart.js/dist/Chart.bundle.js");

I am still having issue making it work

Can you try and see how to use it on on a WT page

[[[https://www.chartjs.org/docs/latest/]]]

RE: How can I use chart.js in Wt - Added by Rene A about 5 years ago

I am using dist/Chart.bundle.js

RE: How can I use chart.js in Wt - Added by Rene A about 5 years ago

Rene A wrote:

I am using dist/Chart.bundle.js

I have tried to incorporate chartjs mimicking WCartesianChart.C WCartesianChart.js

Here s a google share link to the source code zp: [[[https://drive.google.com/open?id=1-6Vu2__kC5Fabf59SU7sSEoM2VO8iovy]]]

It is used in the wt-master\wt-master\examples\charts\ChartsExample.c

I am trying to make my own wt-master\wt-master\src\js\WChartjsChart.js as below.

Please help me get it right. The page is currently having error. Not loading at all.

@

WT_DECLARE_WT_MEMBER

(1, JavaScriptConstructor, "WChartjsChart",

// target: the WPaintedWidget JavaScript obj, with:

// repaint

// canvas

// config: the initial configuration (can be overridden with updateConfig)

// isHorizontal (if orientation() == Horizontal)

// xTransform

// yTransform

// area (WRectF describing render area)

// modelArea (WRectF describing model area)

// maxZoom

// rubberBand

// zoom (bool)

// pan (bool)

// crosshair (bool)

// followCurve (int, --1 for disabled)

// series {modelColumn: series ref,...}

//

function(APP, widget, target, config) {

jQuery.data(widget, 'cobj', this);

var self = this;

var WT = APP.WT;

self.config = config;

var overlay = jQuery.data(widget, 'oobj');

var ctx = overlay.getContext('2d');

ctx.clearRect(0, 0, overlay.width, overlay.height);

ctx.save();

// target.combinedTransform = combinedTransform;

// this.mouseMove = function(o, event) {

// }

// this.mouseDown = function(o, event) {

// };

// this.mouseUp = function(o, event) {

// };

// this.mouseDrag = function(o, event) {

// };

function init() {

c = document.createElement("canvas");

c.setAttribute("width", target.canvas.width);

c.setAttribute("height", target.canvas.height);

c.style.position = 'absolute';

c.style.display = 'block';

c.style.left = '0';

c.style.top = '0';

if (window.MSPointerEvent || window.PointerEvent) {

c.style.msTouchAction = 'none';

c.style.touchAction = 'none';

}

target.canvas.parentNode.appendChild©;

overlay = c;

jQuery.data(widget, 'oobj', overlay);

var ctx = overlay.getContext('2d');

const charjs = require('./chartjs/dist/Chart.bundle.js');

var myChart = new charjs.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

}

}]

}

}

});

});

@

RE: How can I use chart.js in Wt - Added by Roel Standaert about 5 years ago

Are you in the middle of updating this, maybe to a newer version of Wt or something, because this doesn't even compile in the current state?

It seems to me also that your brackets at the end of the JS should be:

    }); /* close new charjs.Chart call */
  } /* close init() */
}); /* close function() and WT_DECLARE_WT_MEMBER */

RE: How can I use chart.js in Wt - Added by Rene A about 5 years ago

Hi Roel

Thanks for your update.

My original code, still using an old version of wt, version 3.5..

I had to pull the code out and put it in something small to be able to upload it.

If you can include a valid implementation for WChartjsChart in any of your existing code to make it work, as proof of concept and share the script that will be great.

I am just trying to get Chartjs into Wt : [[[https://www.chartjs.org/samples/latest/]]]

Thanks,

Rene

RE: How can I use chart.js in Wt - Added by Rene A about 5 years ago

Rene A wrote:

Hi Roel

Thanks for your update.

My original code, still using an old version of wt, version 3.5..

I had to pull the code out and put it in something small to be able to upload it.

If you can include a valid implementation for WChartjsChart in any of your existing code to make it work, as proof of concept and share the script that will be great.

I am just trying to get Chartjs into Wt : [[[https://www.chartjs.org/samples/latest/]]]

Thanks,

Rene

Thanks, Roel.

Indeed the braces were wrong.

I correced that and the page no longer fail.

But now it remains for me to properly set up the chart script so it displays.

    (1-7/7)