Wondering what would be the best way to incorporate a basic little chart (done in Chart.js) into Hype? I tried to make this into a function within Hype but my skills are not there yet. I am just a beginner at Javascript. Where does the link to the library go? Any help would be so much appreciated.indexTest.html.zip (1.1 KB)
The absolute easiest way would be:
- Choose the Elements toolbar items and insert a HTML Widget
- Click the little pencil icon to edit the code of the new HTML Widget element
- Paste the contents of the indexTest.html document into the editor that pops up
You’ll see the chart, and can then resize and position with how you see fit.
1 Like
Personally I would do it this way. which lends itself to be easier to edit etc…
1, using edit head HTML via the document inspector , add the chart.js link to the head file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
2 , add an element to the scene. and give it the id ‘container’
3, create a new hype function and add this code:
var container_ = hypeDocument.getElementById('container')
//-- CREATE AND ADD A CANVAS ELEMENT TO THE CONTAINTER ELEMENT
var canvas_ = document.createElement("CANVAS");
canvas_.id = "myChart"
container_.appendChild(canvas_);
//--
var massPopChart = new Chart(myChart, { // The type of chart we want to create
type: 'doughnut', //bar, horizontalBar, pie, line, doughnut, radar, polarArea
data: {// The data for our dataset
labels: ['TamTam', 'Jeff', 'Mum', 'Dad', 'Heath', 'June', 'July'],
datasets: [{
label:"Tammy's chart",
//backgroundColor: 'rgb(255, 99, 132)',
backgroundColor: [
'rgba(255, 99, 132)',
'rgba(66, 135, 245)',
'rgba(255, 99, 132)',
'rgba(66, 135, 245)',
'rgba(255, 99, 132)',
'rgba(66, 135, 245)',
'rgba(255, 99, 132)'
],
data: [15, 10, 5, 2, 20, 30, 25] }]
},
// Configuration options go here
options: {}
});
Now set the function to run on scene load.
chartjs_mhv1.hype.zip (12.9 KB)
(You can set it to run on prepare for display but note the chart load animation will already be done when the scene loads so you will not see the animation.)
if it's just a simple doughnut ... you can do this easily in hype 4 using the pathtool.
1 Like
Thanks all, will give these all a try!
2 Likes
Ultimately what I would like to achieve is to have a chart inside of hype that uses data from an external .json file that updates a chart in Hype dynamically.
Sorry I should have lead with that! Mark’s solution works well with what I have.
Can anyone point me in the right direction to achieve something like this?
Do you think Chart.js is the right approach? Hans the charts in your sample are just for the visuals, Correct? You can’t make a chart in Hype that actually contains data can you?
yes (there's always a way, but yes ...)
Wow, I love this. Ultimately I would like to run the charts dynamically from an external .json file but in the mean time what a lovely easy way to make a simple animation!
great and useful idea @MarkHunte
on my machine the js within easingfunction-editor leads to errors when using ‘let’ and ‘catch’ without parameter. btw this easingfunction-editor is still a pain 
or maybe i miss something 
an edit-button would be great in this ui-window
1 Like
Thanks.
I do not get errors with let or catch on any of the machines I have tried it on
function (t, start, dur) {
try{
let plc = window['chart'] || window['index' ]
plc('elm2',t,dur )
} catch {
}
return t / dur;
}
What did you have?.
Yep, I thought we had or were going to get where we could expand the edit area.
opening your document unchanged displays 'Javascript ist ungültig' (JS is invalid) within the window of the easingfunction.
changing let and catch-parameter -> works @jonathan odd¿!
Could that be a translation thing.
What version of macOS are you running? let is newer JS syntax, so I'd guess if you are running 10.10 Yosemite or 10.11 El Capitan it might not work and think it is an error.
yeah it's old 
But why does this depend on the OS-version¿
it's not a problem on any other hypeeditorwindow ...like function or head
ah: and it even does not run on export/preview
Long answer…
Safari’s relationship to the OS is a bit complex; basically the OS ships with a version of Safari/WebKit built-in, but can also ship a newer version of Safari not tied to the OS between updates (or after OS updates are complete). So on 10.11 it is probably that the system WebKit is version 9, but they did ship Safari 10 for that OS which has let keyword support.
At one point in time Hype did use whichever was the latest version, but this was really a hack that had the possibility to cause issues with Hype. I think we started solely linking to the system version of WebKit in some v3.x.x release.
Thus it is possible for something to work in Safari (which uses WebKit version 10) but not in Hype (which uses WebKit version 9).
Each case and how they are handled is different.
-
Head HTML - Hype does no validation here, but will try to run the code within the editor. If you use a
letin a<script>tag here it will most likely just silently fail, but you should note that this may affect your editing experience where your code is meant to manipulate the styles somehow (like loading a font or dynamically altering CSS, etc.). - JavaScript functions - At export, Hype will validate the syntax to see if there is a problem and throws a browser compatibility warning that there’s going to be a syntax error. However these can be ignored, so the code will still try to run in the browser. If the syntax error were to be real, Hype’s runtime will insulate from it and continue to run without the function being installed.
- Math Equation Timing Functions - because these must run in the editor, Hype tests to ensure the function is free of syntax errors. If it isn’t, Hype will not even attempt to export it. It probably would have made some sense to still try to export it and run in the browser, but we didn’t really think about syntax differences since this rarely changes!
1 Like