You are not logged in.
Hi,
I want to show balloon in the stock chart .
I have known that I can use tags like [[value]], [[description]], [[percents]], [[open]], [[total]], [[category]].
just like :
<amcharts:stockGraphs>
<amcharts:StockGraph id="g1" valueField="value" compareField="value" comparable="true" balloonText="[[value]]"
</amcharts:stockGraphs>
But I want to display the custom fields . How should I implement this ?
I find the below description from the API ,but I don't understand very well , Can you give me an special example ?
balloonText property
balloonText:String [read-write]
Balloon text. You can use tags like [[value]], [[description]], [[percents]], [[open]], [[total]], [[category]]. You can also use custom fields from your dataProvider.
The default value is [[value]].
thanks
Last edited by logic.jeff (2012-01-30 19:53:24)
Offline
Well, if your data contains custom fields you can use them here. I.e.:
[private var _data:ArrayCollection = new ArrayCollection([
{ time:"17:30", first:3, second:2, hello:"world" },
{ time:"17:35", first:3, second:2, hello:"mom" },
]);In balloon text you can just use [[hello]].
Offline
Thanks for your reply .
I just do like your method. But I found this balloon will not show unless I zoom the chart .
what's the root reason of this ?
Below is my code :
<?xml version="1.0" encoding="utf-8"?>
<!-- This example is made using amStock Flex component. Visit http://flex.amcharts.com to see more examples -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:amcharts="http://www.amcharts.com/com_internal"
creationComplete="{generateChartData()}"
backgroundColor="#FFFFFF" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// generate some random data for 4 different data providers
[Bindable]
private var chartData1:ArrayCollection = new ArrayCollection();
private function generateChartData():void
{
var firstDate:Date = new Date();
firstDate.setDate(firstDate.getDate() - 1000);
for(var i:Number = 0; i < 1000; i++)
{
var newDate:Date = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var a1:Number = Math.round(Math.random() * (40 + i)) + 100 + i;
var b1:Number = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
chartData1.addItem({date:newDate, a:a1, b:"test"});
}
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%" paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10">
<amcharts:AmStockChart width="100%" height="100%">
<!-- Stock chart must have at least one data set -->
<amcharts:dataSets>
<!-- first data set -->
<amcharts:DataSet dataProvider="{chartData1}" categoryField="date" title="First data set">
<!-- all fields which will be used by stock chart must be mapped -->
<amcharts:fieldMappings>
<amcharts:FieldMapping fromField="a" toField="value"/>
</amcharts:fieldMappings>
</amcharts:DataSet>
</amcharts:dataSets>
<!-- Stock chart must have at least one stock panel -->
<amcharts:panels>
<!-- first panel -->
<amcharts:StockPanel title="Value" height="50%" showCategoryAxis="false">
<!-- graphs -->
<amcharts:stockGraphs>
<amcharts:StockGraph balloonText="balloon:[[b]]" id="g1" valueField="value" compareField="value" comparable="true"/>
</amcharts:stockGraphs>
<!-- legend -->
<amcharts:stockLegend>
<amcharts:StockLegend/>
</amcharts:stockLegend>
</amcharts:StockPanel>
</amcharts:panels>
<!-- Data set selector is optional -->
<amcharts:dataSetSelector>
<amcharts:DataSetSelector position="left" width="157"/>
</amcharts:dataSetSelector>
<!-- Period selector is optional -->
<amcharts:periodSelector>
<amcharts:PeriodSelector position="left" width="157">
<!-- predefined periods -->
<amcharts:periods>
<amcharts:PeriodButton label="10 Days" period="DD" count="10"/>
<amcharts:PeriodButton label="1 Month" period="MM" count="1"/>
<amcharts:PeriodButton label="6 Months" period="MM" count="6"/>
<amcharts:PeriodButton selected="true" label="1 Year" period="YYYY" count="1"/>
<amcharts:PeriodButton label="MAX" period="MAX"/>
<amcharts:PeriodButton label="YTD" period="YTD"/>
</amcharts:periods>
</amcharts:PeriodSelector>
</amcharts:periodSelector>
<!-- All settings components below are optional, you can remove them -->
<!-- Scrollbar settings -->
<amcharts:chartScrollbarSettings>
<amcharts:ChartScrollbarSettings height="30" graph="{g1}"/>
</amcharts:chartScrollbarSettings>
<!-- Category axes settings -->
<amcharts:categoryAxesSettings>
<amcharts:CategoryAxesSettings maxSeries="100"/>
</amcharts:categoryAxesSettings>
<!-- Value axes settings -->
<amcharts:valueAxesSettings>
<amcharts:ValueAxesSettings/>
</amcharts:valueAxesSettings>
<!-- Panels settings -->
<amcharts:panelsSettings>
<amcharts:PanelsSettings/>
</amcharts:panelsSettings>
<!-- Legends settings -->
<amcharts:legendSettings>
<amcharts:LegendSettings/>
</amcharts:legendSettings>
<!-- Stock events settings -->
<amcharts:stockEventsSettings>
<amcharts:StockEventsSettings/>
</amcharts:stockEventsSettings>
<!--cursor setting-->
<amcharts:chartCursorSettings>
<amcharts:ChartCursorSettings showValueAxisValue="false" valueBalloonsEnabled="true" crosshair="false"/>
</amcharts:chartCursorSettings>
</amcharts:AmStockChart>
</mx:VBox>
</mx:Application>Besides, can we custom the balloon use dataProvider in JS-chart ?
I find the below description in API of the js-chart.
balloonText String [[value]] Balloon text. You can use tags like [[value]], [[description]], [[percents]], [[open]], [[total]], [[category]]
Another question, I find the property "connect" of the StockGraph doesn't work for compareGraph ,just work for the first line. are there any other property for the compareGraph ,maybe like "compareGraphConnect"?
thanks
Last edited by logic.jeff (2012-01-31 03:58:58)
Offline
This is an expected behavior. When your chart is zoomed out, it groups datapoints into larger periods. The balloon cannot display custom fields for such "aggregate" datapoints (it would not be clear which datapoint's custom field to use).
Answering your other questions, yes - JS Stock chart supports custom fields, too.
There is no way to display gaps in compared graphs. Sorry.
Offline
thanks your reply.
But if I change the balloonText="balloon:[[b]]" to balloonText="balloon:[[value]]" , it can works well.
Does any other solutions can be used to solve this problem ?
thanks
jeff
Offline
Another question, about the periodSelector->PeriodButton, I find the button can set a span of date to display. But it seems that the span of the date just can from the end or the start.
My question is Can I set the special span of the date to show not from the start or end or other methods can implement this?
I find the following properties about the periodSelector:
selectFromStart : Boolean
Specifies whether predefined period buttons should select a period from the beginning or the end of the data.
Besides, My MSN is " sdaudjx@msn.cn "
thanks very much.
Last edited by logic.jeff (2012-02-01 01:51:52)
Offline
It works well with value because aggregate datapoint has a value. You can control how aggregate value is calculate using periodValue property.
Unfortunately we cannot do this with custom fields, because, well, they can contain anything: values, strings, etc.
You can set the starting span for the chart using AmStockChart.startDate and endDate properties.
Offline
thanks your reply again.
you mentioned I can control the aggregate value use periodValue. So I do the following changes :
chartData1.addItem({date:newDate, a:a1, b:b1});
<amcharts:StockGraph balloonText="balloon:[[b ]]" id="g1" valueField="value" compareField="value" comparable="true" periodValue="Average"/>
But it still can't show the aggregate value.
I just want it can show some thing, as the blank is not very kind for our users.
besides thanks for your reply about the PeriodSelector.
Last edited by logic.jeff (2012-02-01 02:17:45)
Offline
Again, periodValue does not work on custom fields. It just instructs the chart how to calculate aggregate value out of all the values that are in the valueField.
There's no way to do that kind of calculation with custom fields. Sorry.
Offline
I understand. You mean the lots of datapoints are grouped into small periods so amchart can't be clear which datapoint's custom field to use.
But Please see the following code. there are only 67 datapoints.So it seems not a lot. But it still can't show the balloon text.
Further research, I find that because there's 67*7 days. maybe amcharts show the balloon text using day as the unit.
Can we set the unit to week ?
Other way, amcharts shouldn't confuse which datapoint's custom field to show, because there are only 67 datapoints.
thanks
<?xml version="1.0" encoding="utf-8"?>
<!-- This example is made using amStock Flex component. Visit http://flex.amcharts.com to see more examples -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:amcharts="http://www.amcharts.com/com_internal"
creationComplete="{generateChartData()}"
backgroundColor="#FFFFFF" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// generate some random data for 4 different data providers
[Bindable]
private var chartData1:ArrayCollection = new ArrayCollection();
private function generateChartData():void
{
var firstDate:Date = new Date();
firstDate.setDate(firstDate.getDate() - 53*7);
for(var i:Number = 0; i < 67; i++)
{
var newDate:Date = new Date(firstDate);
newDate.setDate(newDate.getDate() + i*7);
var a1:Number =i;
var b1:Number =i+1;
chartData1.addItem({date:newDate, a:a1, b:b1});
}
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%" paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10">
<amcharts:AmStockChart width="100%" height="100%">
<!-- Stock chart must have at least one data set -->
<amcharts:dataSets>
<!-- first data set -->
<amcharts:DataSet dataProvider="{chartData1}" categoryField="date" title="First data set">
<!-- all fields which will be used by stock chart must be mapped -->
<amcharts:fieldMappings>
<amcharts:FieldMapping fromField="a" toField="value"/>
</amcharts:fieldMappings>
</amcharts:DataSet>
</amcharts:dataSets>
<!-- Stock chart must have at least one stock panel -->
<amcharts:panels>
<!-- first panel -->
<amcharts:StockPanel title="Value" height="50%" showCategoryAxis="false">
<!-- graphs -->
<amcharts:stockGraphs>
<amcharts:StockGraph balloonText="balloon:[[b]]" id="g1" valueField="value" compareField="value" comparable="true"/>
</amcharts:stockGraphs>
<!-- legend -->
<amcharts:stockLegend>
<amcharts:StockLegend/>
</amcharts:stockLegend>
</amcharts:StockPanel>
</amcharts:panels>
<!-- Data set selector is optional -->
<amcharts:dataSetSelector>
<amcharts:DataSetSelector position="left" width="157"/>
</amcharts:dataSetSelector>
<!-- Period selector is optional -->
<amcharts:periodSelector>
<amcharts:PeriodSelector position="left" width="157">
<!-- predefined periods -->
<amcharts:periods>
<amcharts:PeriodButton label="10 Days" period="DD" count="10"/>
<amcharts:PeriodButton label="1 Month" period="MM" count="1"/>
<amcharts:PeriodButton label="6 Months" period="MM" count="6"/>
<amcharts:PeriodButton selected="true" label="1 Year" period="YYYY" count="1"/>
<amcharts:PeriodButton label="MAX" period="MAX"/>
<amcharts:PeriodButton label="YTD" period="YTD"/>
</amcharts:periods>
</amcharts:PeriodSelector>
</amcharts:periodSelector>
<!-- All settings components below are optional, you can remove them -->
<!-- Scrollbar settings -->
<amcharts:chartScrollbarSettings>
<amcharts:ChartScrollbarSettings height="30" graph="{g1}"/>
</amcharts:chartScrollbarSettings>
<!-- Category axes settings -->
<amcharts:categoryAxesSettings>
<amcharts:CategoryAxesSettings maxSeries="100"/>
</amcharts:categoryAxesSettings>
<!-- Value axes settings -->
<amcharts:valueAxesSettings>
<amcharts:ValueAxesSettings/>
</amcharts:valueAxesSettings>
<!-- Panels settings -->
<amcharts:panelsSettings>
<amcharts:PanelsSettings/>
</amcharts:panelsSettings>
<!-- Legends settings -->
<amcharts:legendSettings>
<amcharts:LegendSettings/>
</amcharts:legendSettings>
<!-- Stock events settings -->
<amcharts:stockEventsSettings>
<amcharts:StockEventsSettings/>
</amcharts:stockEventsSettings>
<!--cursor setting-->
<amcharts:chartCursorSettings>
<amcharts:ChartCursorSettings showValueAxisValue="false" valueBalloonsEnabled="true" crosshair="false"/>
</amcharts:chartCursorSettings>
</amcharts:AmStockChart>
</mx:VBox>
</mx:Application>Offline
Yes, but still your data scope is quite wide so if you zoom out to several months it still groups the items.
Try disabling grouping using maxSeries="0"
Offline
Sorry, Where should I set the "maxSeries" ?
Offline
ok, thanks . I have disable group by set "<amcharts:CategoryAxesSettings maxSeries="0"/>"
thanks for your reply.
Offline
© amCharts | Forum engine: PunBB