flex chart columnseries not visible - apache-flex

I have a flex chart that I'm trying to build via actionscript dynamically. For test purposes I came up with the following data structure and code:
Bindable]
public var columnDat:Array=
[{signalID:"SCL", point2:100},
{signalID:"SCL", point2:50},
{signalID:"SCL", point2:30},
{signalID:"SCL", point2:60},
{signalID:"SCL", point2:220},
{signalID:"SCL", point2:140},
{signalID:"SCL", point2:280}];
public function makeDummyChart(genericChart:CartesianChart, genericLegend:Legend, chartPanel:ChartPanel):void {
var renderers:ArrayCollection = new ArrayCollection();
genericChart = new ColumnChart();
// Define the two axes.
var dispAxis:CategoryAxis = new CategoryAxis();
var axr:AxisRenderer = new AxisRenderer();
axr.axis = dispAxis;
renderers.addItem(axr);
var seriesList:ArrayCollection=new ArrayCollection();
// Add the series
genericChart.horizontalAxis = dispAxis;
var columnSeries:ColumnSeries = new ColumnSeries();
BindingUtils.bindProperty(columnSeries, "dataProvider", this, "columnDat");
columnSeries.xField="signalID";;
columnSeries.yField="point2";
seriesList.addItem(columnSeries);
genericChart.series = seriesList.toArray();
genericLegend.dataProvider = genericChart;
genericChart.horizontalAxisRenderers = renderers.toArray();
genericLegend.dataProvider = genericChart;
// chart panel is just the panel on the screen where chart is displayed
chartPanel.addChild(genericChart);
trace (" make dummy chart done");
}
I just get a blank chart when I run this code.

Can't test it by now, but it should be sufficient if you just assign the columnDat array to the series:
columnSeries.dataProvider = columnDat;
or to the column chart:
genericChart.dataProvider = columnDat;

First, you should probably use MXML for this stuff. It's easier.
Second, I don't think you followed the example very well. There's 2 ways of doing charts:
1) Add data to the chart data provider and have the series specify the x and y field within that data provider.
2) Don't add data to the chart and just add the data directly into series without specifying the x and y field.
Right now, you're doing a mix of both 1 and 2 and the series can't see the data because it's being filtered out, which is why it's blank. Don't set the data provider on the series, but set it on the chart instead and it should work. For further example, look at the docs.

Related

How to create multi items/records or save item/record array at one time in client script file

I want to create multiple records at the same time using client script. This is what I'm doing:
var ceateDatasource = app.datasources.Reservation.modes.create;
var newItem = ceateDatasource.item;
newItem.User = user; //'eric'
newItem.Description = description; //'000'
newItem.Location_Lab_fk = lab.value.Id; //'T'
newItem.Area_fk = area.value.Id; //'L'
newItem.Equipment_fk = equipment.value.Id; //'S'
for(var i = 0 ; i < 3; i ++) {
newItem.Start_Date = startDate;
newItem.Start_Hours = '03';
newItem.Start_Minutes = '00';
newItem.End_Date = startDate;
newItem.End_Hours = '23';
newItem.End_Minutes = '30';
// Create the new item
ceateDatasource.createItem();
}
But the result I'm getting is this one:
The three records are created but the only the first one has data. The other two records have empty values on their fields. How can I achieve this?
Thanks.
Update(2019-3-27):
I was able to make it work by putting everything inside the for loop block. However, I have another question.
Is there any method like the below sample code?
var recordData = [Data1, Data2, Data3]
var ceateDatasource;
var newItem = new Array(recordData.length) ;
for(var i = 0 ; i < recordData.length; i ++) {
ceateDatasource = app.datasources.Reservation.modes.create;
newItem[i] = ceateDatasource.item;
newItem[i].User = recordData[i].user;
newItem[i].Description = recordData[i].Description;
newItem[i].Location_Lab_fk = recordData[i].Location_Lab_fk;
newItem[i].Area_fk = recordData[i].Area_fk;
newItem[i].Equipment_fk = recordData[i].Equipment_fk;
newItem[i].Start_Date = recordData[i].Start_Date;
newItem[i].Start_Hours = recordData[i].Start_Hours;
newItem[i].Start_Minutes = recordData[i].Start_Minutes;
newItem[i].End_Date = recordData[i].End_Date;
newItem[i].End_Hours = recordData[i].End_Hours;
newItem[i].End_Minutes = recordData[i].End_Minutes;
}
// Create the new item
ceateDatasource.createItem();
First, it prepares an array 'newItem' and only calls 'ceateDatasource.createItem()' one time to save all new records(or items).
I try to use this method, but it only saves the last record 'newItem[3]'.
I need to write a callback function in 'ceateDatasource.createItem()' but Google App Maker always show a warning "Don't make functions within a loop". So, are there any methods to call 'createItem()' one time to save several records? Or are there some functions like 'array.push' which can be used?
Thanks.
As per AppMaker's official documentation:
A create datasource is a datasource used to create items in a particular data source. Its item property is always populated by a draft item which can be bound to or set programmatically.
What you are trying to do is create three items off the same draft item. That why you see the result you get. If you want to create multiple items, you need to create a draft item for each one, hence all you need to do is put all your code inside the for loop.
for(var i = 0 ; i < 3; i ++) {
var ceateDatasource = app.datasources.Reservation.modes.create;
var newItem = ceateDatasource.item;
newItem.User = user; //'eric'
newItem.Description = description; //'000'
newItem.Location_Lab_fk = lab.value.Id; //'T'
newItem.Area_fk = area.value.Id; //'L'
newItem.Equipment_fk = equipment.value.Id; //'S'
newItem.Start_Date = startDate;
newItem.Start_Hours = '03';
newItem.Start_Minutes = '00';
newItem.End_Date = startDate;
newItem.End_Hours = '23';
newItem.End_Minutes = '30';
// Create the new item
ceateDatasource.createItem();
}
If you want to save several records at the same time using client script, then what you are looking for is the Manual Save Mode. So all you have to do is go to your model's datasource and click on the checkbox "Manual Save Mode".
Then use the same code as above. The only difference is that in order to persist the changes to the server, you need to explicitly save changes. So all you have to do is add the following after the for loop block:
app.datasources.Reservation.saveChanges(function(){
//TODO: Callback handler
});

How can I have a single column on a column chart using MSCharts (within an Asp.Net application)?

I'm using the following code to generate a chart:
public ActionResult GenerateChart()
{
var chart = new Chart();
chart.AntiAliasing = AntiAliasingStyles.All;
chart.TextAntiAliasingQuality = TextAntiAliasingQuality.High;
chart.Width = 500;
chart.Height = 400;
ChartArea area = new ChartArea();
area.AxisY.LabelStyle.Format = "{0:c}";
chart.ChartAreas.Add(area);
Series serie = new Series();
serie.ChartType = SeriesChartType.Column;
serie.Points.DataBindXY(data, "Year", data, "Amount");
chart.Series.Add(serie);
using (var stream = new MemoryStream())
{
chart.SaveImage(stream, ChartImageFormat.Jpeg);
return File(stream.ToArray(), "image/jpeg");
}
}
It's a simple column chart with data for a sum of amount (Y-axis) per year (X-axis).
The data variable supplied while testing the code has only 1 item. This item represents year 2015 with an amount of a little bit over 9.000 (no pun intended).
As you can see from the image generated below, despite having data for only 1 year, the chart automatically adds the previous year and the next one.
How can I show only 2015? Or at least hide those points/labels programatically? Why is it adding that information?
Thanks in advance.
Try disabling the margin on the X axis with
area.AxisX.IsMarginVisible = false;

asp.net rendering a line chart

I have been trying to render a line chart using the basic asp.net Chart class. Whatever I do, it always renders a column chart.
Here is my code where I am binding a datatable to the chart.
var IEtable = (table as System.ComponentModel.IListSource).GetList();
var chart = new Chart(width: 1000, height: 1000)
.AddSeries(chartType: "Line").AddLegend("Key")
.AddTitle("Time Series Metric")
.DataBindCrossTable(IEtable, "Key", "Date", "Value");
Can anyone please help? I am been breaking my head with this thing since more than 12 hours now.
I'm building my charts slightly differently - perhaps because I'm building mine in MVC pages?
Anyway, I'm still using the MS Chart stuff - http://msdn.microsoft.com/en-us/library/ee410579.ASPX
I create my chart:
var chart = new Chart();
chart.Width = 900;
chart.Height = 500;
...lots more options...
then add my series one at a time....
chart.Series.Add(CreateDataSeries(id, "GI Lower", null, null, GetGILowerDataPoints));
chart.Series.Add(CreateDataSeries(id, "GI Upper", null, null, GetGIUpperDataPoints));
where CreateDataSeries sets the chart type like this:
Series seriesDetail = new Series();
seriesDetail.ChartType = SeriesChartType.Spline;
...
return seriesDetail;
Does that help at all?

How can I update the label of a Polygon Vector in OpenLayers after it has been drawn?

I am quite new to OpenLayers. Right now, I have a polygon vector with some styling applied and a label.
var style = $.extend(true, {}, OpenLayers.Feature.Vector.style['default']);
style.pointRadius = 15;
style.label = "My Polygon";
style.fillColor = #f00;
style.strokeColor = #000;
var styleMap = new OpenLayers.StyleMap({"default" : style});
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer", {styleMap: styleMap});
At some point after doing some processing, I want to display the result as a label. How can I update the label? I figure it would be something like this, but this wasn't the way.
polygonLayer.options.styleMap.styles.label = "Updated label";
Thanks in advance.
You are on the right way. You can set new label for all features in a layer like that:
polygonLayer.styleMap.styles.default.defaultStyle.label = "new label";
polygonLayer.redraw();
As you see it's important to call redraw() method after you set new value.
That's how you change label for all features in a layer. Quite often though you'll need to set new labels per feature. To achieve that you should do following when you create pollygonLayer:
var style = $.extend(true, {}, OpenLayers.Feature.Vector.style['default']);
style.label = "${feature_name}";
Each feature has a collection of attributes. In this case value of attribute feature_name will be displayed as a label. To change label value per feature you simply change value of the attribute on that feature and then of course call redraw() on layer.

Using Per Item Fills in Flex/Actionscript

I am creating a chart using mxml. The mxml tags only create a chart with a horizontal axis and vertical axis.
My result event handler has actionscript code that loops through the xml result set and creates all the series (line series and stacked bar). This part of the code works fine.
Now I need to use the functionfill function to set individual colors to each series. All the examples I have found call the functionfill from within an MXML tag, like so:
<mx:ColumnSeries id="salesGoalSeries"
xField="Name"
yField="SalesGoal"
fillFunction="myFillFunction"
displayName="Sales Goal">
I am having trouble calling functionfill from actionscript.
A portion of the code that build the data series is below:
if (node.attribute("ConfidenceStatus")=="Backlog"
|| node.attribute("ConfidenceStatus")=="Billings") {
// Create the new column series and set its properties.
var localSeries:ColumnSeries = new ColumnSeries();
localSeries.dataProvider = dataArray;
localSeries.yField = node.attribute("ConfidenceStatus");
localSeries.xField = "TimebyDay";
localSeries.displayName = node.attribute("ConfidenceStatus");
localSeries.setStyle("showDataEffect", ChangeEffect);
localSeries.fillFunction(setSeriesColor(xxx));
// Back up the current series on the chart.
var currentSeries:Array = chart.series;
// Add the new series to the current Array of series.
currentSeries.push(localSeries);
//Add Array of series to columnset
colSet.series.push(localSeries);
//assign columnset to chart
chart.series = [colSet];
My setSeriesColor function is:
private function setSeriesColor(element:ChartItem, index:Number):IFill {
var c:SolidColor = new SolidColor(0x00CC00);
var item:ColumnSeriesItem = ColumnSeriesItem(element);
//will put in logic here
return c;
}
What parameters do I put in the line localSeries.fillFunction(setSeriesColor(xxx)) ?
I tried localSeries as the first argument but I get an implicit coercion error telling me localSeries can't be cast as ChartItem.
How do I call the function correctly?
localSeries.fillFunction = setSeriesColor;
The code you have right now is actually CALLING setSeriesColor the way you have it set up. You only want it to refer to a reference of the function, not calling it, so just send it "setSeriesColor" as a variable.

Resources