Related
I just learned to use google chart api to draw chart as follows:
Demo chart
The chart is now an html file named "demo_chart.html" whose code is:
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript", charset="utf-8">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number','Annual Compensation');
data.addColumn('number','count');
data.addColumn({type:"string",role:"tooltip", 'p':{'html': true}});
var a = [[10, 1, '0.3%'], [12, 2, '0.9%'], [14, 2, '1.6%'], [16, 4, '2.8%'], [18, 5, '4.3%'], [20, 14, '8.7%'], [22, 22, '15.5%'], [24, 40, '28.0%'], [26, 15, '32.6%'], [28, 28, '41.3%'], [30, 26, '49.4%'], [32, 22, '56.2%'], [34, 15, '60.9%'], [36, 17, '66.1%'], [38, 9, '68.9%'], [40, 17, '74.2%'], [42, 5, '75.8%'], [44, 14, '80.1%'], [46, 7, '82.3%'], [48, 3, '83.2%'], [50, 16, '88.2%'], [52, 6, '90.1%'], [54, 4, '91.3%'], [56, 3, '92.2%'], [58, 1, '92.5%'], [60, 3, '93.5%'], [62, 6, '95.3%'], [64, 2, '96.0%'], [66, 0, '96.0%'], [68, 1, '96.3%'], [70, 2, '96.9%'], [72, 1, '97.2%'], [74, 0, '97.2%'], [76, 0, '97.2%'], [78, 0, '97.2%'], [80, 1, '97.5%'], [82, 0, '97.5%'], [84, 1, '97.8%'], [86, 0, '97.8%'], [88, 0, '97.8%'], [90, 1, '98.1%'], [92, 0, '98.1%'], [94, 0, '98.1%'], [96, 0, '98.1%'], [98, 0, '98.1%'], [100, 1, '98.4%'], [102, 0, '98.4%'], [104, 0, '98.4%'], [106, 0, '98.4%'], [108, 0, '98.4%'], [110, 2, '99.1%'], [112, 0, '99.1%'], [114, 0, '99.1%'], [116, 0, '99.1%'], [118, 0, '99.1%'], [120, 1, '99.4%'], [122, 0, '99.4%'], [124, 0, '99.4%'], [126, 0, '99.4%'], [128, 0, '99.4%'], [130, 0, '99.4%'], [132, 0, '99.4%'], [134, 0, '99.4%'], [136, 0, '99.4%'], [138, 0, '99.4%'], [140, 1, '99.7%'], [142, 0, '99.7%'], [144, 0, '99.7%'], [146, 0, '99.7%'], [148, 0, '99.7%'], [150, 1, '100.0%']];
var b = HTML_format(a);
data.addRows(b);
var options = {
title: 'Demo Column Chart',
legend: { position: 'none' },
tooltip: {isHtml: true}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function HTML_format(a)
{
var b = [];
var scale = a[1][0] - a[0][0];
for(var i=0; i<a.length; i++)
{
var text;
if(i < a.length - 1)
{
text = "demo";
}
else
{
text = "demo";
}
b.push([a[i][0], a[i][1], text]);
}
return b;
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I want to embed the chart into another webpage and used iframe:
<tbody><tr><td class ='x text-center' style='align-items:center'><iframe src='demo_chart.html' style='width:900px;height:500px; border:0;max-width:100%' scrolling='no'></iframe></td><td class ='y' style=''><iframe src='demo_chart.html' style='width:900px;height:500px; border:0; max-width:100% ' scrolling='no'></iframe></td></tr></tbody>
It works well in my desktop but looks ugly in the mobile:
mobile_chart.
Could anyone help me to figure out how to correctly embed the html file so that it could be appropriately shown regardless of the width?
your problem seems to be that there is something wrong with your visualization options. You need to set the chartArea property to left:0 in your options.
After messing around with the properties I came up with these options: chartArea: {left: 0,top: 25}
so your options should look like:
var options =
{
title: 'Demo Column Chart',
legend: { position: 'none' },
tooltip: {isHtml: true},
chartArea: {left: 0,top: 25}
};
I would also suggest adding margin: auto; to your chart div to add the white space left on the main file:
<div id="chart_div" style="width: 900px; height: 500px;margin: auto;"></div>
so your demo_chart.html file should look something like this:
demo_chart.html
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript", charset="utf-8">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number','Annual Compensation');
data.addColumn('number','count');
data.addColumn({type:"string",role:"tooltip", 'p':{'html': true}});
var a = [[10, 1, '0.3%'], [12, 2, '0.9%'], [14, 2, '1.6%'], [16, 4, '2.8%'], [18, 5, '4.3%'], [20, 14, '8.7%'], [22, 22, '15.5%'], [24, 40, '28.0%'], [26, 15, '32.6%'], [28, 28, '41.3%'], [30, 26, '49.4%'], [32, 22, '56.2%'], [34, 15, '60.9%'], [36, 17, '66.1%'], [38, 9, '68.9%'], [40, 17, '74.2%'], [42, 5, '75.8%'], [44, 14, '80.1%'], [46, 7, '82.3%'], [48, 3, '83.2%'], [50, 16, '88.2%'], [52, 6, '90.1%'], [54, 4, '91.3%'], [56, 3, '92.2%'], [58, 1, '92.5%'], [60, 3, '93.5%'], [62, 6, '95.3%'], [64, 2, '96.0%'], [66, 0, '96.0%'], [68, 1, '96.3%'], [70, 2, '96.9%'], [72, 1, '97.2%'], [74, 0, '97.2%'], [76, 0, '97.2%'], [78, 0, '97.2%'], [80, 1, '97.5%'], [82, 0, '97.5%'], [84, 1, '97.8%'], [86, 0, '97.8%'], [88, 0, '97.8%'], [90, 1, '98.1%'], [92, 0, '98.1%'], [94, 0, '98.1%'], [96, 0, '98.1%'], [98, 0, '98.1%'], [100, 1, '98.4%'], [102, 0, '98.4%'], [104, 0, '98.4%'], [106, 0, '98.4%'], [108, 0, '98.4%'], [110, 2, '99.1%'], [112, 0, '99.1%'], [114, 0, '99.1%'], [116, 0, '99.1%'], [118, 0, '99.1%'], [120, 1, '99.4%'], [122, 0, '99.4%'], [124, 0, '99.4%'], [126, 0, '99.4%'], [128, 0, '99.4%'], [130, 0, '99.4%'], [132, 0, '99.4%'], [134, 0, '99.4%'], [136, 0, '99.4%'], [138, 0, '99.4%'], [140, 1, '99.7%'], [142, 0, '99.7%'], [144, 0, '99.7%'], [146, 0, '99.7%'], [148, 0, '99.7%'], [150, 1, '100.0%']];
var b = HTML_format(a);
data.addRows(b);
var options = {
title: 'Demo Column Chart',
legend: { position: 'none' },
tooltip: {isHtml: true},
chartArea: {left: 0,top: 25}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function HTML_format(a)
{
var b = [];
var scale = a[1][0] - a[0][0];
for(var i=0; i<a.length; i++)
{
var text;
if(i < a.length - 1)
{
text = "demo";
}
else
{
text = "demo";
}
b.push([a[i][0], a[i][1], text]);
}
return b;
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;margin: auto;"></div>
</body>
</html>
This should fix your problem.
I am trying to learn how to program OpenGL. Right now I am writing a program that draws to cubes. I have each cube stored in a separate VBO. This is the code for this.
void
init()
{
enum { Vertices, Colors, Elements, NumVBOs };
GLuint buffers[NumVBOs];
glGenVertexArrays(NumVAOs,VAO);
{
GLfloat vertices[][3] = {
{ -0.5, -0.5, -0.5 },
{ 0.5, -0.5, -0.5 },
{ 0.5, 0.5, -0.5 },
{ -0.5, 0.5, -0.5 },
{ -0.5, -0.5, 0.5 },
{ 0.5, -0.5, 0.5 },
{ 0.5, 0.5, 0.5 },
{ -0.5, 0.5, 0.5 }
};
GLfloat cubeColors[][3] = {
{ 0.0, 0.0, 0.0 },
{ 0.0, 0.0, 1.0 },
{ 0.0, 1.0, 0.0 },
{ 0.0, 1.0, 1.0 },
{ 1.0, 0.0, 0.0 },
{ 1.0, 0.0, 1.0 },
{ 1.0, 1.0, 0.0 },
{ 1.0, 1.0, 1.0 },
};
GLubyte indices[][4] = {
{ 0, 1, 2, 3 },
{ 4, 7, 6, 5 },
{ 0, 4, 5, 1 },
{ 3, 2, 6, 7 },
{ 0, 3, 7, 4 },
{ 1, 5, 6, 2 }
};
glBindVertexArray(VAO[Cube1]);
glGenBuffers(NumVBOs, buffers);
glBindBuffer(GL_ARRAY_BUFFER, buffers[Vertices]);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices,
GL_STATIC_DRAW);
glVertexPointer(3, GL_FLOAT, 0, BUFFER_OFFSET(0));
glEnableClientState(GL_VERTEX_ARRAY);
glBindBuffer(GL_ARRAY_BUFFER, buffers[Colors]);
glBufferData(GL_ARRAY_BUFFER,sizeof(cubeColors),cubeColors,GL_STATIC_DRAW);
glColorPointer(3,GL_FLOAT,0,BUFFER_OFFSET(0));
glEnableClientState(GL_COLOR_ARRAY);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, buffers[Elements]);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices,
GL_STATIC_DRAW);
}
{
GLfloat vertices2[][3] = {
{ -0.5, -0.5, -1.5 },
{ 0.5, -0.5, -1.5 },
{ 0.5, 0.5, -1.5 },
{ -0.5, 0.5, -1.5 },
{ -0.5, -0.5, -2.5 },
{ 0.5, -0.5, -2.5 },
{ 0.5, 0.5, -2.5 },
{ -0.5, 0.5, -2.5 }
};
GLfloat cubeColors2[][3] = {
{ 0.0, 0.0, 0.0 },
{ 0.0, 0.0, 1.0 },
{ 0.0, 1.0, 0.0 },
{ 0.0, 1.0, 1.0 },
{ 1.0, 0.0, 0.0 },
{ 1.0, 0.0, 1.0 },
{ 1.0, 1.0, 0.0 },
{ 1.0, 1.0, 1.0 },
};
GLubyte indices2[][4] = {
{ 0, 1, 2, 3 },
{ 4, 7, 6, 5 },
{ 0, 4, 5, 1 },
{ 3, 2, 6, 7 },
{ 0, 3, 7, 4 },
{ 1, 5, 6, 2 }
};
glBindVertexArray(VAO[Cube2]);
glGenBuffers(NumVBOs, buffers);
glBindBuffer(GL_ARRAY_BUFFER, buffers[Vertices]);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices2), vertices2,
GL_STATIC_DRAW);
glVertexPointer(3, GL_FLOAT, 0, BUFFER_OFFSET(0));
glEnableClientState(GL_VERTEX_ARRAY);
glBindBuffer(GL_ARRAY_BUFFER, buffers[Colors]);
glBufferData(GL_ARRAY_BUFFER,sizeof(cubeColors2),cubeColors2,GL_STATIC_DRAW);
glColorPointer(3,GL_FLOAT,0,BUFFER_OFFSET(0));
glEnableClientState(GL_COLOR_ARRAY);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, buffers[Elements]);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices2), indices2,
GL_STATIC_DRAW);
}
glEnable(GL_DEPTH_TEST);
}
When this is called in display()
glBindVertexArray[VAO[Cube1]];
glDrawElements(GL_QUADS, 24, GL_UNSIGNED_BYTE, BUFFER_OFFSET(0));
glBindVertexArray[VAO[Cube2]];
glDrawElements(GL_QUADS, 24, GL_UNSIGNED_BYTE, BUFFER_OFFSET(0));
The program only draws Cube2. However, if I insert
glBindVertexArray[VAO[Cube1]];
at the end of init(), it will draw Cube1 only instead.
Right now I am confused. I would like to be able to use VAOs for more complicated applications but am stuck at this point.
glBindVertexArray[VAO[Cube1]];
Should have been
glBindVertexArray(VAO[Cube1]);
I've been trying to display a model on my screen (a simple UVSphere from Blender). I first exported it to .fbx format and then transformed to .g3db format with gdx-conv-win32.exe. I have this code so far, but all it shows me is a blank black screen... it only works with the model found in this tutorial (an .obj model) https://xoppa.github.io/blog/loading-models-using-libgdx/
package com.mygdx.game.screens;
/.../ imports
public class GameScreen extends MenuScreens {
public Environment environment;
public PerspectiveCamera cam;
public CameraInputController camController;
public ModelBatch modelBatch;
public Model model;
public ModelInstance instance;
AssetManager manager = new AssetManager();
public boolean loading;
public Array<ModelInstance> instances;
public GameScreen(ProjectSurvival game){
super();
this.game = game;
modelBatch = new ModelBatch();
environment = new Environment();
environment.set(new ColorAttribute(ColorAttribute.AmbientLight, 0.4f, 0.4f, 0.4f, 1f));
environment.add(new DirectionalLight().set(0.9f, 0.9f, 0.9f, 20f, 20f, 20f));
environment.add(new PointLight().set(1, 1, 1, 20, 20, 20, 500));
instances = new Array<ModelInstance>();
cam = new PerspectiveCamera(67, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
cam.position.set(1f, 1f, 1f);
cam.lookAt(0,0,0);
cam.near = 1f;
cam.far = 300f;
cam.update();
camController = new CameraInputController(cam);
Gdx.input.setInputProcessor(camController);
manager = new AssetManager();
manager.load("ship.g3db", Model.class);
loading = true;
}
private void doneLoading() {
Model test = manager.get("ship.g3db", Model.class);
ModelInstance shipInstance = new ModelInstance(test);
instances.add(shipInstance);
loading = false;
}
#Override
public void show() {
}
#Override
public void render(float delta) {
//super.render(delta);
if (loading && manager.update()) {
doneLoading();
System.out.println("loaded");
}
camController.update();
Gdx.gl.glViewport(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT);
modelBatch.begin(cam);
modelBatch.render(instances, environment);
modelBatch.end();
}
#Override
public void resize(int width, int height) {
super.resize(width, height);
}
#Override
public void pause() {
}
#Override
public void resume() {
}
#Override
public void hide() {
}
#Override
public void dispose() {
super.dispose();
modelBatch.dispose();
model.dispose();
instances.clear();
manager.dispose();
}
}
There are several other similar topics, but none of them solves my problem... please I need help!
EDIT:
Here's my g3dj file ( I cut some parts of it cause it's extremely long):
{
"version": [ 0, 1],
"id": "",
"meshes": [
{
"attributes": ["POSITION", "NORMAL", "TEXCOORD0"],
"vertices": [
-0.724124, 0.035572, -0.598984, -0.742302, -0.159337, -0.650807, 0.028780, 0.420519,
-0.691568, 0.068115, -0.634070, -0.791498, -0.084201, -0.605335, 0.021021, 0.407816,
-0.694079, 0.034096, -0.634070, -0.878414, 0.254219, -0.404614, 0.026918, 0.405321,
// deleted (...)
-0.846887, -0.041603, -0.403719, -0.887509, -0.132389, -0.441267, 0.051316, 0.489956,
-0.826199, -0.040587, -0.445113, -0.867977, -0.072359, -0.491256, 0.049283, 0.474874,
-0.803523, -0.039472, -0.485435, -0.859127, -0.022919, -0.511185, 0.047232, 0.459797
],
"parts": [
{
"id": "Mesh_part1",
"type": "TRIANGLES",
"indices": [
0, 1, 2, 1, 0, 3, 4, 2, 5, 2, 4, 0,
2, 6, 7, 6, 2, 1, 5, 7, 8, 7, 5, 2,
0, 9, 3, 3, 9, 10, 9, 11, 10, 11, 9, 12,
9, 4, 13, 4, 9, 0, 12, 13, 14, 13, 12, 9,
// deleted (...)
3610, 3613, 3614, 137, 3614, 3613, 3614, 137, 133, 3606, 3612, 3596,
3612, 3606, 3613, 112, 3613, 3606, 3613, 112, 137, 3614, 3608, 3610,
3608, 3614, 3615, 3615, 3539, 3608, 3539, 3615, 3543, 133, 3615, 3614,
3615, 133, 134, 134, 3543, 3615, 3543, 134, 14
]
}
]
}
],
"materials": [
{
"id": "Material.001",
"ambient": [ 0.200000, 0.200000, 0.200000],
"diffuse": [ 0.800000, 0.800000, 0.800000],
"emissive": [ 0.000000, 0.000000, 0.000000],
"opacity": 0.000000,
"specular": [ 0.200000, 0.200000, 0.200000],
"shininess": 20.000000
}
],
"nodes": [
{
"id": "Sphere",
"rotation": [-0.707107, 0.000000, 0.000000, 0.707107],
"scale": [ 100.000000, 100.000000, 100.000000],
"translation": [ 0.000000, 101.334976, 0.000000],
"parts": [
{
"meshpartid": "Mesh_part1",
"materialid": "Material.001",
"uvMapping": [[]]
}
]
}
],
"animations": []
}
Since there is no accepted answer:
As described by #Xoppa In you file the opacity is set to zero, set it to 1.0000 in the gd3j file
"opacity": 0.000000
// TODO 1: find what is the property of the material in blender
// TODO 2: add to troubleshooting guide
Had the same problem but with converting LWO (Light Wave) objects to g3db / g3dj. Problem was that when LightWave is exporting to FBX format it doesn't add info about textures (I'm not actually sure if FBX format supports textures at all?). Then I switched exporting to .OBJ but again I had the problem that textures in png format are not supported. Only after using .jpg textures it started working. After that opacity was set correctly to 1. With textures it can't handle converter is setting opacity to 0.
I have a symbol tile with multiple keyframes. One of the keyframes has a dynamic text box with the instance name pTwo.
I want to change the text in pTwo to an empty string and have tried:
pTwo.text = String(""); //Atempt One
MovieClip.pTwo.text = String(""); //Attempt two
Any help would be appreciated. Thanks in advance
EDIT: Im making a tile game and using an array to make the map - my array is as follows:
public var myMap: Array = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 3, 2, 2, 2, 0, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 0, 1],
[1, 0, 2, 0, 2, 0, 0, 0, 0, 1],
[1, 0, 2, 2, 0, 3, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 2, 2, 0, 1],
[1, 0, 2, 0, 2, 0, 2, 0, 0, 1],
[1, 0, 2, 2, 2, 0, 2, 0, 2, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
All the arrays are made from the symbol called 'tile' which consists of different key frames. So each number in the array references a different key frame. I have a character and when the character walks over the tile- I want the dynamic text to change to empty to imitate an empty tile- alternatively if theres a way to replace the tile with a [0] , that would also be good.
my code that generates the board:
var mapWidth = 10;
var mapHeight = 10;
var tileSide = 32;
var totalTiles = mapWidth * mapHeight;
var myMap: Array = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 3, 2, 2, 2, 0, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 0, 1],
[1, 0, 2, 0, 2, 0, 0, 0, 0, 0],
[1, 0, 2, 2, 0, 3, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 2, 2, 0, 1],
[1, 0, 2, 0, 2, 0, 2, 0, 0, 1],
[1, 0, 2, 2, 2, 0, 2, 0, 2, 1],
[1, 0, 0, 0, 0, 0, 2, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
for (var i: int = 0; i < mapHeight; i++) {
for (var u: int = 0; u < mapWidth; u++) {
var cell: MovieClip = new tile();
cell.gotoAndStop(myMap[i][u] + 1);
cell.x = tileSide * u;
cell.y = tileSide * i;
addChild(cell);
};
};
Sorry i was not clear from the start. New at actionscript so i apologise in advance if my terminology is unclear.
Is this "tile" symbol available in all frames? If the playhead is moving, then the symbols within the MovieClip may become dereferenced. Add the "pTwo" object to your Watch list in debug and determine if it object exists as the "tile" symbol plays.
You may need to create a single frame symbol with 2 layers. One with the animated symbol and the other with the text.
If the TextField only exists on a particular frame, and you're sure that it's the current frame, you can use this:
TextField(getChildByName("pTwo")).text = "";
If you're not always sure, just wrap it in a try block:
try {
TextField(getChildByName("pTwo")).text = "";
} catch(error:Error) {
trace("text field doesn't exist on this frame");
}
If pTwo lives inside of a Movieclip, the code might look something like this:
try {
TextField(YourMovieclipsName.getChildByName("pTwo")).text = "";
} catch(error:Error) {
trace("text field doesn't exist on this frame");
}
Hope this helps!
Edit based on new info:
for (var i: int = 0; i < mapHeight; i++) {
for (var u: int = 0; u < mapWidth; u++) {
var cell: MovieClip = new tile();
cell.gotoAndStop(myMap[i][u] + 1);
cell.x = tileSide * u;
cell.y = tileSide * i;
try {
TextField(cell.getChildByName("pTwo")).text = "";
} catch(error:Error) {
trace("text field doesn't exist on this frame");
}
addChild(cell);
};
};
I want to draw line chart for ECG reading using Shapes component. I want graph exactly like this image.
i finished 90% code. but when i call clear() means all lines cleared.
i want to give some space between two different reading.
My code:
<fx:Script>
<![CDATA[
private var arrSPO2:Array = [33, 35, 36, 33, 28, 21,35, 36, 33, 28, 21, 13, 6,33, 28, 21, 13, 6, 0, 0, 0,28, 21, 13, 6, 0, 0, 0, 0, 0, 10,28, 21, 13, 6, 0, 0, 0, 0, 0, 10, 31, 56, 78,13, 6, 0, 0, 0, 0, 0, 10, 31, 56, 78, 93, 98, 94,6, 0, 0, 0, 0, 0, 10, 31, 56, 78, 93, 98, 94, 82, 68, 55,0, 0, 0, 0, 0, 10, 31, 56, 78, 93, 98, 94, 82, 68, 55, 45, 41,0, 0, 0, 0, 10, 31, 56, 78, 93, 98, 94, 82, 68, 55, 45, 41, 41, 42, 44,0, 0, 0, 10, 31, 56, 78, 93, 98, 94, 82, 68, 55, 45, 41, 41, 42, 44, 43, 39, 32,0, 0, 10, 31, 56, 78, 93, 98, 94, 82, 68, 55, 45, 41, 41, 42, 44, 43, 39, 32, 24, 15, 7,0, 10, 31, 56, 78, 93, 98, 94, 82, 68, 55, 45, 41, 41, 42, 44, 43, 39, 32, 24, 15, 7, 1, 0, 0,10, 31, 56, 78, 93, 98, 94, 82, 68, 55, 45, 41, 41, 42, 44, 43, 39, 32, 24, 15, 7, 1, 0, 0, 0, 2, 19,31, 56, 78, 93, 98, 94, 82, 68, 55, 45, 41, 41, 42, 44, 43, 39, 32, 24, 15, 7, 1, 0, 0, 0, 2, 19, 43, 68, 90,56, 78, 93, 98, 94, 82, 68, 55, 45, 41, 41, 42, 44, 43, 39, 32, 24, 15, 7, 1, 0];
private var oldX:int = 0;
private var oldY:int = 0;
private var newX:int = 0;
private var newY:int = 0;
private static const TIMER_INTERVAL:int = 50;
private var timer:Timer = new Timer(TIMER_INTERVAL);
private var shapesSPO2:Shape = new Shape();
[Bindable] private var index:int = -1;
protected function init():void {
}
private function timerHandler(event:TimerEvent):void {
trace(timer.currentCount);
index = timer.currentCount - 1;
//draw SPO2
newX += 2;
newY = ((arrSPO2[index] * -1) / 2 + 120);
if (oldY == 0) {
oldY = newY;
}
shapesSPO2.graphics.moveTo(oldX, oldY);
shapesSPO2.graphics.lineTo(newX, newY);
ui1.addChild(shapesSPO2);
oldX = newX;
oldY = newY;
if (index > arrSPO2.length) {
shapesSPO2.graphics.clear();
shapesSPO2.graphics.lineStyle(2, 0x990000, .75);
oldX = newX = 0;
timer.reset();
timer.start();
}
}
protected function btnSPO2_clickHandler(event:MouseEvent):void {
oldX = newX = 0;
shapesSPO2.graphics.lineStyle(2, 0x990000, .75);
timer.addEventListener(TimerEvent.TIMER, timerHandler);
timer.reset();
timer.start();
}
]]>
</fx:Script>
<s:VGroup width="100%" height="100%"
horizontalAlign="center" verticalAlign="middle">
<mx:HBox width="550" height="500"
borderColor="#000000" borderVisible="true" borderStyle="solid" borderAlpha="0.2"
visible="true" includeInLayout="true">
<s:VGroup id="vgGraph" width="100%" height="100%"
horizontalAlign="center"
gap="10"
padding="10">
<s:HGroup width="100%">
<s:Label text="Current Index : {index}" fontSize="16"
fontWeight="bold" />
</s:HGroup>
<mx:UIComponent id="ui1" width="100%" height="100%" />
<!--<s:SpriteVisualElement id="spriteVis" width="100%" height="100%" />-->
<s:Button id="btnSPO2" label="Draw SPO2 Graph" click="btnSPO2_clickHandler(event)" />
</s:VGroup>
</mx:HBox>
</s:VGroup>
To do that you can change your code like this :
private const margin:int = 10;
private function timerHandler(event:TimerEvent):void {
if (index == arrSPO2.length - 1) {
// set the margin between the last chart and the new one
newX = newX + margin;
oldX = newX;
// reset index
index = 0;
timer.reset();
timer.start();
// exit if we have reached the last element of our array
return;
}
index = timer.currentCount - 1;
newX += 2;
newY = ((arrSPO2[index] * -1) / 2 + 120);
if (oldY == 0) {
oldY = newY;
}
shapesSPO2.graphics.moveTo(oldX, oldY);
shapesSPO2.graphics.lineTo(newX, newY);
ui1.addChild(shapesSPO2);
oldX = newX;
oldY = newY;
}
Which will give you something like this :
Hope that can help.
I've modified your timerHandler as below:
private function timerHandler(event:TimerEvent):void {
trace(timer.currentCount);
index = timer.currentCount - 1;
if (index > arrSPO2.length) {
//shapesSPO2.graphics.clear();
//shapesSPO2.graphics.lineStyle(2, 0x990000, .75);
newX += 10;
oldX = newX;
timer.reset();
timer.start();
return;
}
//draw SPO2
newX += 2;
if(newX > ui1.width)
{
oldX = newX = 0;
}
newY = ((arrSPO2[index] * -1) / 2 + 120);
if (oldY == 0) {
oldY = newY;
}
if(index ==0)
{
oldY = newY;
}
shapesSPO2.graphics.moveTo(oldX, oldY);
shapesSPO2.graphics.lineTo(newX, newY);
ui1.addChild(shapesSPO2);
oldX = newX;
oldY = newY;
}