I'd like to insert a line chart next to the globe in cesium. Any idea how to do this? I've seen some examples online.

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

4. The Cesium version you’re using, your operating system and browser.

2

Can you post the examples you’ve found here? The easiest way would be just to create an HTML element on top of the Cesium canvas. So there’s nothing special you need to do with CesiumJS to do this. Just create your container/element and set it to be displayed on top of the canvas or next to it with CSS.

3

I have code that generates the chart successfully in a stand alone .html file. However when I add that code to the HTML & CSS window of the Cesium demo Viewer it doesn’t work. The code to generate the chart in html is attached (“dynamic-chart-js_102319_test.html”). I inserted that html code in the CSS window using the method in “_CSS-HTML_102519_cleanLevels.html” ) attached but no luck so far.

dynamic-chart-js_102319.html (3.7 KB)

(Attachment _CSS-HTML_102519_cleanLevels.html is missing)

4

1. A concise explanation of the problem you’re experiencing.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

4. The Cesium version you’re using, your operating system and browser.

5

Are you getting any errors? If so, what are the errors saying?

It might be easier for the community to debug the project if you have a link set up on Glitch (like the getting started tutorial uses https://cesium.com/docs/tutorials/getting-started/) or CodePen or something similar.

6

In the Cesium JavaScript code window, say the variable chart is not defined.
I attempt to define the chart variable like this:

var chart = new Chart(ctx, { …

However I don’t know how to reference the Chart.js file that I believe will aid in defining the “chart” variable.

I tried to reference Chart.js on the Cesium HTML & CSS window but the Cesium JavaScript window apparently doesn’t “see” the Chart.js file it needs to define the ‘chart’ variable.

I don’t know how to post the code to Cesium or Glitch. I’ll look into it again.

Please help. Job on the line.

7

Are you writing your code in Sandcastle? (https://sandcastle.cesium.com/index.html?) I would recommend doing it locally (or in online environments like CodePen or Glitch) that make it easier to load external libraries.

The error you’re getting sounds like an error with using ChartJS and correctly importing it. You might have more luck looking up general JavaScript resources for doing this since this isn’t specific to CesiumJS.

8

Thanks, I’m taking a different approach now.

I’m trying to send Cesium scenario clock updates to an
html file, EXTERNAL to the Cesium Sandcastle viewer window API.

The external html file builds a line chart
that I want to update dynamically as the Cesium scenario time evolves.

I open the external html file from the
Cesium Viewer JavaScript code panel in Edge or Chrome. I then attempt to send
time updates to javascript code in the html file for the window I just opened,
in order to update the line chart.

It’s not working.

I’ve tried using local storage to send
new clock times to the external window javascript. The data is getting there
but I can’t get it to update regularly or in sync with the Cesium
visualization.

If you have any ideas please let me know.

9

Is your chart and your CesiumJS viewer on different HTML pages? That makes it hard to communicate between them. Why not just have them both on the same webpage?