Highlighted

Performing data visualization with Flex SDK 4.6 and Flash Pro CS6 using timeline based navigation and static arrays.

Community Beginner ,
Dec 24, 2018

Copy link to clipboard

Copied

I am trying to perform data visualization using arrays. I have two movie clips - one that performs certain calculations and another movie clip that is supposed to represent the result of the calculations as a line chart, with the inputs on X Axis and results on Y Axis. I am writing code using timeline based navigation. I am new to AS3 with very little experience in it and am learning on the go from the net. However, all the example code I have come across so far on the net seems to be using external Actionscript files and MXML, both of which I have no idea how to do. Due to time restrictions, I have decided to go with timeline based coding as that is what I am most familiar with. Any help by way of code clips to correct my code will be helpful. I do not need the entire code, just corrections and recommendations on the corrections needed. I would rather use the Flex SDK as from examples I have seen, it gives more options with the way data can be visualized and code would be smaller as well. I looked for Open Source options as well but could not find a solution that will fit my needs (I do not need to access data dynamically from an external file; all the data is static in the form of arrays within the Flash application). Also, if it turns out that data visualization is not possible using Flex SDK 4.6 and Flash Pro CS6, should I downgrade to Flex 3.6? The code is shown here under.

import mx.collections.*;

import spark.layouts.HorizontalLayout;

import mx.charts.*;

import mx.charts.series.*;

var xAxisArray:Array = MovieClip(parent).inputArray;

var yAxisArray:Array = MovieClip(parent).resultArray;

function LineChart()

{

     var series:ArrayCollection = new ArrayCollection([xAxisArray, yAxisArray]);

     var s1 = new (LineSeries);

     s1 = xAxisArray;

     trace (s1);

     var s2 = new (LineSeries);

     s2 = yAxisArray;

     var hAxis = new (LinearAxis);

     hAxis = s1;

     var vAxis = new (LinearAxis);

     vAxis = s2;

     hAxis.minimum = xAxisArray[0];

     hAxis.maximum = xAxisArray[4];

     hAxis.label = "Multiplicands";

     vAxis.minimum = yAxisArray[0];

     vAxis.maximum = yAxisArray[4];

     vAxis.interval = (yAxisArray[4]-yAxisArray[0])/yAxisArray.length;

     vAxis.label = "Result";

}

I was able to import the packages successfully. I ran a trace sucessfully on the xAxisArray and yAxisArray variables before calling the LineChart function. If I don't call the LineChart function, I can trace series "s1" successfully, but the trace does not work on series "s1" if I call the "LineChart" function. I had asked a similar question on a previous post on the Adobe forums, but did not get a concrete answer as far as the Flex SDK is concerned. So, if the administrators/moderators find this post repetitive, I apologize for the same. I need to solve the problem with graphing urgently. Data visualization is the last phase of my Flash project and I am stuck with it from almost a month. I am also a complete beginner with AS3 programming, so please bear with me. I had previous experience with AS1 several years ago, but that was limited to more of design and simple navigation rather than development (stopped using Flash for several years but have a new found interest in it with respect to crunching math; the only other programming language I know is C at a beginner level). Sorry for the long rant. I use Flash Pro CS6 on Windows 7 32-bit machine.

TOPICS
ActionScript

Views

195

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Performing data visualization with Flex SDK 4.6 and Flash Pro CS6 using timeline based navigation and static arrays.

Community Beginner ,
Dec 24, 2018

Copy link to clipboard

Copied

I am trying to perform data visualization using arrays. I have two movie clips - one that performs certain calculations and another movie clip that is supposed to represent the result of the calculations as a line chart, with the inputs on X Axis and results on Y Axis. I am writing code using timeline based navigation. I am new to AS3 with very little experience in it and am learning on the go from the net. However, all the example code I have come across so far on the net seems to be using external Actionscript files and MXML, both of which I have no idea how to do. Due to time restrictions, I have decided to go with timeline based coding as that is what I am most familiar with. Any help by way of code clips to correct my code will be helpful. I do not need the entire code, just corrections and recommendations on the corrections needed. I would rather use the Flex SDK as from examples I have seen, it gives more options with the way data can be visualized and code would be smaller as well. I looked for Open Source options as well but could not find a solution that will fit my needs (I do not need to access data dynamically from an external file; all the data is static in the form of arrays within the Flash application). Also, if it turns out that data visualization is not possible using Flex SDK 4.6 and Flash Pro CS6, should I downgrade to Flex 3.6? The code is shown here under.

import mx.collections.*;

import spark.layouts.HorizontalLayout;

import mx.charts.*;

import mx.charts.series.*;

var xAxisArray:Array = MovieClip(parent).inputArray;

var yAxisArray:Array = MovieClip(parent).resultArray;

function LineChart()

{

     var series:ArrayCollection = new ArrayCollection([xAxisArray, yAxisArray]);

     var s1 = new (LineSeries);

     s1 = xAxisArray;

     trace (s1);

     var s2 = new (LineSeries);

     s2 = yAxisArray;

     var hAxis = new (LinearAxis);

     hAxis = s1;

     var vAxis = new (LinearAxis);

     vAxis = s2;

     hAxis.minimum = xAxisArray[0];

     hAxis.maximum = xAxisArray[4];

     hAxis.label = "Multiplicands";

     vAxis.minimum = yAxisArray[0];

     vAxis.maximum = yAxisArray[4];

     vAxis.interval = (yAxisArray[4]-yAxisArray[0])/yAxisArray.length;

     vAxis.label = "Result";

}

I was able to import the packages successfully. I ran a trace sucessfully on the xAxisArray and yAxisArray variables before calling the LineChart function. If I don't call the LineChart function, I can trace series "s1" successfully, but the trace does not work on series "s1" if I call the "LineChart" function. I had asked a similar question on a previous post on the Adobe forums, but did not get a concrete answer as far as the Flex SDK is concerned. So, if the administrators/moderators find this post repetitive, I apologize for the same. I need to solve the problem with graphing urgently. Data visualization is the last phase of my Flash project and I am stuck with it from almost a month. I am also a complete beginner with AS3 programming, so please bear with me. I had previous experience with AS1 several years ago, but that was limited to more of design and simple navigation rather than development (stopped using Flash for several years but have a new found interest in it with respect to crunching math; the only other programming language I know is C at a beginner level). Sorry for the long rant. I use Flash Pro CS6 on Windows 7 32-bit machine.

TOPICS
ActionScript

Views

196

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 24, 2018 0
Adobe Community Professional ,
Dec 24, 2018

Copy link to clipboard

Copied

i would start with something like:

function drawAxesF(graph_mc:MovieClip,col:uint) {

var indent:int = 25;

with (graph_mc.graphics) {

lineStyle(1, col);

moveTo(indent, graph_mc..height-indent);

lineTo(graph_mc.width-indent, indent);

moveTo(indent, graph_mc..height-indent);

lineTo(indent, indent);

}

}

function setupLabelsF(graph_mc:MovieClip,xLabel:String,yLabel:String,xMin:Number,xMax:Number,yMin:Number,yMin:Number):void{

// set up your axes labels, max and min values on graph_mc

}

function graphF(graph_mc:MovieClip,col:uint, xA: Array, yA: Array): void {

with(graph_mc.graphics){

lineStyle(0,col);

moveTo(xA[0],yA[0];

for(var i:int=1;i<xA.length;i++){

lineTo(xA,yA);

}

}

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 24, 2018 0
Community Beginner ,
Dec 25, 2018

Copy link to clipboard

Copied

Thank you for your reply. What about using the Flex SDK with Flash CS6? Should I downgrade to Flex SDK 3.6? I tried creating and positioning the graph in a similar manner you have suggested before I read your reply to my question. By the way, I have set the registration point of the graph movie clip to the top left corner. If I set it to to the bottom left corner or elsewhere, the graph cannot be saved as an image properly (it gets cropped). I also tried creating and positioning the axis labels and markers. However, my logic seems to be wrong as I don't get the desired result. The problem is, I can't figure out where my logic is wrong. The same applies to the drawing the graph. Earlier, I had written code to translate input and result values to pixel values and then plot the graph, but that never worked either. This is one of the reasons I decided to see if I could solve the problem with the Flex SDK, but that didn't work either. The code is shown here under.

//makeLabels();

//function makeLabels():void

//{

//      var indent:Number = 25;

//      with(gmc)

//      {

//           var xXPos = indent;

//           var yYPos = indent;

//           var yTempValue:Number = resultArray[4]/resultArray.length;

//           var yArray:Array = resultArray;

//           yArray = [Math.round(yTempValue*1000)/1000,Math.round((yTempValue*2)*1000)/1000,Math.round((yTempValue*3)*1000)/1000,Math.round((yTempValue*4)*1000)/1000,Math.round((yTempValue*5)*1000)/1000];

//           var xoffSet:Number = (gmc.width/inputArray.length)-indent;

//           var yoffSet:Number = (indent-gmc.height)/resultArray.length;

//           for(var i:Number=0; i<inputArray.length; i++)

//           {

//                var xValue = new (TextField);

//                var yValue = new (TextField);

//                xValue.text = String(inputArray);

//                yValue.text = String(yArray);

//                addChild(xValue);

//                addChild(yValue);

//                xValue.x = xXPos;

//                xXPos+=xoffSet;

//                xValue.y = indent;

//                yValue.x = -xoffSet/3;

//                yValue.y = yYPos-indent;

//                yYPos+=yoffSet;

//           }

//      }

//}

sgBtn.addEventListener(MouseEvent.CLICK, sgFn);

function sgFn(event:MouseEvent):void

{

     var imgEncoder:JPGEncoder = new JPGEncoder();

     var bitmapData:BitmapData = new BitmapData(gmc.width,gmc.height);

     var byteArray:ByteArray = imgEncoder.encode(bitmapData);

     bitmapData.draw(gmc);

     byteArray = PNGEncoder.encode(bitmapData);

     var fileReference:FileReference=new FileReference();

     fileReference.save(byteArray, "graph.png");

}

Here is a an image (saved from within Flash) showing the axis.

graph.png

Here is an image of how the graph should more or less look like (did this in Excel), with the difference being that X-Axis labels will start from 0.761 till 2.785 and the intervals of Y-Axis labels will be different. So the resulting graph will increase from 2.519 to 9.217. Everything else will be the same. Hope this makes sense.

Capture.png

Have a nice Christmas.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 25, 2018 0
kglad LATEST
Adobe Community Professional ,
Dec 25, 2018

Copy link to clipboard

Copied

i've never used flex and can't see any reason to use it.  i've not found anything it can do that i can't do with flash/animate.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 25, 2018 0