Chart Multiple Series - Line/Column Alignment

In one of the pages from the charting section of the Adobe's
online Flex help,
http://livedocs.adobe.com/labs/flex3/html/help.html?content=charts_types_12.html#227567
there's a picture near the top showing a line chart overlaid
on a column chart, and the endpoints of the line segments are
centered horizontally within each bar.
There are two code samples later in the page showing similar
charts, but the bars are only half as wide as they are in the first
picture, and the result is that the line segment endpoints coincide
with the right edges of the bar instead of the bar centers.
I'm wondering how to produce a graph like the first picture.
I tried different combinations of columnWidthRatio but nothing
seemed to help. If I add more line series to the examples, the bars
become thinner, as if the ColumnChart determines the bar width
according to the
total number of series, not just the number of column
series.
I thought about trying to add an ItemRenderer to the
ColumnSeries, but it seems that should be an easier way. Any ideas?
--Bruce

Stumbled across the answer here:
http://tech.groups.yahoo.com/group/flexcoders/message/83539

Similar Messages

HT3347 Scatter and line charts - multiple series?

Is there a way of having more than 1 series on a scatter chart, or a way of removing the line in a line chart, leaving only the data points?

you have control over many aspects of how a chart is presented through the Charts inspector. You can open the Inspector by selecting the menu item "View > Show Inspector" OR click the Inspector button in the toolbar:
You can adjust the number of series in a scatter chart by clicking the chart, then changing the highlighted area in the data tables by grabbing the circle at the bottom right of the data and dragging as needed to add or remove data:
Finally, with the inspector open, you can change many aspects of the chart:
There is a Free Users Guide which you can download from:
http://support.apple.com/manuals/#productivitysoftware

Chart multiple series question

I have one sql query to generate a flash line chart. It generates 8 series using syntax:
SELECT link, label, series_1_value [, series_2_value [, ...]]
FROM ...
Is there any way to customize the line color of each series, and labels for each series? Right now, I can't tell which line is for what.
Many thanks!

Jerry,
I didn't know how to set the line color either. (I was searching for that exact thing when I found your post). But I puttered around and found this solution:
1) Click the Flash Chart Link.
2) In the Chart Setting section, change Color Scheme to Custom.
3) Click the flashlight icon below that to pop up a color selection window, which lets you assign a color to each of your series (in order).
4) Click the multi-colored button on each row to pop up the color selector window.
You could also make things more obvious by turning on the Legend.
Good luck,
Stew

Flash chart performance issue with multiple series

Hi,
We have a problem with the performace of a line graph which has multiple series.
I have set up an example application here:
http://apex.oracle.com/pls/apex/f?p=37504:1
The application contains two charts. The 'Mulltiple Series' chart has twelve series behind it and allows the user to include mutiple series data. The other chart has just one series.
The single series chart takes only a couple of seconds to render, however the mutiple series chart takes around 10 seconds even when no additional series have been selected. Using Firebug I have observed that the apex_util.flash procedure is taking around 8 seconds to generate the XML, and it includes null data values for the series that aren't selected.
My question is how can I make each series conditional, such that no data is included in the XML if the series returns no rows?
Thanks,
Andrew

Hi Andrew
Have you considered modifying your chart to use a series with the "Query source type" of "Function returning SQL Query"
Have a look at
Re: Flash chart - multiple series - no display when some series empty
My response on that thread may help. I'd be interested to know if this approach improves the performance.
Kind regards
Simon Gadd

SVG Linecharts with Multiple Series

I've been trying to get multiple lines/series on a linechart. I have a query which works okay to get the first series. A slightly different query (or the same query, even) makes it barf and give me an error. I'm using HTMLDB 1.6
What's especially irritating is that there's next to no documentation for this thing. The manual and the how-tos give a couple small examples for various types of charts. It's never revealed anywhere what kind of query it's looking for in every type of chart, and the vague error messages and the neat-nonexistant documentation don't help in the slightest. Does anybody here really use this thing for actual development?
Sorry. Frustration aside, is there anybody who has managed to get this to work? I've been trying to get it to work for a few days now, as has a co-worker, and I'm getting nowhere. I might go and try it on my HTMLDB 2.0 demo account and see if maybe this kind of thing is fixed or at least better explained.
Message was edited by:
DanGrover

Dan,
I used line charts to show trends in report usage in an application I support. Basically the line chart can have multiple series (lines) on it. Each series has a unique query. All series queries are of the form:
SELECT link, label, value FROM table
- 'link' is an URL used for drill down. This could be another page in your application with a details report. When the user clicks on the line for the series, HTML DB takes a branch to this link.
- 'label' is the value for the x-axis. In my case this was a month of the year.
- 'value' is a numeric value to be plotted on the y-axis.
For example if you had a STOCK_QUOTES table the series query to track how Oracle's stock is doing would be:
SELECT NULL link, closing_date label, price value
FROM stocks
WHERE symbol = 'ORCL'
If you wanted to track other software companies stock on the same chart, just add another series changing the literal 'ORCL' to some other value.
Note: if you have more than 15 rows in your series query, make sure you increase the 'Maximum Rows' for the series to an appropriate value.
I hope this helps,
Mike

Help! Lines/columns appearing on CS6 ext

Can anyone suggest a fix for this, please? I am getting multiple vertical lines / columns running down images when I scan an image from right to left. I have tried restoring my PC system to a point previous to the problem, with no success.
Thanks!

Hello Noel and anyone else who may be able to help
It seems that Windows automatically updates my devices, so I am assuming my graphics are up to date. I did a troubleshoot with Windows which did not identify any problems, so I am a bit bemused! I am inserting a couple of screenshots which shows what I see when I first open an image with photoshop, and then what happens after I scan across the enlarged image. Perhaps it might add any info' to what might be wrong and any other possible solutions.
I am very appreciative of your time and suggestions. Thanks! Anne

Drill Down for Multiple Series in a Line Chart

Hello,
I seem to have a problem with the drill-down functionality in a line chart that has multiple series.
I have a line chart that displays the readings of a patient over a period of 1 month. For each day, there is the glucose level reading, blood pressure reading, etc... So, each reading is a different series in my line chart graph.
The basic requirement is: With a mouse over event on the chart, I am willing to display all the data that belongs to that day. The data will be displayed at the bottom of the screen in a small panel. It is very simple to do it when the line chart has only 1 series:
i) Enable drill down.
ii) Choose 'Row' as insertion type.
iii) Fill out the destination field.
iv) Make sure your labels (at the bottom of the screen) get the data from the destination cell.
When there is more than one series, it becomes very difficult. XCelsius will not let me use the same destination cells for different series. So, I will have to use other destination cells. In that case, I will not know on which day is the user on. Is there any way to achieve this functionality?
Let me know if you need further information.

This is certainly possible, but there's a bit of a trick to it (and really hard to explain without screenshots!). There's two halves to it:
1. Write the date that has been selected to a cell (for each series).
2. Write the name of the series that was clicked to some cell (this is the property 'Series Name Destination').
So let's say your three series are Glucose, Blood Pressure and Temp. Have those series names in B1,C1,D1 (with your dates down in column A). Insert a row below the series names (2:2), and then set up your insertion type for the chart as 'row'. The source data (for all three series) should be your list of dates in column a. The insertion cells for the three series will be, in order, B2,C2,D2. Now, depending on which point is clicked in the chart, the selected day will be inserted into one of those three cells. Completely useless unless you know which series was clicked.
So you need to insert the name of the series that was clicked ('Series Name Destination') into the spreadsheet, let's say in F1. The rest is just Excel formulas. The logic is, you can now tell what series was clicked, and go and look up the date that was inserted for that series, then go and look up the row that corresponds to that date. So to get the date that was just clicked, your formula (in F2) would be =HLOOKUP(F1,B1:D2,2,0).
Then a VLOOKUP will get the results from that row of data. For example, if I inserted another row at row 3 (to show my 'result' values) the formula in B3 would be =VLOOKUP($F$2,$A$4:$D$13,2,0).
I hope that makes sense.

Line Chart with Multiple Series

Post Author: JayZee
CA Forum: Charts and Graphs
HI
I am trying to create a line chart with multiple series for trend analysis on CR XI but not having much luck, I thought it would be so simple to do!
My data is provided summarized on the server and is returned as 12 rows:
Month Year1 Year2 Year3 Year4 Year5January 100 80 75 90 120February 85 25 40 25 80etc for the rest of the months
My problem is that I can only get the chart to accept the values to display as a summary and not just as the data pulled back from the server. I have read an article on the support site for Crystal 6.0 but it doesn't seem to translate well into XI.
If necessary I could redesign the table to bring back un-summarized data but that is quite a big job.
Any help greatly appreciated.
Jay

Post Author: Tim Wise
CA Forum: Charts and Graphs
In the chart expert, put Month in the 'On change of' box and put each year in the 'Show values' box. This puts the month on the x-axis and plots each year as a line.
Is that what you want?
I did this in CR 2008 using your data in an Excel sheet.

Candlestick chart problem with multiple series

Hello,
I added one mx:CandlestickSeries object and couple additional
mx:LineSeries objects to the chart. All series are represented but
still I have one problem. More series I add - less candles are
becoming of CandlestickSeries data. It seems that there should be
any scaling option for all series in the chart or something like
this, but I cannot find it. I'm still new in Flex Can anyone halp
me with this?
Thanx in advance
marukas

I've added screenshots to get better view of the problem.
Here is chart with addtional series:
Chart
with multiple series
And here nothing is changed except that additional line
series were removed:
Chart
with only one CandlestickSeries
Is it possible to get the same candles as in 2nd view with
addiotnal series added?

Multiple series in a chart

Hi
I want to create a chart with multiple series, each serie referring to a specific country.
The query below is not accepted:
SELECT null url,s.date_from,s.country,sum(s.unique_players) unique_players
FROM my_table s ...As a workaround I changed the query to:
SELECT null url, s.date_from,
sum(decode(s.country, 'se', s.unique_players, 0)) sweden,
sum(decode(s.country, 'fi', s.unique_players, 0)) finland,
sum(decode(s.country, 'no', s.unique_players, 0)) norway ...
FROM my_table s ...It works well but it is not very flexible, in the case a new country has to be added.
Is there a better way to achieve this in Apex 3?
Thanks
Luis

Luis,
You can chart a variable number of series with a query like the second one you listed, except use "Function returning query" instead of "SQL query". Then generate the column list clause dynamically, one for each series.
There's an enhancement request logged to make this easier.
Marco

Plotting multiple series on an SVG Chart

Hi,
I am trying to plot multiple series on an SVG Chart. The moment I add a second series, I get the following error:
"SVG Chart error: ORA-20001: line_chart error: ORA-20001: get_data error: ORA-20001: Parse error: ORA-0093".
The graph fails to plot multiple series even for the same queries. The query I use is something like the following:
select null "link", substr(name,7) "Label",value "Value"
from <table>
where
<conditions>
and name in (<sub-query>)
order by name desc
I have previously used an SVG chart to plot multiple series and have never had such problems. Any help would be greatly appreciated.
I tried deleting and recreating the chart - doesn't help.
Thanks,
Aswath

If you want to order the data do it via an in-line view:
SELECT *
FROM (
select null "link", substr(name,7) "Label",value "Value"
from <table>
where
<conditions>
and name in (<sub-query>)
order by name desc
)

Stacked Bar Chart with Multiple Series Sort Question

Hi,
Apex version 4.1.1
I have a stacked bar chart with three separate series, one showing customer effort, another showing project effort and the third showing other effort, summarized by calendar week. The x-axis of the chart is the calendar "week of" date, and the y-axis has a bar for each of the three series. Not every type of effort occurs every week.
When AnyChart renders the chart, the order of entries on the x-axis seems to be dependent both on which series are present in a given week as well as the "week of" date. Weeks with all three series sort in order by calendar date, followed by weeks where just the 2nd & 3rd series are present, followed by weeks where just the 3rd series is present. See this [url http://tinypic.com/r/b9zdt/6] picture of the chart noting the "week of" dates. Note that the months go Sep-Oct-Nov-Aug-Oct.
Is there a way to force AnyChart to sort the x-axis in chronological order regardless of whether there is data for all three series for a given week? I have looked through the AnyChart XML reference but cannot find a way to do this.
Incidentally, I can solve the sorting problem by combining all three series into a single query:
select
null as link,
week_of as label,
sum(customer_effort) as "Customer Effort",
sum(project_effort) as "Project Effort",
sum(other_effort) as "Training, Admin and Other Effort"
from ...But if I do this, I cannot figure out how to have each bar on a given week link to a different detail page, e.g., if I click on a bar representing customer effort I want to link to one page, but if I click on a bar representing project effort, I want to link to a different page. I have had a look at the [url http://apex.oracle.com/pls/apex/f?p=36648:59:1570983160946101::NO:::] chart examples posted on apex.oracle.com, but cannot figure out how to apply to multiple series in a single query.
Thanks,
Mike

Thanks, Jeff. I did try this but for whatever reason it doesn't make a difference. I think it is because if there's no data for a given series for a certain week, there is no entry in the data set that is sent to AnyChart.
I was able to get around the issue by "filling in" the missing weeks from each data series. To generate the list of "Week Of" dates for a given date range, I used this code:
select
     trunc (each_day) as week_of,
     0 as effort
from (
     select
          (to_date(:p920_start_date,:app_date_format) + 2 - to_char(to_date(:p920_start_date,:app_date_format),'D') - 1) + level each_day
     from dual
     connect by level <= to_date(:p920_end_date,:app_date_format) - to_date(:p920_start_date,:app_date_format) + 1
where
     to_char (each_day, 'D') = '2'This creates an effort entry of 0 for each week within the date range; I use the Monday date of a week as the "Week Of" date. I then union this with my actual data and summarize by week and viola, I get the weeks in order. This also has the benefit of showing a week for which there are no entries in any of the three series.
Thanks for taking a look at this.
Mike

Legend Problem in multiple series chart

Hello,
I am getting problem in displaying legend. I have created a chart with multiple series and custon color. Here is my code. You can copy paste it.
Out of 3 only one legend marker n label coming.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
      [Bindable]
      public var SMITH:ArrayCollection = new ArrayCollection([
        {date:"22-Aug-05", close:41.87, close2:45.23},
        {date:"23-Aug-05", close:45.74, close2:40.90},
        {date:"24-Aug-05", close:42.77, close2:46.99},
        {date:"25-Aug-05", close:48.06, close2:40.22},
     [Bindable]
      public var DECKER:ArrayCollection = new ArrayCollection([
        {date:"22-Aug-05", close:157.59},
        {date:"23-Aug-05", close:160.3},
        {date:"24-Aug-05", close:150.71},
        {date:"25-Aug-05", close:156.88},
    ]]>
</mx:Script>
<mx:Style>
    ColumnChart {
        paddingLeft:20;
        paddingRight:20;
        paddingBottom:10;
        paddingTop:10;
     Legend {
     paddingLeft:20;
        paddingRight:20;
        paddingBottom:20;
        paddingTop:10;
</mx:Style>
      <mx:Stroke id="axisStroke"
        color="#000000"
        weight="2"
        alpha=".75"
        caps="round"
    />
<mx:VBox width="500" height="500" borderColor="#000000" cornerRadius="20" themeColor="#009DFF" borderStyle="solid" borderThickness="1" horizontalAlign="center" x="246.5" y="61">
     <mx:ColumnChart id="multipleChart" showDataTips="true" width="100%" height="100%" seriesFilters="[]">
        <mx:horizontalAxis>
           <mx:CategoryAxis id="h1" categoryField="date"/>
        </mx:horizontalAxis>
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer placement="bottom" axis="{h1}">
            <mx:axisStroke>{axisStroke}</mx:axisStroke>
            </mx:AxisRenderer>
        </mx:horizontalAxisRenderers>
        <mx:verticalAxisRenderers>
            <mx:AxisRenderer placement="left" axis="{v1}"><mx:axisStroke>{axisStroke}</mx:axisStroke></mx:AxisRenderer>
            <mx:AxisRenderer placement="right" axis="{v2}"><mx:axisStroke>{axisStroke}</mx:axisStroke></mx:AxisRenderer>
        </mx:verticalAxisRenderers>
        <mx:series>
           <mx:ColumnSeries id="cs1" horizontalAxis="{h1}" dataProvider="{SMITH}" xField="date" yField="close" displayName="Smith" fills="#6693B0">
                <mx:verticalAxis>
                   <mx:LinearAxis id="v1" minimum="40" maximum="50"/>
                </mx:verticalAxis>
           </mx:ColumnSeries>
           <mx:ColumnSeries id="cs3" horizontalAxis="{h1}" dataProvider="{SMITH}" xField="date" yField="close2" displayName="Smiths" fills="#86D1E4">
           </mx:ColumnSeries>
           <mx:LineSeries id="cs2" horizontalAxis="{h1}" dataProvider="{DECKER}" xField="date" yField="close" displayName="Decker">
                <mx:verticalAxis>
                    <mx:LinearAxis id="v2" minimum="150" maximum="170"/>
                </mx:verticalAxis>
                <mx:lineStroke>
       <mx:Stroke color="#CC3300" weight="1"/>
    </mx:lineStroke>
           </mx:LineSeries>
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{multipleChart}" horizontalAlign="center" direction="horizontal"/>
</mx:VBox>
</mx:Application>

I've run into this, too:
Remove the fills property from each ColumnSeries and it'll work.
If you want to use the fills property, you'll have to add your own custom legend code.
From the Flex API:
"If you specify the fills property and you want to have a Legend control, you must manually create a Legend control and add LegendItems to it."

Line Chart Ignoring Series That Starts With a Null Value

I have a flash chart that was working fine until APEX was upgraded to 3.1
The chart is 2D Line. Each series represents a discrete year (2006, 2007, 2008 etc.) and the X-Axis is the month (Jan to Dec) and the Y-Axis is the sales amount for that month.
The year 2006 is the first series and values begin in May so the Jan to Apr values for that series are null (but displayed as Zero before the APEX upgrade), with APEX 3.1, now the 2006 series does not display at all. The other series (that have values from Jan onwards) all display fine. Nothing else has changed except the upgrade to 3.1
How can I get my 2006 series to display again other than entering zero values for the Jan to Apr months?
Thanks in anticipation......
Ollie.
Is there anyone who is an APEX chart guru who can help with this?

HI
To remove the blanks at the beginnging and the end of a string use trim()
if(lineText.trim().startsWith("script_category")

How do I set default colors for XY chart series (lines and legend)

I am implementing a line chart and need to override the default (caspian style) colors for the line colors and the legend symbols. I'm not displaying the chart symbols themselves as that would make the chart look bad. I've been able to successfully set the default colors for the lines via the CSS below, but cannot find a way to do the same for the series symbols that appear in the chart legend. How do I do this? Thanks.
.default-color0.chart-series-line {
-fx-stroke: rgb(0, 102, 255);
.default-color1.chart-series-line {
-fx-stroke: rgb(0, 255, 102);
...Update:
Figured it out. Need to do the following:
.default-color0.chart-line-symbol {
-fx-background-color: rgb(R, G, B);
}Edited by: 998038 on May 16, 2013 4:09 PM

Here is some css to customize the line and legend colors in a line chart.
/** file: chart.css
    place in same directory as LineChartWithCustomColors.java */
.default-color0.chart-series-line {
-fx-stroke: rgb(0, 102, 255);
.default-color1.chart-series-line {
-fx-stroke: rgb(0, 255, 102);
.default-color0.chart-line-symbol {
-fx-background-color: rgb(0, 102, 255), white;
.default-color1.chart-line-symbol {
-fx-background-color: rgb(0, 255, 102), white;
}And a test harness to try it:
import javafx.application.Application;
import javafx.event.*;
import javafx.scene.Scene;
import javafx.scene.chart.*;
import javafx.scene.control.*;
import javafx.scene.input.*;
import javafx.stage.Stage;
public class LineChartWithCustomColors extends Application {
    @Override public void start(final Stage stage) {
        stage.setTitle("Line Chart Sample");
        //defining the axes
        final NumberAxis xAxis = new NumberAxis();
        xAxis.setLabel("Number of Month");
        final NumberAxis yAxis = new NumberAxis();
        //creating the chart
        final LineChart<Number,Number> lineChart =
                new LineChart<>(xAxis,yAxis);
        lineChart.setTitle("Stock Monitoring, 2010");
        lineChart.setCreateSymbols(false);
        //defining a series
        XYChart.Series series = new XYChart.Series();
        series.setName("My portfolio");
        //populating the series with data
        series.getData().setAll(
          new XYChart.Data(1, 23),
          new XYChart.Data(2, 14),
          new XYChart.Data(3, 15),
          new XYChart.Data(4, 24),
          new XYChart.Data(5, 34),
          new XYChart.Data(6, 36),
          new XYChart.Data(7, 22),
          new XYChart.Data(8, 45),
          new XYChart.Data(9, 43),
          new XYChart.Data(10, 17),
          new XYChart.Data(11, 29),
          new XYChart.Data(12, 25)
        lineChart.getData().add(series);
        //adding a context menu item to the chart
        final MenuItem resizeItem = new MenuItem("Resize");
        resizeItem.setOnAction(new EventHandler<ActionEvent>() {
          @Override public void handle(ActionEvent event) {
            System.out.println("Resize requested");
        final ContextMenu menu = new ContextMenu(
          resizeItem
        lineChart.setOnMouseClicked(new EventHandler<MouseEvent>() {
          @Override public void handle(MouseEvent event) {
            if (MouseButton.SECONDARY.equals(event.getButton())) {
              menu.show(stage, event.getScreenX(), event.getScreenY());
        Scene scene =
          new Scene(
            lineChart,800,600
        stage.setScene(
          scene
        stage.show();
        scene.getStylesheets().add(
          getClass().getResource("chart.css").toExternalForm()
    public static void main(String[] args) {
        launch(args);
}

Chart Multiple Series - Line/Column Alignment

Similar Messages

Maybe you are looking for