Advice on how to use Chart.JS with C3 Scripting

Post reply
0 favourites
  • 9 posts
From the Asset Store
Jumpy Hedgehog C3 HTML5 Casual Game
$8 USD
Jump on the mole rats and see how far you can go!
01smile's avatar
01smile

  • Does anyone know if it's possible to use Chart.JS with the new scripting tools?

    The bit i'm having trouble with is creating a Canvas element to draw the chart to, I just don't know where to create this html element or how it interacts with the C3 app itself.

    <canvas id="myChart" width="400" height="400"></canvas>

    I know there's a Drawing Canvas plugin but how to access that through code?

    Any ideas?

  • The "drawing canvas" plugin is implemented in "WebGL". Whereas Chart.js uses the "canvas 2D" API. Both WebGL and canvas 2D utilise the HTML Canvas element, but in different modes. You cannot use more than 1 mode with a canvas, or swap between them.

    As such the best way to use Chart.js would be to create a second canvas for your chart and float it over your game. There are several core plugins ( button, iframe ) that use this technique with HTML elements.

    The example that Chart.js gives has the canvas within the HTML file, and then uses JS to get a reference to the canvas. Instead of this you can create a new canvas element with JS and insert it into the document programmatically. I've adjusted the example to demonstrate how you can do this. 

    // create the html <canvas> element
var canvas = document.createElement('canvas');
// set the size of the <canvas> element
canvas.width = 400;
canvas.height = 400;
// insert the <canvas> element into the <body> element
document.body.appendChild(canvas);
// set the canvas to "2D" mode and get the rendering context from it
var ctx = canvas.getContext('2d');
// create the chart using the rendering context
var myChart = new 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
 }
 }]
 }
 }
});

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • that is great stuff to know, some of these charting libraries also require you to attach a css file as well. just including the css file in the project does not attach it to the page. in a case like what is the recommended approach?

    should we append to the head element when the pages loads up? or does construct have a way to include any css file import as a style tag?

  • I don't think we have a method of specifically loading a CSS file yet, although it's probably something that could be done quite easily through the asset manager. Given that it's a less common requirement I don't think we will add a folder for stylesheets like we have for scripts that loads the files automatically ( unless lots of people want it ).

    There is a method for getting a URL from the asset manager ( the URL changes depending on the platform so it's important to use the asset manager here ) with that you can import the stylesheet using the DOM API's. Like so 

    async function loadCSSFile (runtime, localURL) {
	const url = await runtime.assets.getProjectFileUrl(localURL);
	const element = document.createElement('link');
	element.rel = "stylesheet";
	element.type = "text/css";
	element.href = url;
	document.head.appendChild(element);
}

loadCSSFile(runtime, "style.css");

  • so something interesting that happens is if you have chart.js and chart.css these guys get nested togetehr

    now depending on what you imported first it will get nested in the scripts folder or the project folder.

    not sure if this is bug or intentional.

    drive.google.com/open

    i have attached a gif of the behavior. it does not seem to have any major impact that i am aware of.

  • Mmmm I'd call it an unexpected side effect of the grouping system. It's supposed to be for files that have the same content, but different formats ( like audio in different encodings ).

    As it's putting non-script files into the script folder I'd say it wasn't correct. File an issue for it, we should probably fix that.

  • here is the link to the issue

    https://github.com/Scirra/Construct-3-bugs/issues/3104

  • Thanks for the help that works well, I didn't think to use position absolute to drop another canvas on top.

  • Given that it's a less common requirement I don't think we will add a folder for stylesheets like we have for scripts that loads the files automatically ( unless lots of people want it ).

    As someone who constantly tweaks the HTML output to add external style sheets and style around elements, this would save some post-export editing.

Post reply
  • 9 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)