Home

RiaMore Soft - JavaScript Charts

1. lt rMateChart gt Annual Report 2008 lt Options gt lt Caption text Annual Report gt lt SubCaption text 2008 gt lt Options gt lt Pie2DChart explodable true innerRadius 0 showDataTips true gt lt rMateChart gt lt Example 22 Layout and Output Pie Chart with explodable true gt lt KoolChart backgroundColor 0xFFFFEE cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Annual Report gt lt SubCaption text 2008 gt lt Options gt lt Pie3DChart showDataTips true explodable false gt lt series gt lt Pie3DSeries nameField Month field Profit labelPosition inside gt lt showDataEffect gt lt SeriesZoom gt lt showDataEffect gt lt Pie3DSeries gt lt series gt lt Pie3DChart gt lt KoolChart gt lt Example 23 Example Pie3D Chart gt 42 151 Kool Annual Report 2008 lt Figure 9 Output Pie3D Chart gt The Pie stacked 3D chart can be created with two series The following is an example that shows the Pie stacked 3D chart lt KoolChart cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Annual Report gt lt SubCaption text 2008 gt lt Options gt lt Pie3DChart showDataTips true explodable false gt lt series gt lt Pie3DSeries nameField Month field Profit displayName Profit labelPosition inside gt lt showDataEffect gt lt SeriesZoom gt
2. 1000 o January March May July September November February April June August October December lt form reverseStep gt lt Figure 12 Outputs Each Type of the Area Chart gt 45 151 Kool lt KoolChart gt lt Area2DChart showDataTips true type stacked gt lt horizontalAxis gt lt CategoryAxis categoryField Month gt lt horizontalAxis gt lt series gt lt Area2DSeries yField Profit form curve displayName Profit gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Area2DSeries gt lt Area2DSeries yField Cost form curve displayName Cost gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Area2DSeries gt lt Area2DSeries yField Revenue form curve displayName Revenue gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Area2DSeries gt lt series gt lt Area2DChart gt lt KoolChart gt lt Example 26 Example Area Chart gt 5000 4000 3000 2000 1000 o urlD221 D223 May Jul Sep Nov urlD222 Apr Jun Aug Oct Dec lt Figure 13 Output Area Chart gt 6 11 Plot Charts The Plot chart is used to represent data in Cartesian coordinates where each data points has one value 46 151 Kkoolz 7 that determines its position along the x axis and one value that determines its position along the y axis The definition of the Plot2D chart starts with the lt Pl
3. 200 600 1000 1400 1800 2200 2600 3000 lt Example 79 Example Layout and Output of Showing Data along Y Axis gt 7 14 Changing Layouts and Data Dynamically You may want to change data in charts dynamically or convert the type of the chart to the different type KoolChart supports changing layouts or data dynamically without refreshing the web page The following example shows a line chart with data series1 which can be converted to the column chart with the same data serise by clicking the button on the top of the line chart and vice versa The line chart with data series 1 can also be dynamically changed to another line chart with data series 2 by 141 151 Kool cliking the change data button as shown in the following example Change chart type Change data Change both Change chart type Change data Change both Annual Report Annual Report SSES 3 200 26000 2 800 24000 22000 2 400 i 20000 2 000 18000 1 600 16000 14000 4 1 200 12000 800 10000 R y 400 8000 6000 o a 4000 2000 o D Revenue ff Cost T T T T T T T T T T d Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec lt Figure 49 Output Dynamic Changes gt The following HTML is used to generate the above output lt html lang en gt lt head gt lt meta http equiv Content Type content text html charset utf 8 gt lt script src KoolChartjs language javascript gt lt scr
4. Draws 3 lines by Creating 3 AxisLines lt AxisLine value 7000 label Labe 01 stroke stroke1 labelUpDown un color OxFFO000 gt lt AxisLine value 2500 label Labe 02 stroke stroke1 labelAlign ien labelUpDown down color OxFFO000 gt lt AxisLine value 2000 label Label 03 stroke stroke1 labelUpDown up labelAlign en labelRotation 90 color OxFFO000 gt lt lines gt lt ranges gt Draws areas Draws 2 areas by Creating 2 AxisRanges lt AxisRange startValue 7000 endValue 2000 label Area 1 fontSize 11 labelHorizontalAlign eft color OxFFOOFF gt lt fill gt lt SolidColor color OxOOFF99 alpha 0 2 gt lt fill gt lt AxisRange gt 133 151 Kkoolz 7 lt AxisRange startValue Mar endValue May label Area 2 fontSize 11 labelVerticalAlign bottom color OxO066FF horizontal false gt lt fill gt lt SolidColor color OxOO99FF alpha 0 2 gt lt fill gt lt AxisRange gt lt AxisMarker gt lt backgroundElements gt lt Line2DChart gt lt KoolChart gt lt Example 76 Example Lines and Ranges gt The following table shows the properties for lines and ranges Properties Values Descriptions lines AxisLine Defines lines displayed in charts ranges AxisRange Defines ranges displayed in charts lt Table 28 Nodes to Display Lines or Ranges gt
5. 4 Samples This directory has the HTML and XML files for sample charts 1 5 Supported Chart Types The JavaScript component of KoolChart is separated in 9 JavaScript files KoolIntegrationjs is the integrated JavaScript version of KoolChart component It can render all types of charts provided by KoolChart The following table shows the JavaScript file name and the corresponding chart types that can be created by the JacaScript file Please refer to lt 5 Using Layouts gt for further information 6 151 Kool thoy JavaScript File Name Chart Types KoolChart js Basic Charts Column Bar Pie Line Area etc KoolRadarChart js Radar Chart KoolHistoryChart js History Chart KoolRealtimeChart js Real Time Chart KoolScrollChart js Scroll Chart KoolMatrixChart js Matrix Chart KoollmageChart js Image Chart KoolRealtimePremium js Real Time Premium Chart KoolGaugeChart js Gauge Chart Koollntegration js All Charts 7 151 Kkoolz 7 2 Creating Charts 2 1 Registering KoolChart License Keys Once you have obtained the appropriate license keys you should register them before you use KoolChart for HTMLS5 The license file is in the following path of the product CD LicenseKey KoolChartLicense js All you have to do for applying the license key is to include KoolChartLicensejs in the head of your HTML document between the lt he
6. chart interval 60 gt lt KoolChart gt lt Example 35 Example HttpServiceRepeater with the Column3D Chart gt 6 16 Radar Charts The definition of the Radar chart starts with the lt RadarChart gt tag and ends with the lt RadarChart gt tag The series of the Radar chart is RadarSeries Two kinds of axes radialAxis and angularAxis are used in the Radar chart The radialAxis corresponds to the radius of the chart This axis maps numeric data to a distance between the center and the perimeter of the chart The angularAxis corresponds to the perimeter of the chart and takes values that are categories rather than numerics The following examples show the annual household expenditure data in a table format and its array and XML format 1 Table Format 2005 2006 2007 2008 Food 100 100 180 150 Health Care 80 120 200 210 Transportation 70 115 100 240 Clothing 80 120 140 210 Education 90 160 130 200 Shelter 100 180 165 140 Leisure 76 120 130 170 Others 80 140 140 190 57 151 Kool 2 Array Format var chartData catName Food year2005 100 year2006 100 year2007 180 year2008 150 catName Health Care year2005 80 year2006 120 year2007 200 year2008 210 catName Transportation year2005 70 year2006 115 year2007 100 year2008 240 catName Clothing year2005 80 year2006 120 year2007 140 year2008 210
7. lt showDataEffect gt lt Pie3DSeries gt lt Pie3DSeries nameField Month field Cost displayName Cost labelPosition inside gt lt showDataEffect gt lt SeriesZoom gt lt showDataEffect gt lt Pie3DSeries gt lt series gt lt Pie3DChart gt lt KoolChart gt lt Example 24 Pie Stacked 3D Chart gt 43 151 Kool har Annual Report 2008 lt Figure 10 Output Pie Stacked 3D Chart gt 6 9 Bubble 3D Charts The definition of the Bubble3D chart starts with the lt Bubble3Dchart gt tag and ends with the lt Bubble3Dchart gt tag The series of the Bubble3D chart is Bubble3DSeries The Bubble3D chart has a set of three numeric values Each value represents the values of X Y axes and radius In a Bubble3D chart the size of the bubbles is determined by the third value radius As the series represents the numeric data you should set the xFiela yFie d and radiusField properties of the Bubble3DSeries node lt KoolChart gt lt Bubble3DChart showDataTips true gt lt series gt lt Bubble3DSeries XField Profit yField Cost radiusField Revenue gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt fills gt lt 6 colors are used alternately to fill the bubbles gt lt SolidColor color 0xFFO000 gt lt SolidColor color 0x00FF00 gt lt SolidColor color 0x0000FF gt lt SolidColor color OxFFOOFF gt lt SolidColor color 0xFFFF
8. retryCount 30 gt lt RPCList gt lt HttpMultiServiceRepeater gt lt KoolChart gt lt Example 42 Example Real time Premium Chart gt The above sample layout generates a Real time premium chart which has two line series and one column series and their intervals are 3 seconds 5 seconds and 10 minutes repectively The RPC request scenario is that the first RPC request is sent after the initial chart loading is finished and then the next RPC request is sent at the interval specified for each series In this example two line series have no initial data and the column series has the initial data It displays data after the initial loading for 10 minutes then it refreshes the chart with the new data based on the interval of each series for the next 10 minutes The accumulated sum for 10 minutes is displayed as a column You can see the examples of the server side scripts for each case Please see the following folder of the installation CD root of CD or ZIP file Samples RealtimeServerSamples The following is the descriptions of the server side scripts for the above example The server side example of the Real time premium chart http demo riamore net realtimeSample hourDataToday jsp 81 151 Kkoolz 7 The data in this example is based on arbitrary random data requestAllData true generates data every 5 seconds from hour 00 until hour minute requestAllData false gener
9. 131 151 Kool Anual Report n Feb Mar Apr May Jun Jul Aug Sep Oc Now Dec lt Figure 46 Output Function Call for fillJsFunction gt 7 10 Creating Areas and Lines You can create upper and lower limit lines or ranges as the following examples show 3 000 3000 3000 2800 2800 2600 2600 2400 2400 2200 2200 2000 2000 1800 1800 700 1600 1600 Area 1 1 400 1400 1400 1200 1200 1000 1000 90 800 800 600 600 400 be 400 200 z 200 pa s Area Area 3 H o gt o Jan Feb Ma Ap May Jun Jul Aug Sep Oct Nov Dec Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec lt Figure 47 Outputs Charts with Lines and Ranges gt 132 151 Kool dior Parameters Descriptions The properties of Displays ranges or lines in the background backgroundElements backgroundElements or or foreground annotationElements annotationElements AxisMarker Displays AxisLine and AxisRange AxisLine Lines AxisRange Ranges The following layout shows how to display lines and ranges lt KoolChart backgroundColor OxFFFFFF gt lt Stroke id strokel color OxFFOO00 weight 1 gt lt Line2DChart showDataTips true gt Displays lines and areas as background elements lt backgroundElements gt lt GridLines gt Draws lines and areas as grids lt AxisMarker gt Creating AxisMarker to represent lines and areas lt lines gt Draw lines
10. All the properties of Caption can be used in AxisRange and AxisLine The following table shows the properties of AxisRange and AxisLine The properties of Caption are not shown in the following table Please refer to lt 5 3 1 Creating Captions and Subcaptions gt for the properties of Caption AxisLine Properties Values Descriptions f Specifies the horizontal alignment of the label If the center left obt labelAlign value of the horizontal property is false left is the default right a same as top and right is the same as bottom Specifies the position from the line where the label is labelUpDown up down default up placed If the value of the Aorizonta property is false up is the same as right and down is the same as left Rotates labels If embeded fonts are used then any value of 0 360 labelRotation 0 360 default 0 can be available but if system fonts are used then only 0 is available linePosition center left right Specifies the positions where the lines are displayed 134 151 Kkoolz 7 for CategoryAxis In CategoryAxis multiple positions are allowed for one value stroke Stroke Defines the style of lines If you want to draw the diagonal line specify the startValue Number String position where the line starts The startVa ue property is ignored when the value property is set If you want to draw the diagonal line specifies th
11. LicenseKey KoolChartLicenses gt lt script gt lt script language javascript type text javascript src KoolChart S Koo lChart js gt lt script gt 3 Include the KoolChart CSS file KoolChart css to create Preloader Legend Scroll chart or History chart lt link rel stylesheet type text css href KoolChart Assets Koo Chart css gt 4 Create the parent DIV of the chart in which the chart is created lt div id chartHolder style width 600px height 400px gt lt div gt 5 Create the layout and the dataset 6 Call the KoolChart create function KoolChart create chart1 chartHolder chartVars 100 100 7 If you want the chart you have created to be shown in IE 7 or 8 include excanvas js IE 7 and 8 does not support HTML5 but excanvas js makes those browsers emulate HTML5 You should keep in mind that in the performace perspective IE 7 or 8 with excanvas js is much worse than HTML5 supported browsers lt if IE gt lt script language javascript type text javascript src KoolChart JS excanvas js gt lt script gt lt endif gt Please refer to http excanvas sourceforge net for excanvas js 12 151 Kkoolz 7 2 3 Viewing KoolChart Versions You should know the version of KoolChart to request technical support and version update service In order to find the KoolChart version you are using
12. S The size of the image is determined by the Z value gt e 28 ey The position is determined by the X and Y values l The color of the area is determined by the Z value The position is determined by the X and Y values plot The type of the plot is determined by the Z value lt Table 12 Types of the Matrix2D Chart gt The following example shows how to use the type property of the Matrix chart lt Matrix2DChart showDataTips true type renderer selectionMode single gt The following table shows the properties of the Matrix2D chart Properties Values Descriptions renderer image fill plot f type Defines the data representation of the Matrix2D chart default renderer Specifies the size criteria of the item radius size 2 ttr area size area drawType radius area default radius If the value of the type is fill or plot the value of drawType will be ignored lt Table 13 Properties Matrix2D Chart gt 72 151 Kool dior The following example describes how to use the draw7ype property when the type is renderer or image in the Matrix2D chart lt Matrix2DChart showDataTips true type renderer drawlype radius selectionMode single gt The following shows the outputs of the Matrix2D chart drawType radius drawType area Sales City Product Sales City Product Product F Di Fe EI Product F Di op EN bea a Di
13. The local time is used not GMT lt horizontalAxis gt lt DateTimeAxis id hAxis dataUnits seconds labelUnits seconds datalnterval 3 interval 9 formatter dateFmt displayLocalTime true gt lt horizontalAxis gt lt series gt lt Column2DSeries yField Volume xField Time displayName Trading Volume itemRenderer net riamore rmate charts renderers GradientColumnItemRenderer gt lt fill gt lt SolidColor color 0xB0C759 gt lt fill gt lt verticalAxis gt lt LinearAxis id vAxis1 title Volume minimum 0 maximum 10000 gt lt verticalAxis gt lt Column2DSeries gt lt Line2DSeries xField Time yField Price displayName Stock Price itemRenderer mx charts renderers CircleltemRenderer radius 5 fill OxFFFFOO gt lt stroke gt lt Stroke color 0xE48701 weight 2 gt lt stroke gt lt lineStroke gt lt Stroke color 0xE48701 weight 4 gt lt lineStroke gt lt verticalAxis gt lt LinearAxis id VvAxis2 title Price minimum 0 maximum 1000 gt lt verticalAxis gt lt Line2DSeries gt lt series gt lt verticalAxisRenderers gt lt Axis2DRenderer placement left axis vAxis1 gt lt Axis2DRenderer gt lt Axis2DRenderer placement right axis vAxis2 gt 148 151 Kkoolz 7 lt Axis2DRenderer gt lt verticalAxisRenderers gt lt RealTimeChart gt Defines RPC to refresh data lt HttpServiceRepeater url http demo riamore net char
14. Y axis value Pie2D 3D Series 0 value 1 percentage 2 nameField Y User defined tooltips function dataTipFunc seriesId seriesName index xName yName data values return lt font color CC3300 gt User defined data tips lt font gt WnseriesId seriesId lt br gt lt font color 0000FF gt Current Data lt font gt lt b gt seriesName lt b gt WnitemIndex index lt br gt lt font color 0000FF gt xDisplayName lt font gt lt b gt lt font size 11 gt xName lt font gt lt b gt lt br gt lt font color 0000FF gt yDisplayName lt font gt lt b gt lt font size 11 gt yName lt font gt lt b gt lt br gt data data lt br gt values values lt Example 69 Example JavaScript Function Called for Tooltips gt HTML tags can be used for user defined tooltips The following table describes the parameters used in the above example Parameters Descriptions seriesId The ID of the series in the layout if it is defined seriesName The displayName for the series index The index of the clicked items The index of leftmost or top items is 0 xName If displayName is defined for X axis X axis displayName will be displayed 125 151 Kool yName If displayName is defined for Y axis Y axis displayName will be displayed data The original data of the items The value of the items This parameter is passed as an
15. changeLayout gt lt input type button value Change data onclick changeData gt lt input type button value Change Both onclick changeBoth gt lt td gt lt tr gt lt tr gt lt td gt lt div class content gt lt div id chartHolder style width 600px height 400px gt lt div gt lt div gt lt td gt lt tr gt lt table gt lt body gt lt html gt lt Example 80 Example Dynamic Changes gt 7 15 Creating Multiple Charts in an HTML You can create multiple charts in a web page The following example shows the two charts created in a single HTML file 144 151 Kool Annual Report Anual Report 32000 z 26000 a 30000 a 24000 5 28000 J d 22000 e 26000 sg e 20000 e 24000 d 22000 18000 A a 16000 20000 gi 18000 14000 16000 S 12000 14000 E 10000 12000 8000 10000 6000 D 8000 z 4000 once 2000 4000 S R 2000 o D Jan Mar May Jul Sep Nov Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Feb Apr Jun Aug Oct Dec lt Figure 50 Outputs Two Charts in a Single HTML File gt The following example shows how to create two charts in a single HTML file lt html lang en gt lt head gt lt meta http equiv Content Type content text html charset utf 8 gt lt script src KoolChartjs language javascript gt lt script gt lt script language JavaScript type text javascript gt var chartVars2 amp Kool
16. gt lt series gt lt Defines the series gt lt ImageSeries yField Data imageDisplayType multiple styleName seriesStyle formatter fnumFmt gt lt imgSource gt lt The unit value of the first image is 100 gt lt ImageSourceltem maintainAspectRatio false url Samples Images 3 Lpng value 100 gt lt The unit value of the second image is 200 gt lt ImageSourceltem maintainAspectRatio false url Samples Images 3 2 png value 200 gt lt The unit value of the third image is 300 gt lt ImageSourceltem maintainAspectRatio false url Samples Images 3 3 png value 300 gt lt imgSource gt lt ImageSeries gt lt series gt lt horizontalAxisRenderers gt lt AxisRenderer axis fhAxis fontSize 11 gt lt horizontalAxisRenderers gt lt visible fasle for the Y axis gt lt verticalAxisRenderers gt lt AxisRenderer axis VAxis visible fa se includeInLayout fa se gt 76 151 Kkoolz 7 lt verticalAxisRenderers gt lt ImageChart gt The output of the above layout is as follows Population Distribution unit image 1 ae o i 0 a t D I a Pa ee D s r FHF FHF t FHF Fe iwi s agi s s iti e e s ai r r r iti iti iwi r 100 jf 200 ii 300 lt Figure 27 Output Image Chart gt 6 23 Real Time Premium Charts The Real time premium chart is the advanced v
17. multiple dataset multiple series stacked Data are stacked on the top of each other Each data represents the cumulative value of the data beneath it overlaid Data are represented as the overlapped columns The data in the back can be hidden 100 Data are stacked on the top of each other adding up to 100 Each data represents as a percentage The following figures show the outputs of the types of the Column chart 3000 2800 2600 2400 2200 2000 1800 1600 _ 1400 1200 1000 8i e 4i ooog KR 2 o E January March May July September November January March May July September November February April June August October December February April June August October December nm n n oz lt type clustered gt lt type 100 gt 3000 2800 2600 2400 5000 EE EE EEN 4000 2200 2000 1800 3000 1600 1400 1200 2000 1000 s00 600 400 200 January March May July September November January March May July September November February April June August October December February April June August October December D H D D lt type overlaid gt lt type stacked gt lt Figure 3 Output Types of the Column Chart gt 35 151 6 5 Cylinder 3D Charts 6 5 1 Cylinder 3D Column Charts The Cylinder3D column chart is the same as the Column3D chart except the shape cylinder shaped column is used instead of the cube shpaed column for the Cylinder3D column chart All
18. since the Combination chart uses the series of the Column chart and the Line chart at the same time Column2DSet or Column3DSet should be defined to combine column series 51 151 Kkoolz 7 To create the Combination 2D chart define Column2DSet and then create Column2DSeries as the child of Column2DSet The type of Column2DSet or Column3DSet is the same as those of other charts The default value is overlaid Create Line2DSeries as the sibling of Column2DSet The following layout shows how to create the Combination chart with the Column chart and the Line chart as described above lt KoolChart gt lt Combination2DChart showDataTips true gt lt horizontalAxis gt lt CategoryAxis categoryField Month gt lt horizontalAxis gt lt series gt lt series gt yField Profit displayName Profit gt yField Revenue displayName Revenue gt lt series gt yField Cost displayName Cost gt lt lineStroke gt Specifies the thickness and the color of the line lt Stroke color 0xFFCCO0 weight 4 gt lt lineStroke gt lt Line2DSeries gt lt series gt lt Combination2DChart gt lt KoolChart gt lt Example 31 Example Combination Chart gt The following outputs are the running results of the above layouts 52 151 Kool N D D o ANN January March May July September November February April June August October December lt Figure 18 Outp
19. time formatted axis The following table describes the axis specific properties Axes Properties Values Descriptions The field name Specifies the field name of the axis You categoryField on f i ex Month cannot omit this value in CategoryAxis displayName String character string Specifies the text displayed in tooltips CategoryAxis f f f title Stirng character string Specifies the title of the axis i f Specifies the name of the function called labelJsFunction JavaScript Function i to display the user defined label Specifies the gap between two consecutive interval Number labels displayName String character string Specifies the text displayed in tooltips Specifies the minimum value of the axis minimum Number e label LinearAxis SS Specifies the maximum value of the axis maximum Number label title Stirng character string Specifies the title of the axis labelJsFunction Javascript Function Specifies the name of the function called to display the user defined label DateTimeAxis milliseconds seconds Specifies the unit of the data dataUnits minutes hours days weeks months years milliseconds seconds Specifies the unit of the label labelUnits minutes hours days weeks months years title Stirng character string Specifies the title of the axis Specifies the interval time date between said TES two consecu
20. BoxltemRenderer gt lt fill gt lt SolidColor color eca614 gt lt fill gt lt Column2DSeries gt lt series gt lt horizontalAxisRenderers gt lt Axis2DRenderer axis hAx s2 showLabels fa se tickLength 07 gt lt horizontalAxisRenderers gt lt annotationElements gt syncCrossRangeZoomer Draws crosshairs in the main chart by referencing the id of CrossRangeZoomer and using the data in the sub chart lt CrossRangeZoomer id co umnCRZ enableZooming false syncCrossRangeZoomer cand eCRZ horizontalLabelFormatter nft verticallabelPlacement top gt lt annotationElements gt lt Column2DChart gt lt subChart gt lt dataSelector gt lt DualScrollBar inverted true visibleItemSize 50 gt lt dataSelector gt lt DualChart gt lt rMateChart gt lt Example 45 Example Candlestick Chart with Disclosure gt In addition to the basic candlestick chart the candleline and candlearea charts can be created To create candleline and candlearea chart you need to define lt CandleLine2D gt and lt CandleArea2D gt instead of lt Candlestick2D gt The outputs of the candleline and candlearea charts are like as below figures lt Figure 31 Output Candleline and Candlearea Charts gt and please refer to the API document and sample charts for further information 90 151 Kkoolz 7 Cnadleline Chart Sets the line color and the fill color based on the value S 1 560
21. Cost 4000 Profit 26200 Month May Revenue 28000 Cost 10000 Profit 18000 Month Jun Revenue 12000 Cost 5000 Profit 7000 Month Jul Revenue 22000 Cost 10000 Profit 12000 Month Aug Revenue 13000 Cost 6000 Profit 7000 Month Sep Revenue 22000 Cost 10000 Profit 12000 Month Oct Revenue 29000 Cost 8000 Profit 21000 Month Nov Revenue 18000 Cost 7500 Profit 10500 Month Dec Revenue 30000 Cost 12000 Profit 18000 var chartData2 Month Jan Revenue 1000 Cost 500 Profit 500 Month Feb Revenue 1500 Cost 700 Profit 800 Month Mar Revenue 1200 Cost 600 Profit 600 Month Apr Revenue 3020 Cost 400 Profit 2620 Month May Revenue 2800 Cost 1000 Profit 1800 Month Jun Revenue 1200 Cost 500 Profit 700 Month Jul Revenue 2200 Cost 1000 Profit 1200 Month Aug Revenue 1300 Cost 600 Profit 700 Month Sep Revenue 2200 Cost 1000 Profit 1200 Month Oct Revenue 2900 Cost 800 Profit 2100 Month Nov Revenue 1800 Cost 750 Profit 1050 Month Dec Revenue 3000 Cost 1200 Profit 1800 1 146 151 Kkoolz 7 lt script gt lt head gt lt body gt lt table align center border 0 cellpadding 0 cellspacing 0 gt lt tr gt lt td align center gt lt
22. DD 10 H 1 H Hour a ia N 1 N Minute in Ge S Second SS 30 lt Table 21 Descriptions FormatString gt 7 3 8 Adding Titles You can add titles to axes For Example you can add Profit as a title for the vertical axis and Month for the horizontal axis The following example shows how to add titles lt KoolChart gt lt Options gt lt Caption text Anual Report gt lt Options gt lt Column3DChart showDataTips true gt lt horizontalAxis gt lt CategoryAxis categoryField Month title Month gt Month is a title for the horizontal axis lt horizontalAxis gt lt verticalAxis gt lt LinearAxis title Profit gt Profit is a title for the vertical axis lt verticalAxis gt lt horizontalAxisRenderers gt horizontalAxisRenderers is defined for styles lt horizontalAxisRenderers gt 111 151 Kool lt verticalAxisRenderers gt verticalAxisRenderers is defined for styles lt Axis3DRenderer axisTitleStyleName title gt lt verticalAxisRenderers gt lt series gt lt Column3DSeries yField Profit gt lt series gt lt Column3DChart gt lt Style gt The Style node is defined for the style of axis titles title fontSize 12 color 0x0000FF fontWeight bold lt Style gt lt KoolChart gt lt Example 59 Usage Example Axis Titles gt Anual Report 32000 g 28000 H 24000 H 20000 H 3 f 16000 f e p 12000 il 80
23. RadarChart gt lt KoolChart gt lt Example 36 Example Radar Chart gt The following is the output produced by the layout and data above Household Expenditure Yearly 2010 2013 Leisure Others Education Food Clothing Health Care Transportation 2010 2011 O 2012 2013 lt Figure 21 Output Radar Chart gt 61 151 Kkoolz 7 6 17 Target vs Actual Charts The Target vs Actual chart displays the target and actual data at the same time in the chart It has the 2D linear type and the 3D cylinder type The definition of the 2D linear type starts with lt Combination2Dchart gt and ends with lt Combination2Dchart gt For the 3D cylinder type it starts with lt Combination3Dchart gt and ends with lt Combination3Dchart gt Only two types of series the series for the target and the series for the actual can be used for Target vs Actual charts The properties of the Target vs Actual chart are the same as those of the Cartesian chart Please refer to lt Table 6 Properties Cartesian Chart gt Keep in mind that you should define the series of the actual first and then define the series of the target 2D Linear Type 3D Cylinder Type 3D Cylinder Bar Type Chart Combination2DChart Combination3DChart Combination3DChart Series for Actual Target2DResultSeries Target3DResultSeries HTarget3DResultSeries Series for Target Target2DGoalSeries Target3DGoalSeries HT
24. The following is an example layout for the Horizontal Linear gauge lt KoolChart backgroundColor OxFFFFFF cornerRadius 22 borderStyle sold lt Options gt lt Caption text Gauge gt lt Options gt lt HLinearGauge id DI width 300 height 100 minimum 0 maximum 200 liveDragging true labels 20 25 50 75 20017 value 50 targetMark 90 tickThickness 27 tickLength 4 tickInterval 5 snapInterval 7 linearColumnWidth e tickColor 000000 valueLabelFontWeight bold ZS lt Style gt valuelabel fontWeight bold lt Style gt lt KoolChart gt lt Example 48 Example Horizontal Linear Gauge gt a cae lt Figure 34 Output Horizontal Linear Gauge gt 96 151 Kkoolz 7 6 26 Slide Charts You can use the slide chart as a way of presenting data After creating several charts regardless of the chart types you can combine them as a single chart The following rules must be followed to create the Slide chart 1 The layouts for each chart should be added by calling the setSlideLayoutSet function 2 The data for each chart should be added by calling the setSlideDataSet function For example if you want to create a Slide chart which has 5 different chart types the 5 pairs of the dataset and the layout are required The type for the layout and the dataset should be Array The following is an example layout for the Slide c
25. Tooltips 2 Use of Axis labels axis or axis renderer 3 Use of numeric data fields for Column Bar or Pie charts The user defined function can be used by creating the JavaScript function and setting the function name 122 151 Kkoolz 7 as the value of the corresponding property in the layout The Formatter property cannot be used with the user defined function for the axis label or numeric data field except tooltips If Formatter and labeUsFunction are defined at the same time the chart will not be generated successfully 123 151 Kkoolz 7 7 9 1 DataTips ToolTips Functions You can create user defined tooltips using dataTipJsFunction When the mouseover event occurs the function defined as the value of dataTipsFunction property is called and then return the string to be shown as the tooltips The following example shows how to define dataTipJsFunction lt KoolChart backgroundColor 0xFFFFEE cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Anual Report gt lt Options gt lt Column3DChart showDataTips true dataTipJsFunction dataTipFunc gt lt horizontalAxis gt lt CategoryAxis categoryField Month displayName Date gt lt horizontalAxis gt lt verticalAxis gt lt LinearAxis displayName Amount gt lt verticalAxis gt lt series gt lt Column3DSeries id series1 yField Profit displayName Profit gt lt showDataEffect gt lt SeriesInterpo
26. alignSymbol left right default left symbol Whether or not to use the thousands True false default true useThousandsSeparator separator 108 151 Kkoolz 7 useNegativeSign true false default true Indicates how to display negative values If the value of useNegativeSign is true displays negative values with a leading minus sign otherwise negative values are enclosed in parentheses Specifies the decimal precision If the precision Number default 1 value of precision is 1 the precision will be ignored Separator default comma Specifies the delimiter as a thousands thousandsSeparatorTo LU separator decimalSeparatorTo Separator default dot Specifies the delimiter as a decimal point lt Table 20 Properties CurrencyFormatter gt 109 151 Kkoolz 7 7 3 7 Using Date Formats in DateTimeAxis If DateTimeAxis is defined for the horizontal axis of the Line chart the data will be displayed along the horizontal axis by using the date format For example if you set the value of labelUnits to days the labels will be displayed by using the default date format of your computer e g MM DD YYYY You can change the date format of the data by using DateFormatter The following example shows how to use DateFormatter lt rMateChart gt Epes ene Anual Report lt Caption text Anual Report gt lt Options gt 30 000
27. array type and the elements of the array are determined based on the chart type as follows Bar2DSeries Bar3DSeries 0 X axis value 1 Y axis value Column2DSeries Column3DSeries 0 X axis value 1 Y axis value values Area2DSeries 0 X axis value 1 Y axis value i 0 X axis value 1 Y axis value 2 Bubble3DSeries radius Line2DSeries 0 X axis value 1 Y axis value Pie2DSeries Pie3 DSeries 0 value 1 percentage 2 nameField lt Table 25 Parameters Function Called for Tooltips gt Anual Report 3000 User defined data tips seriesId series1 Current Data Profit itemIndex 8 xDisplayName Date yDisplayName Amount man TT Jan Feb Mar Apr May Jun Jul Aug lt Figure 43 Output Function Call for Tooltips gt 2800 2600 2400 2200 2000 1800 1600 1400 1200 1000 800 600 400 200 0 7 9 2 Axis Labels You can create user defined axis labels by using labeUsFunction To create user defined axis labels you create a callback function and then set the value of the abel sFunction property to the function name You can define labelJsFunction in axes or axis renderers The function defined in axes runs first The following example shows how to define labelJsFunction in horizontalAxis lt KoolChart backgroundColor 0xFFFFEE cornerRadius 12 borderStyle solid gt lt Options gt 126 151 Kool dior lt Caption text An
28. as a child of the KoolChart node 2 The style name begins with a dot followed by the character string that begins with a lowercase first character 3 The properties of the style should be enclosed in the curly brace 4 The colon should be placed between the property name and the property value as a seperator and the property definition ends with the semicolon CL The following table shows the correct and incorrect examples Correct example Incorrect example lt KoolChart gt lt Options gt lt Style gt KoolChartStyle backgroundColor OxFFFFFE borderColor 0x77EE9E cornerRadius 12 borderThickness 3 borderStyle solid lt Style gt lt KoolChart gt lt KoolChart gt lt Options gt lt Style gt been backgroundColor 0xFFFFFE borderColor 0x77EESE SE borderThickness 3 borderStyle solid lt Style gt lt KoolChart gt lt Table 5 Example Correct and Incorrect representations of the Style Node gt Once you create the style KoolChartStyle as above you can apply the style as follows lt KoolChart gt lt Options gt lt Caption text Annual Report gt lt Options gt lt Style gt 24 151 Kool hor KoolChartStyle backgroundColor OxFFFFFE borderColor 0x77EE9E cornerRadius 12 borderThickness 3 borderStyle solid lt Style gt lt KoolChart gt lt Example 12 Example How to Ap
29. as a stacked type lt horizontalAxis gt lt CategoryAxis categoryField Month gt lt horizontalAxis gt lt series gt Sets the value of lineToEachItems to true lt Column2DSeries yField Profit lineToEachItems true alwayShowLines true gt Defines styles of lines lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Column2DSeries gt lt Column2DSeries yField Cost lineToEachItems true alwayShowLines true gt lt linkLineStroke gt lt Stroke weight 2 color 0x000000 caps none gt 118 151 Kool lt linkLineStroke gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Column2DSeries gt lt Column2DSeries yField Revenue lineToEachItems true alwayShowLines lt linkLineStroke gt lt Stroke weight 2 color 0x000000 caps none gt lt linkLineStroke gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Column2DSeries gt lt series gt lt Column2DChart gt true gt lt Example 65 Example Lines between Stacked DataSets gt Anual Report 7000 6000 5000 4000 3000 2000 1000 lt Figure 41 Output Chart with Lines between Stacked DataSets gt 7 8 Setting Functions for Click Events on Items The itemClickJsFunction property enables you to pass information for items to your script whenever you click on the item of the chart To
30. backgroundColor 0xFFFFEE cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text History 2D Chart gt lt Options gt lt HistoryChart gt lt displayerChart gt lt Sets displayerChart gt lt Displayer id chartl showDataTips true width 100 height 100 gt lt horizontalAxis gt lt CategoryAxis id mainHAxis categoryField Date gt lt horizontalAxis gt lt series gt lt Column2DSeries id columnSeries yField Data1 fill 0xBOC759 displayName Datal gt lt showDataEffect gt lt SeriesInterpolate duration 1000 gt lt showDataEffect gt lt Column2DSeries gt lt series gt lt Displayer gt lt displayerChart gt lt navigator gt lt Navigator id navi width 100 height 100 gt lt horizontalAxis gt lt CategoryAxis categoryField Date id naviHAxis gt lt horizontalAxis gt lt horizontalAxisRenderers gt lt AxisRenderer axis naviHAxis visible false gt lt horizontalAxisRenderers gt lt verticalAxis gt lt LinearAxis id vAxis gt lt verticalAxis gt lt verticalAxisRenderers gt lt AxisRenderer axis vAxis visible false gt lt verticalAxisRenderers gt lt backgroundElements gt lt GridLines direction horizontal gt lt backgroundElements gt lt series gt lt Area2DSeries name A yField Datal gt lt series gt lt Navigator gt lt navigator gt 68 151 Kool lt selector gt lt Displays 3
31. baseAtZero fa se gt lt verticalAxis gt lt series gt openField Sets the field name for the opening price showMaxValueLabel Shows the maximum value of the data points currently displayed in the chart showMinValueLabel Shows the minimum value of the data points currently displayed in the chart symbolField Sets the field name for the disclosure symbolRenderer Sets the disclosure symbol lt Candlestick2DSeries openField openprc closeField closeprc highField high lowField ow showMinValueLabel true showMaxValueLabel true maxLabelJsFunction maxLabe Func minLabeUsFunction minLabelFunc symbolField disclosure 88 151 Kool symbolRenderer UpArrowltemRenderer gt Sets the fill color when the closing price is higher than the opening price lt fill gt lt SolidColor color f0000 alpha 0 5 gt lt fill gt Sets the color of the line connecting the highest price and the lowest price when the closing price is higher than the opening price lt stroke gt lt Stroke color ff0000 gt lt stroke gt Sets the color of the outer line of the bar when the closing price is higher than the opening price lt boxStroke gt lt Stroke color ff0000 gt lt boxStroke gt Sets the fill color for the bar when the opening price is higher than the closing price lt declineFill gt lt SolidColor color 0000ff alpha 0
32. color and gradient of the gauge textAlign right paddingRight 70 fontSize 11 gt lt Options gt lt CurrencyFormatter id numFmt precision O currencySymbol alignSymbol right gt lt CircularGauge width 300 height 300 valueChangeFunction valueChangeFunc startAngle 270 minimumAngle 0 maximumAngle 360 minimum 0 maximum 200 value 28 91 151 Kool interval ZO minorInterval 2 formatter fnumFmt padding 10 labelGap 10 tickLabelStyleName tickText valueLabelStyleName va ueText editMode true liveDragging true showDataTip true tickColor OxCCCCCC minorTickColor 0x932108 coverRadiusRatio 07 hideTickLabel first needleThickness 207 pointThickness 5 needleLengthRatio 0 6 needlePointStyle steep e needleBackLengthRatio 0 isValueTop ise valueYOffset 50 gt lt frameStroke gt lt Stroke color OxCCCCCC weight 10 gt lt frameStroke gt lt frameFill gt lt SolidColor color 0x932108 gt lt frameFill gt lt needleFill gt lt LinearGradient angle 90 gt lt entries gt lt GradientEntry color OxEEEEEE ratio 0 alpha 1 gt lt GradientEntry color 0x555555 ratio 1 alpha Z gt lt entries gt lt LinearGradient gt lt needleFill gt lt needleCoverFill gt lt RadialGradient gt lt entries gt lt GradientEntry color OxFFFFFF r
33. div class content gt lt div id chartHolder style width 600px height 400px gt lt div gt lt div gt lt td gt lt td align center gt lt div class content gt lt div id chartHolder2 style width 600px height 400px gt lt div gt lt div gt lt td gt lt tr gt lt table gt lt body gt lt html gt lt Example 81 Example Two Charts in a Single HTML File gt 7 16 Real Time Chart Example A Stock Monitoring Chart The Real time chart is widely used for monitoring the variation of stock prices The following example shows how to create a Real time chart to monitor stock prices lt KoolChart backgroundColor 0xFFFFEE cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Stock Monitoring gt lt SubCaption text Refresh every 3 seconds Random data fontSize 11 textAlign right gt lt Legend gt lt Options gt lt DateFormatter id dateFmt formatString HH NN SS gt Defines formatter Type time Refresh every 3 seconds Duration 60 seconds lt RealTimeChart id chart dataDisplayType time timePeriod 60 interval 3 showDataTips true gt 147 151 Kool lt backgroundElements gt lt GridLines direction both gt lt backgroundElements gt DateTime is used for the horizontal axis The measure of data is second Data refresh interval is 3 seconds The interval of axis label is 9 deconds
34. duration J000 gt lt showDataEffect gt lt stroke gt lt Stroke weight 7 color 0x999999 alpha 0 77 gt lt stroke gt lt Column2DSeries gt lt series gt lt Column2DChart gt lt KoolChart gt lt Example 41 Example Layout of the From To Chart gt As shown in the layout above the minField property with the value of from is added in the Column2DSeries node The filJsFunction and dataTipJsFunction are used to create user defined tooltips and colors Please refer to lt 7 9 Setting User Defined Functions gt for further information The output of the above layout is as follows 2013 Revenue Variation Monthly Unit K 20 000 5 18 000 7 16 000 14 000 fs 12 000 AM 10 000 H 8 000 6 000 4 000 Je 2 000 4 JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC NextYR lt Figure 26 Output From To Chart gt 6 21 Matrix Charts The Matrix chart represents data using images or figures whose position is determined by the X and Y values and the size is determined by the Z value The types of the Matrix chart are as follows 71 151 Kool har Types of the Matrix SE Descriptions Outputs chart a Sege a SS The position is determined by the X and Y values w Inesa renderer e RR The size of the item is determined by the Z value BEE Bei ep e ee B The position is determined by the X and Y values l a image
35. gt lt horizontalAxis gt lt type Chart gt lt KoolChart gt return layout Creating the dataset as an array type var chartData Month Jan Profit 13000 Month Feb Profit 12000 Month Mar Profit 15000 Month Apr Profit 22200 Month May Profit 18000 Month Jun Profit 15000 Month Jul Profit 22000 Month Aug Profit 14000 Month Sep Profit 26000 Month Oct Profit 22000 Month Nov Profit 28000 Month Dec Profit 34000 lt Example 49 Example Slide Chart gt 98 151 Kool JAN FEB MAR Line Chart APR MAY JUN JUL AUG SEP lt Figure 35 Output Slide Chart gt 99 151 Kool dior 7 Using Layouts for Advanced Users 7 1 Setting Numeric Fields in Charts You can display the values for each data item as follows Anual Report 7000 6000 5000 4800 4000 ei amp 800 w G 3000 EI 2000 D e eg 1000 400 deg ege 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 o V E ADept V E BDept V E C Dept The abelPosition property of the series is used to display the values of data in charts The valid values of labelPosition are different based on the type of the series The following table shows the valid values for each series Series Values Descriptions Column
36. gt lt verticalAxisRenderers gt 8 S me Ce nm ee e DEE H 104 151 Kool 7 3 4 Creating Dual Y Axes lt KoolChart cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Annual Report gt lt SubCaption text 2008 gt lt Legend gt lt Options gt lt Combination3DChart showDataTips true gt lt horizontalAxis gt lt CategoryAxis categoryField Month gt lt horizontalAxis gt Creating a vertical axis for a column series lt verticalAxis gt lt series gt lt Column3DSeries yField Profit displayName Profit gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt fill gt lt SolidColor color 0x66CC66 gt lt fill gt lt Column3DSeries gt lt Line2DSeries selectable true yField Cost displayName Cost gt Creating a vertical axis for a line series lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt lineStroke gt lt Stroke color 0xFFCC00 weight 3 gt lt lineStroke gt lt Line2DSeries gt lt series gt Creating verticalAxisRenderers for each series lt Combination3DChart gt lt KoolChart gt lt Example 55 Example Layout for Two Vertical Axes gt 105 151 Annual Report 2008 Si g p FI 5 6 5 e 16000 14000 12000 10000 H EI on D O i O O CO CO CO CO lt Figur
37. lt SeriesInterpolate gt lt showDataEffect gt lt Column2DSeries gt lt series gt lt Example 72 Usage Example labelJsFunction for Numeric Data Fields gt The following example shows the user defined function seriesLabelFunc set for numeric data fields A user defined function for numeric data fields Wi Parameters seriesId The corresponding series ID index The index of the corresponding item data The original data of the items values The value of the items This parameter is passed as the array type data and the elements of the array are 128 151 Kkoolz 7 determined based on the chart type as follows Bar2D 3D Series 0 X axis value 1 Y axis value Column2D 3D Series 0 X axis value 1 Y axis value Pie2D 3D Series 0 X axis value 1 Y axis value 2 radius Bubble3DSeries 0 value 1 percentage Important HTML tags can not be used in labelsFunction function seriesLabelFunc serieslId index data values return values 1 lt Example 73 Example JavaScript Function Called for Numeric Data Fields gt Series labelJsFunction Column2DSeries Column3DSeries insideLabelsFunction outsideLabelsFunction Bar2DSeries Bar3DSeries Line2DSeries Area2DSeries upLabelJsFunction downLabelsFunction Bubble3DSeries insideLabelJsFunction Pie2DSeries Pie3DSeries labeUsFunction lt Table 26 labelJsFunction for Each Seri
38. of the chart using annotationElements or in the background of the chart using backgroudElements The following example shows how to write memos at the top of the chart lt KoolChart gt lt Line2DChart showDataTips true gt lt series gt lt series gt lt annotationElements gt lt CanvasElement gt lt label 1 gt lt Label left 0 text The first memo left fontSize 17 borderColor 0x000000 gt lt Label gt lt label 2 gt lt Label right O text The third memo right fontSize 11 borderColor 0x000000 gt lt Label gt lt label 3 gt lt Label horizontalCenter 0 verticalCenter 0 text The second memo center fontSize 11 borderColor Ox000000 gt lt Label gt lt CanvasElement gt lt annotationElements gt lt Line2DChart gt lt KoolChart gt lt Example 78 Example Memo gt The following is the output produced by the layout above 139 151 Kool hav M E M O 3200 The first memo left 3000 2800 2600 2400 2200 2000 1800 1600 1400 1200 1000 800 600 400 200 The third memo right JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC lt Figure 48 Output Chart with Memo gt For further information of the properties of labels please refer to lt 5 3 1 Creating Captions and Subcaptions gt The following table shows the unique properties of labels Propert
39. pass the information of the item to your script you should create a function to be called when the item is clicked and then set the value of the temC lick sFunction property to the function name The temClick sFunction property should be defined in the lt Column3DChart gt lt Bar3DChart gt etc The following example shows how to define itemClickJsFunction in a Pie chart When a user clicks on a 119 151 lt Chart gt node ex Kkoolz 7 slice of the Pie chart a function named chartClick will be called lt KoolChart cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Anual Report gt lt Options gt lt Pie2DChart showDataTips true itemClickJsFunction chartClick gt lt series gt lt Pie2DSeries field Profit nameField Month displayName Profit gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Pie2DSeries gt lt series gt lt Pie2DChart gt lt KoolChart gt lt Example 66 Example Call Functions gt The following is an example of the chartClick function lt html lang en gt lt head gt lt meta http equiv Content Type content text html charset utf 8 gt lt script src KoolChart js language javascript gt lt script gt lt script language JavaScript type text javascript gt var chartVars var layoutURL encodeURIComponent chartLayout xml chartVars amp layoutURL layoutURL
40. pixels in size dashLinePattern The larger the value the better performance you can have If you want to improve the chart rendering performance use the larger value of dashLinePattern lt Table 9 Properties Dashed Line Chart gt 50 151 Kkoolz 7 lt KoolChart backgroundColor OxFFFFFF cornerRadius 22 borderStyle sold lt Line2DChart showDataTips true gt lt horizontalAxis gt lt CategoryAxis categoryField Month padding 0 5 gt lt horizontalAxis gt lt series gt lt Line2DSeries labelPosition up yField Profit radius 4 lineStyle dashLine dashLineSeperatePos 5 itemRenderer RectangleltemRenderer gt lt Line2DSeries gt lt series gt lt Line2DChart gt lt KoolChart gt Creating a Dashed Line chart The position of the boundary The 6th data dashLinePlacement before Displays the dashed line first lt Example 30 Example Dashed Line Chart gt Anual Report 3200 2800 2400 p 2000 S teg 1600 1200 800 400 Jan Feb Mar Apr May Jun Jul Aug Sep Oct lt Figure 17 Output Dashed Line Chart gt 6 14 Combination Charts Nov Dec The Combination chart can be created by using two different chart types The following example describes how to create the Combination chart with the Column chart and the Line chart The Column chart represents data series using Column2DSeries or Column3DSeries However
41. vertical axes are defined If useDualCrossXLabel true horozontalLabelPlacement will be ignored For example if three vertical axes are defined the labels of the first two axes will be displayed useDualCrossYLabel false true default false Whether or not to display two axes labels if more than two horizontal axes are defined If useDualCrossYLabel true verticalLabelPlacement will be ignored For example if three horizontal axes are defined the labels of the first two axes will be displayed enableCrossHair Whether or not to use the crosshairs enableZooming Whether or not to use the zoom horizontal vertical Specifies the axes for zoom if enableZooming true zoomType both f For example if zoomType horizontal only the default both Oe horizontal axis will be zoomed in Specifies the restore method if enableZooming true initial auto default initial uses the minimum and maximum value resetMode auto defined by users auto the minimum and maximum values are determined by the system automatically lt Table 31 Properties Zoom and Crosshairs gt 138 151 Kkoolz 7 7 12 Adding Memos You might want to add the text annotation to the chart Annotations are positioned based on the point of X and Y coordinates of the chart rather than the items to which you want to add an annotation You can display annotations either on the top
42. you can check the installation CD or you can check the KoolChart version of your web page as follows As you need to use the KoolChart create function to create the chart you can also read the value of KoolChart version in your JavaScript To identify the version information you can type KoolChart version in the console or alert dialog alert KoolChart version 3 KoolChart Data Formats KoolChart for HTML5 supports two types of data format XML and Array This chapter describes how you transform your original data into KoolChart supported data format 3 1 XML Creating an XML Data When you use the XML format for your dataset be sure the rule that you should begin with the lt item gt tag and end with the lt item gt tag for each data KoolChart displays as many items in the chart as the number of lt item gt tags If no lt item gt in the XML data KoolChart displays nothing in the chart The single dataset single series is used when you have one numeric data and the multiple datasets multiple series are used when you have more than two numeric data The following example is for a monthly report for revenue cost and profit 3 numeric data which needs to use multiple datasets Month Revenue Cost Profit Jan 10 000 5 000 5 000 Feb 15 000 7 000 8 000 Mar 12 000 6 000 6 000 Apr 30 200 4 000 26 200 May 28 000 10 000 18 000 Jun 12 000 5 000 7 000 Jul 22 000 10000 12 000 Aug 13 00
43. 0 Cost 6000 Profit 7000 Month Sep Revenue 22000 Cost 10000 Profit 12000 Month Oct Revenue 29000 Cost 8000 Profit 21000 Month Nov Revenue 18000 Cost 7500 Profit 10500 Month Dec Revenue 30000 Cost 12000 Profit 18000 var chartData2 Month Jan Revenue 1000 Cost 500 Profit 500 Month Feb Revenue 1500 Cost 700 Profit 800 Month Mar Revenue 1200 Cost 600 Profit 600 Month Apr Revenue 3020 Cost 400 Profit 2620 Month May Revenue 2800 Cost 1000 Profit 1800 Month Jun Revenue 1200 Cost 500 Profit 700 Month Jul Revenue 2200 Cost 1000 Profit 1200 Month Aug Revenue 1300 Cost 600 Profit 700 Month Sep Revenue 2200 Cost 1000 Profit 1200 Month Oct Revenue 2900 Cost 800 Profit 2100 Month Nov Revenue 1800 Cost 750 Profit 1050 Month Dec Revenue 3000 Cost 1200 Profit 1800 1 Change chart type function changeLayout chart setLayoutURL layoutURL Change data function changeData chart setData chartData2 Change both 143 151 Kool Kool har function changeBoth chart setLayout layoutStr chart setData chartData lt script gt lt head gt lt body gt lt table gt lt tr gt lt td gt lt input type button value Change chart type onclick
44. 0 of the center of the total data when the initial rendering is finished gt lt HistoryRangeSelector width 100 startingRange center visibleltemSize 30 gt lt selector gt lt HistoryChart gt lt KoolChart gt lt Example 39 Example History Chart gt History 2D Chart 2800 4 2400 2000 5 1600 1200 800 400 o T 2013 11 27 2013 11 29 2013 12 1 2013 12 3 2013 12 5 2013 12 7 lt Figure 25 Output History Chart gt gt The thumb of the navigator is created as a style of CSS lt style gt For the thumb of the navigator KoolChart__ChartRangeSelector_Thumb background url Assets selector png no repeat lt style gt 6 20 From To Charts The From To chart displays the data area by using the start point and the end point The Waterfall chart and the Step chart can be created from the From To chart The column series Column2DSeries Column3DSeries bar series Bar2DSeries Bar3DSeries and area series Area2DSeries are used as the series of the From To chart The minfie d property is added for the start point and all the other properties of the From To chart are the same as those of the Column Bar and Area chart 69 151 Kkoolz 7 Now we will create a Waterfill chart by using a Column chart The following is the array form of the numeric data var data cat Jan from 1000 to 5000 cat Feb fro
45. 0 1 lt Table 22 Properties Image gt 115 151 Kkoolz 7 7 5 Creating Effects in Charts KoolChart for HTML5 currently supports the SeriesSlide effect SeriesInterpolate and SeriesZoom will be supported in the next version SeriesSlide Slides data series to the left from the right The following table shows the properties of the effect Properties Values Descriptions Effects i Specifies the time required to duration millisecond default 500 complete the whole effect D Specifies the delay time of the elementOffset millisecond default 20 effect SCH Specifies the minimum amount of minimumElem Bi a millisecond default 0 time which is taken to complete Common entDuration the effect for each element Specifies the delay time of the offset millisecond default 0 start of the effect perElementOff D Specifies the delay time of the Millisecond set start of each element Specifies the direction of the M direction left right up down default left d SeriesSlide sliding effect horizontalFocu f Specifies the horizontal focal center left right default center s point of the zoom Specifies the vertical focal point of verticalFocus center top bottom default center SeriesZoom the zoom f Specifies the boundary of the relativeTo chart series default chart focal point of the zoom lt Table 23 Properties E
46. 0 6 000 7 000 13 151 Kool thoy Sep 22 000 10 000 12 000 Oct 29 000 8 000 11 000 Nov 18 000 7 500 10 500 Dec 30 000 12 000 28 000 lt Table 1 Data to Be Transformed to XML Format gt lt XML Data Format gt lt Month gt Jan lt Month gt lt Revenue gt 10000 lt Revenue gt lt Cost gt 5000 lt Cost gt lt Profit gt 5000 lt Profit gt lt Month gt Feb lt Month gt lt Revenue gt 15000 lt Revenue gt lt Cost gt 7000 lt Cost gt lt Profit gt 8000 lt Profit gt lt Month gt Dec lt Month gt lt Revenue gt 30000 lt Revenue gt lt Cost gt 12000 lt Cost gt lt Profit gt 18000 lt Profit gt You should start with the lt item gt tag and end with the lt item gt tag for each data lt Example 3 XML Data Format gt Once you create the XML formatted data and save the file as the filename multiDataxml you need to pass the URL of the filename as a parameter of the setDataURL function as follows 14 151 Kool thoy document getElementByld chart1 setDataURL http www koolchart com singleData xml Note Because the setDataURL function is using the RPC method the URL does not have to have the name of the XML file As long as the data returned by the URL is an XML format you can set any type of server side script name ex JSP PHP etc as an URL 3 2 Array Creating an Array Data Here is an example of using the Array formatted
47. 00 gt lt SolidColor color OxFFFFFF gt lt fills gt lt Bubble3DSeries gt lt series gt lt Bubble3DChart gt lt KoolChart gt lt Example 25 Example Bubble3D Chart gt 44 151 VEER EE EE EE EE EE EEN Kool oa 9 EW e o 6 10 Area Charts 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 lt Figure 11 Output Bubble3D Chart gt There are three types of area charts which are overlaid stacked and 100 You can specify the type of the area chart by setting the type property of the chart The display methods of the Area chart are identical to those of the Column chart The definition of the Area chart starts with the lt Area2DChart gt tag and ends with the lt Area2DChart gt tag The form property of Area2DSeries determines how to display the series data 7000 6000 5000 4000 3000 2000 1000 7000 6000 5000 4000 3000 2000 1000 o January February March May July September April June August October lt form segment default gt November December January February March May July September April June August lt form step gt October November December 7000 6000 5000 4000 3000 2000 1000 o January March May July September November February April June August October December f nm n lt torm curve gt 7000 6000 5000 4000 3000 2000
48. 00 4000 o Apr May Jun Jul Aug Sep Nov Dec Month lt Figure 38 Output Chart with Axis Titles gt 7 4 Designing Chart Backgrounds 7 4 1 Adding Gridlines All the charts which have X and Y axes can have backgroundElements The backgroundElements property can be used to decorate the background area of the chart 112 151 Kool 600 q January February March April May June July August September October November December lt Figure 39 Output backgroundElements gt In the above example only horizontal lines are used to decorate the background area The following options are needed to add horizontal lines in the background direction horizontal vertical both e horizontalCchangeCount 1 Changes colors of each line The colors of fill and alternateFill are used alternately horizontalStroke Defines the color of the line between fill and alternateFill horizontalFill The initial color In the above example the color is white horizontalAlternateFill The alternate color In the above example the color is gray The following layout shows horizontal lines are added in the background of the chart If you want to add vertical lines you should set the value of direction to vertical lt KoolChart gt lt Column3DChart gt lt backgroundElements gt SR e verticalCchangeCount 1 horizontalChangeCount 1 gt lt Stroke color 0x000000 alpha 1 weight 2 gt lt ho
49. 000 940 000 936 000 5 FA 1 520 000 900 000 1 480 000 JA Ah d 860 000 A 1 440 000 A 820 000 1 400 000 A A 1 360 000 780 000 A en 1 320 000 740 000 NM K A WN 1 280 000 A 700 000 A A 1 240 000 water 660 000 1 200 000 20110812 20110823 20110831 20110908 20110920 20110928 20111007 20111017 2011102 20130605 20130613 20130620 20130627 20130704 20130711 20130718 20130725 20130801 20130808 1 200 000 5 600 000 800 000 liln A T w ihahalal WII ITT UI ATLL LT Pree Pere Peer Peet eet et Deen H 4 lt Figure 31 Output Candleline and Candlearea Charts gt 6 25 Gauge Charts 6 25 1 Circular Gauge The definition of the Circular gauge starts with the lt CircularGauge gt tag and ends with the lt CircularGauge gt tag It has a range of 0 to 360 degrees The default starting angle O degrees is toward 3 o clock or east and positive angle measurement is clockwise The Circular gauge is composed of three parts a background frame a needle and a needle cover You can make various shapes by using the properties of the three parts The Circular gauge has the default property values but the values of the following properties should be defined by users startAngle minimumAngle maximumAngle value minimum maximum lt KoolChart backgroundColor OxEEEEEE cornerRadius 12 borderStyle sold lt Options gt lt Caption text Circular Gauge Red gt lt SubCaption text You can change the
50. 013 05 21 2013 05 29 2013 06 07 2013 06 17 2013 06 25 2013 07 03 2013 07 300000 200000 100000 l Patla TIEA PTT SPSS Perr Reen 0 D m r lt Figure 29 Output Basic Candlestick Chart gt lt KoolChart backgroundColor OxFFFFFF cornerRadius 22 borderStyle sold lt Options gt lt Caption text Candlestick Chart Reverse gt lt Options gt Defines the formatter lt NumberFormatter id n t precision 0 gt Sets DualChart lt DualChart leftGutterSyncEnable true rightGutterSyncEnable true gt eftGutterSyncEnalbe Adjusts the left margin of mainChart and subChart rightGuttersSyncEnable Adjusts the right margin of mainChart and subChart lt mainChart gt lt Candlestick2DChart showDataTips true paddingBottom Oz lt horizontalAxis gt lt CategoryAxis id hAxis categoryField date gt lt horizontalAxis gt lt verticalAxis gt lt LinearAxis baseAtZero fa se gt 85 151 Kool lt verticalAxis gt lt series gt openField Sets the field name for the opening price showMaxValueLabel Shows the maximum value of the data points currently displayed in the chart showMinValueLabel Shows the minimum value of the data points currently displayed in the chart lt Candlestick2DSeries openField openprc closeField closeprc highField high lowField iow showMinValueLabel true showMa
51. 1 Data Transmission between Server and Client gt 5 151 Kkoolz 7 To create a chart using KoolChart for HTML5 the layout and the dataset should be prepared The layout has detailed information which determines the appearances and animations of charts such as colors axis style labels and animation effects etc The format of the layout is XML Please refer to lt 5 Using Layouts gt for further information KoolChart for HTML5 supports the XML formatted data and the Array formatted data for the dataset You can choose whichever fits your programming environment Please refer to lt 3 KoolChart Data Formats gt for further information 1 4 KoolChart System Components The installation CD of KoolChart for HTML5 has the following directories 1 KoolChart This directory has minimum files required for running KoolChart JavaScript files are in JS directory and image and CSS files are in Assets directory You can easily set up KoolChart on your web server by copying KoolChart directory to the server You need to include the JavaScript file which is under JS directory in your HTML file or any server side script such as ASP PHP etc 2 LicenseKey This directory has the license file KoolChartLicense js for KoolChart 3 Docs Two documents User Manual and API reference guide are in the Docs directory The API reference guide is in the api directory To view the API reference guide open index html file with your web browser
52. 151 Kkoolz 7 Month Sep Revenue 22000 Cost 10000 Profit 12000 Month Oct Revenue 29000 Cost 8000 Profit 21000 Month Nov Revenue 18000 Cost 7500 Profit 10500 Month Dec Revenue 30000 Cost 12000 Profit 18000 lt Example 5 Transforming a Multiple Datasets to the Array Data Format gt You can pass the Array formatted data above to the chart as follows The variable name chartData is passed to the setData function as a parameter document getElementByld chart1 setData chartData 16 151 Kkoolz 7 4 KoolChart System Interfacing 4 1 Setting chartVars chartVars is the indispensable variable of KoolChart and it is used to set layout and dataset This variable is passed to KoolChart as a parameter from your JavaScript The following rules are for the chartVars variable The type of chartVars is string The separator amp is used to set more than 2 variables to the value of chartVars The method to set a dataset and a layout to the value of chartVars is as follows var layoutURL Column_3D_Layout xml var chartVars layoutURL layoutURL var dataURL singleData xml chartVars BidataURL dataURL The following table shows the properties can be set by using chartVars Properties Values Descriptions layoutURL URL layout URL dataURL URL dataset URL KoolOnLoa
53. 5 gt lt declineFill gt Sets the color of the line connecting the highest price and the lowest price when the opening price is higher than the closing price lt declineStroke gt lt Stroke color 0000ff gt lt declineStroke gt Sets the color of the outer line of the bar when the opening price is higher than the closing price lt declineBoxStroke gt lt Stroke color 0000ff gt lt declineBoxStroke gt lt Candlestick2DSeries gt lt series gt lt horizontalAxisRenderers gt lt Axis2DRenderer placement bottom axis hAxis tickLength 07 gt lt horizontalAxisRenderers gt lt annotationElements gt syncCrossRangeZoomer Draws crosshairs in the sub chart by referencing the id of CrossRangeZoomer and using the data in the main chart lt CrossRangeZoomer id candleCRZ enableZooming ise syncCrossRangeZoomer columnCRZ zoomType both horizontalLabelFormatter nft gt lt annotationElements gt lt Candlestick2DChart gt lt mainChart gt lt subChart gt 89 151 Kkoolz 7 lt Column2DChart showDatatips true height 20 paddingTop 0 paddingBottom 0 gutterTop 4 gt lt horizontalAxis gt lt CategoryAxis id hAxis2 categoryField date gt lt horizontalAxis gt lt verticalAxis gt lt LinearAxis baseAtZero fa se gt lt verticalAxis gt lt series gt lt Column2DSeries yField trdvo ume itemRenderer
54. 51 Kkoolz 7 Month Apr Profit 30200 Month May Profit 28000 Month Jun Profit 12000 Month Jul Profit 22000 Month Aug Profit 13000 Month Sep Profit 22000 Month Oct Profit 29000 Month Nov Profit 18000 Month Dec Profit 30000 1 JI The end of the configuration for creating a chart lt script gt lt head gt lt body gt lt div class container gt lt div class header gt lt p gt KoolChart Column3D Chart lt p gt lt div gt lt div class desc gt Column3D Chart lt button onclick viewSrc style font 11px Anal View Layout amp Data lt button gt lt div gt lt div class content gt lt The parent DIV of the chart gt lt div id chartHolder style width 600px height400px gt lt div gt lt div gt lt div gt lt body gt lt html gt lt Example 2 Creating a Chart to an HTML Document gt 11 151 Kool dior The following list contains more detailed descriptions of the sample HTML document 1 Set the doctype of your HTML file You can use other doctype lt DOCTYPE html PUBLIC W3C DTD XHTML 1 0 Transitional EN http www w3 org TR xhtml1 DTD xhtml1 transitional dtd gt 2 Include KoolChart js and KoolChartLicense js lt script language javascript type text avascript src
55. 6 Output Line Chart with itemRenderer gt lt KoolChart cornerRadius 12 borderStyle solid paddingTop 10 paddingBottom 20 paddingRight 20 paddingLeft 20 gt lt Options gt lt Caption text Anual Report gt lt Options gt lt Line2DChart showDataTips true gt lt horizontalAxis gt lt CategoryAxis categoryField Month gt lt horizontalAxis gt 1 lt Line2DSeries yField Profit radius 10 fill 0xFF0000 itemRenderer DiamondItemRenderer gt lt series gt 2 lt Line2DSeries yField Cost radius 10 fill OxOOFFOO itemRenderer CircleltemRenderer gt 3 lt Line2DSeries yField Revenue radius 10 fill OxFFFFOO itemRenderer TriangleltemRenderer gt lt series gt lt Line2DChart gt lt KoolChart gt lt Example 29 Example Line Chart with itemRenderer gt You can use the following properties for itemRenderer radius Specifies the size of the shape circle triangle rectangle etc The center of the radius is the x y coorinates of the data points fill Fills the shape with the colors stroke Specifies the border thickness of the shape 49 151 Kkoolz 7 The line thickness and the color of the Line chart are determined by lineStroke Please refer to lt Example 49 Example Layout and Output of the Line Chart with Stroke gt for further information The followings are the values for the temRenderer property of the Line chart DiamondItemRenderer No 1 in the exa
56. 7 00 20 00 23 00 vV B Data 5 Sec V RB Data 3Sec v J The cumulative amount lt Figure 28 Output Real time Premium Chart gt 6 24 Candlestick Charts The candlestick chart in KoolChart is a subset of professional stock charts You can define a data set that contains open high low and close values for each time period you want to display But functionalities supported by the professional stock chart such as drawing a line or adding a specific symbol at a specific point are not supported by the candlestick chart in KoolChart The functionalities supported by the candlestick chart in KoolChart are as follows Showing the maximum and minimum values in the chart 84 151 Kool Showing the maximum and minimum values set by the user defined function Showing the disclosure symbol The disclosure symbol can be represented by itemRenderer and special characters or images also can be added by using the div element The disclosure symbol represented by the div element can get the mouse event click The line color the outer line color of the bar and the background color of the bar can be set by the open and close values The number of items shown in the chart can be customized Candlestick Chart Reverse 32000 Highest 29900 2013 06 04 30 955 30000 29000 Dy D Mul 28000 af nf y H 27000 el Mecht 25000 24000 lowest 24200 2013 05 21 2013 05 02 2013 05 09 2
57. Axis placement bottom formatter dateFmt2 tickLength 30 minorTickLength 0 tickPlacement inside showLine false gt lt axisStroke gt lt Stroke weight 1 color 0x999999 gt lt axisStroke gt lt tickStroke gt lt Stroke weight J color Ox6666FF alpha 0 5 gt lt tickStroke gt lt AxisRenderer gt lt AxisRenderer axis hAxis2 placement bottom formatter dateFmt gt lt axisStroke gt lt Stroke weight 1 color 0x999999 gt lt axisStroke gt lt AxisRenderer gt lt horizontalAxisRenderers gt lt verticalAxisRenderers gt lt AxisRenderer axis VAxis placement right formatter numFmt gt lt AxisRenderer axis VAxis2 placement left formatter fnumFmt gt lt verticalAxisRenderers gt lt Combination2DChart gt 80 151 Kool har Defines HttpMultiServiceRepeater for a Real time premium chart lt HttpMultiServiceRepeater baseURL Atto demo riamore net realtimeSample targetController chart requestTimeout 30 gt lt RPCList gt lt RPClItem name rpc1 url data3intervaljsp target flineSeries2 interval 3 concurrency ast retryCount 30 gt lt RPCltem name rpc2 url dataSintervaljsp target lineSeries interval 5 concurrency ast retryCount 30 gt lt RPCItem name 7pc3 url data23ToCurrent2 sp target columnSeries interval 600 concurrency ast
58. Color 0xFFFFEE cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Anual Report gt lt Options gt lt Bar2DChart showDataTips true gt lt verticalAxis gt lt CategoryAxis categoryField Month gt lt verticalAxis gt lt series gt lt Bar2DSeries xField Profit itemRenderer SemiCircleBarltemRenderer gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Bar2DSeries gt lt series gt lt Bar2DChart gt lt KoolChart gt lt Example 19 Example Bar2D Chart gt 38 151 Kkoolz 7 Anual Report D i ii D 6000 12000 18000 24000 30000 lt Figure 6 Output Bar2D Chart gt 6 7 Bar 3D Charts The definition of the Bar3D chart starts with the lt Bar3Dchart gt tag and ends with the lt Bar3Dchart gt tag You can refer to the API document Docs api for further information of the Bar3Dchart properties lt KoolChart gt lt Options gt lt Caption text Annual Report gt lt Options gt lt Bar3DChart showDataTips true gt lt verticalAxis gt Using CategoryAxis in Y axis vertical axis and the value of the categoryFie d property is Month lt CategoryAxis categoryField Month gt lt verticalAxis gt lt Bar3DSeries xField Profit gt Using the Profit value for X axis xField lt showDataEffect gt lt series gt lt SeriesInterpolate gt lt showDataEffect gt lt Bar3DSeri
59. D Di 6ta Di Product E Di E Di Di Di Di Di Sp EPEE eg a ae mmm H B Ea wn D EN Di Product c Di Di D EI Di EI Segel EI Di Di Di ne Product B EI Di Di Di EI oi BR E E F A R E D Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Product E Product D Product c D citya BR ctys BR cityc D ona E atve E cityc If you want to change the shape of the item you need to set the renderer property as follows lt Matrix2DSeries renderer A epnderer ed gt If you want to display images for the items you need to set the mageSource property as follows The value of the mageSource property should be the URL of the image file lt Matrix2DSeries imageSource EE cet gt 73 151 The following shows the outputs of the above examples Re nderers Item Renderers Images Kool amp x Division C rectangle circle di 6 22 Image Charts Hamon lt gt gt OR lt gt gt On d AupTriangle WdownTriangle star Division A g i D GF fe E City c City D ER mu Production i Phone Production i PC Production The Image chart is a kind of the Column chart It represents data as images whose size is determined by the value of the numeric data The following factors determine the types of the Image chart First the aspect ratio of the origi
60. Kool dha of the column The other properties of the Cylinder3D column in the layout are the same as those of the Column3D chart You can create a Cylinder3D column chart by using the layout for the Column3D chart and just changing the value of the temRenderer property to CylinderltemRender The following layout shows how to create a Cylinder3D column chart by changing the temRenderer property of the layout for the Column3D chart shown in lt Example 17 Example Column3D Chart gt lt KoolChart gt lt Column3DChart showDataTips true type clustered gt Creating a Cylinder3D column chart lt horizontalAxis Using CategoryAxis in X axis and the value of the categoryFie d property is Month lt CategoryAxis categoryField Month gt lt horizontalAxis gt lt series gt Setting the series node for the data Two column series are defined Profit and Cost are a pair of data lt showDataEffect gt Using the animation effect for data rendering lt SeriesInterpolate gt lt showDataEffect gt lt Column3DSeries gt lt Column3DSeries yField Cost Using the Cost value for Y axis lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Column3DSeries gt lt series gt lt Column3DChart gt lt KoolChart gt lt Example 18 Example Cylinder3D Column Chart gt 36 151 6 5 2 Cylinder 3D Bar Charts The cylinder shaped bar is used instead of the cube shp
61. KoolChart for HTML5 USER S GUIDE Version 2 5 RiaMore Soft Kkoolz 7 Contents OVEIVIEW een 5 1 1 About KoolChart for HTMUR ENEE 5 1 2 System Uu 5 1 3 KoolChart System Configuration ssccssssesscscsssesssessnsesscesssssecscsnssecesssnsscesssnssesesssnnsecessnsseeessnnssesessnneteeecnnneceeaneesees 5 1 4 KoolChart System COMponents ENEE 6 1 5 SUP PONted Chart ET 6 EE Elle Ein 8 2 1 Registering KoolChart License Keys ENEE 8 2 2 Creating a Basic Chart EEN 8 2 3 Viewing KoolChart Versions EEN 13 KoolChar Data RO EE 13 3 1 XM bss Creating an XML Date egener EEN 13 3 2 Array Creating an EE LE 15 K olChart Systemi Int rfadiNg Age 17 4 1 Setting Et 17 4 2 Inter age FUNCIONS erte AEN 18 USING EE 20 5 1 Seele Ee 20 5 2 Setting KoolChart in Layouts ENEE 22 Da Setting Options IM Leger 22 5 3 1 Creating Captions and Subrcaptions EE 23 5 3 2 Creating RE Ent E ER 5 4 Setting Styles CSS in L voutes ENEE 23 USING eLAVOUES for Chart IMBERT 28 6 1 About Common Properties Of Charts 28 6 2 ABOUt Axes OF Cart sian Charts x cccscssssasscesssasscipszaacapaiesstapsiebscepssapeseessagacqeassdaianstadacapeeatasagcesvasapcessasigsteodsagsttussagleenoses 29 6 2 1 CategoryAXis and Unearhvis ENEE 31 6 2 2 DateTIMeAXis ANd LOGANXIS EEN 32 6 3 EE edel 33 6 4 GoluMnA 3D Chants eet EE 34 6 5 Cylinder 3D Si tS geet ee ee ee EE 36 6 5 1 Cylinder 3D Column CALS eiert 36 6 5 2 Cylinder 3D Bar Charte 37 6 6 ap
62. OnLoadCallFunction KoolChartOnLoad2 creates KoolChart KoolChart create chart1 chartHolder chartVars 100 100 KoolChart create chart2 chartHolder2 chartVars2 100 100 function KoolChartOnLoad chart1 setLayout layoutStr chart1 setData chartData This function is called when the second chart is created user defined function 145 151 Kool function KoolChartOnLoad2 chart2 setLayoutURL layoutURL2 chart2 setData chartData2 Layouts used dynamically var layoutURL2 encodeURIComponent chartLayout xml var layoutStr lt KoolChart cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Annual Report gt lt Options gt lt Line2DChart showDataTips true gt lt horizontalAxis gt lt CategoryAxis categoryField Month gt lt horizontalAxis gt lt series gt lt Line2DSeries yField Profit displayName Profit gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt lineStroke gt lt Stroke color 0xFFOO00 weight 4 gt lt lineStroke gt lt Line2DSeries gt lt series gt lt Line2DChart gt lt KoolChart gt Data used dynamically var chartData Month Jan Revenue 10000 Cost 5000 Profit 5000 Month Feb Revenue 15000 Cost 7000 Profit 8000 Month Mar Revenue 12000 Cost 6000 Profit 6000 Month Apr Revenue 30200
63. Output of the Area Chart with Fill and Stroke gt lt Line2DChart gt lt horizontalAxis gt lt CategoryAxis st categoryField Month gt 2800 lt horizontalAxis gt 2600 lt series gt 2400 lt Line2DSeries yField Profit 220 form curve displayName Profit gt D color 0xFOFFOO 1400 color the stroke color 1200 weight the thickness of lines 100 lt lineStroke gt 800 lt Line2DSeries gt 600 lt series gt 400 lt Line2DChart gt 200 Important The property name for the f January March May July September November Line chart is lineStro ke February April June August October December lt Example 51 Example Layout and Output of the Line Chart with Stroke gt 101 151 Kkoolz 7 7 3 Applying axis styles 7 3 1 About Axis Styles 1 January February March April May August September October neve meenen J lt Figure 36 Axis Styles gt lt Figure 36 Axis Styles gt shows an example of a chart that uses an axis style applied to the horizontal and the vertical axes Each number of the above example indicates The maximum value of the vertical axis It is valid only for LinearAixs It is minorTick You can define the length of minorTick and the style of the minorTick stroke the line color the line thickness etc It is tick You can define the position and the length of the tick and the style of the tick A It is the gap of two consecutive tick values In the above figure the g
64. Properties Axes gt In the following example CategoryAxis is defined as the horizontal axis The value of CategoryField should be the same as the item name of the data in the chart In this example the Month field in the data is used as the category name of the horizontal axis If you do not define the axis the default axis will be LinearAxis lt KoolChart backgroundColor 0xFFFFEE cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Anual Report gt lt Options gt lt Column3DChart showDataTips true gt lt horizontalAxis gt CategoryAxis is defined as the horizontal axis lt CategoryAxis categoryField Month title Category Axis gt lt horizontalAxis gt 31 151 Kkoolz 7 lt verticalAxis gt LinearAxis is defined as the vertical axis lt LinearAxis maximum 3500 title Linear Axis gt lt verticalAxis gt lt series gt lt Column3DSeries yField Profit displayName Profit gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Column3DSeries gt lt series gt lt Column3DChart gt lt KoolChart gt lt Example 14 Example CategoryAxis and LinearAxis gt 6 2 2 DateTimeAxis and LogAxis lt KoolChart backgroundColor 0xFFFFEE cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Anual Report gt lt Options gt lt Line2DChart showDataTips true gt lt ho
65. RL 3 setData value Sets the value of the Array formatted or XML formatted data string 4 setLayout value Sets the value of the layout string 5 setSlideDataSet value Sets the datasets used in the Slide chart 6 setSlideLayoutSet value Sets the layouts used in the Slide chart 7 saveAsImage Gets the snapshot of the image of the chart 8 getSnapshot Gets the base64 encoded snapshot of the image of the chart to send the image of the chart to the server 9 resize Resize the chart 10 legendAllCheck value Used to control the checkboxes of the legend check all clear all It is useful to check all or to clear all the legend checkboxes when the value of the useVisibleCheck property is true 11 showAdditionalPreloader Shows Preloader 12 removeAdditionalPreloader Removes Preloader 18 151 Kkoolz 7 13 visibleltemSize Defines the number of items shown in the scroll chart 14 hasNoData Pops up the message box when the chart has no data 15 changeScrollBarSize Changes the size of the scroll bar By using the functions above you can have the 6 combinations of functions to set the layout and the dataset as follows Layout Data Functions Method 1 XML URL XML URL setLayoutURL URL setDataURL URL Method 2 XML URL String setLayoutURL URL setData Array Method 3 XML URL XML String setLayoutURL URL setData String Method 4 String XML URL setLayout Stri
66. RadarSeries field year2011 displayName 2011 gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt stroke gt lt Stroke color 0xB0C759 weight 2 gt lt stroke gt lt lineStroke gt lt Stroke color 0xB0C759 weight 2 gt lt lineStroke gt lt areaFill gt lt SolidColor color 0xB0C759 alpha 0 1 gt lt areaFill gt lt fill gt lt SolidColor color OxFFFFFF gt lt fill gt lt RadarSeries gt lt RadarSeries field year2012 displayName 2012 gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt stroke gt lt Stroke color 0x0A80C4 weight 2 gt lt stroke gt lt lineStroke gt lt Stroke color 0x0A80C4 weight 2 gt lt lineStroke gt lt areaFill gt lt SolidColor color 0x0A80C4 alpha 0 1 gt lt areaFill gt lt fill gt lt SolidColor color 0xFFFFFF gt lt fill gt lt RadarSeries gt lt RadarSeries field year2013 displayName 2013 gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt stroke gt 60 151 Kool lt Stroke color 0xCC99CC weight 2 gt lt stroke gt lt lineStroke gt lt Stroke color 0xCC99CC weight 2 gt lt lineStroke gt lt areaFill gt lt SolidColor color 0xCC99CC alpha 0 1 gt lt areaFill gt lt fill gt lt SolidColor color OxFFFFFF gt lt fill gt lt RadarSeries gt lt series gt lt
67. Series 2D 3D inside outside both Specifies the position at which the lables are BarSeries 2D 3D none displayed ImageSeries Line2DSeries Specifies the position at which the lables are f up down both none Area2DSeries displayed Specifies the position at which the lables are Bubble3DSeries inside none i displayed Specifies the position at which the lables are displayed SE inside outside callout insideWithCallout Displays the value of data inside PieSeries 2D 3D nt insideWithCallout the chart If the font size of the label is smaller than insideLabelSizeLimit displays the value outside the chart with the line callout lt Table 18 Properties labelPosition gt 100 151 Kkoolz 7 7 2 Setting Colors in Series Items The data item has two types of the color the line or stroke color and the fill color lt series gt lt Area2DSeries yField Profits 3000 form curve displayName Profits gt 2800 2600 2400 lt SolidColor 2200 color 0x00FF99 gt 200 lt areaFill gt 1800 1600 lt Stroke color 0xFF0O000 weight 3 gt lt areaStroke gt 1200 lt Area2DSeries gt 1000 lt series gt im 1400 Important The property names for the w Area chart are areaFill and areaStroke 200 0 January February March April May June July August September October November December lt Example 50 Example Layout and
68. The ID of the series in the layout if it is defined displayText The content of tooltips index The index of the clicked item The index of the leftmost or the top item is 0 data The original data of the item 121 151 Kool har values The value of the item This parameter is passed as an array type data and the elements of the array are determined based on the chart type as follows Bar2DSeries Bar3DSeries 0 X axis value 1 Y axis value Column2DSeries Column3DSeries 0 X axis value 1 Y axis value Area2DSeries 0 X axis value 1 Y axis value 0 X axis value 1 Y axis value 2 Bubble3DSeries radius Line2DSeries 0 X axis value 1 Y axis value Pie2DSeries Pie3 DSeries 0 value lt Table 24 Parameters of the Function Called When Item Click Occurs gt The following is the output produced by the above layout and the function call Annual Report 2008 JavaScript Alert seriesId null displayText lt b gt Jun lt b gt lt b gt 9 lt b gt lt BR gt lt i gt 2000 lt i gt index 5 data lt item gt lt Month gt Jun lt Month gt lt Profit gt 2000 lt Profit gt lt fitem gt values 2000 9 00900900900901 Jun C Prevent this page from creating additional dialogues lt Figure 42 Output Function Call When the Item Click Occurs gt 7 9 Setting User Defined Functions You can use user defined functions in the following cases 1 Use of
69. The definition of the History chart starts with lt HistoryChart gt and ends with lt HistoryChart gt The History chart is composed of three different parts displayer navigator and selector 66 151 Kkoolz 7 DisplayerChart It displays the selected items you want to display in the chart You can select items you want to see through Navigator Navigator It displays the overview of the entire items Selector It displays the selected area of Navigator The items in the selected area are displayed in Displayer 2800 2400 2000 i Chart 1600 j 1200 800 400 8 HR 2008 12 8 2008 12 10 2008 12 12 2008 12 14 2008 12 16 2008 12 19 2008 12 21 Navigator lt Figure 24 Three Parts of the History Chart gt The following table shows the properties of the History chart Properties Values Descriptions displayerChart Displayer Defines the displayerChart of the History chart navigator Navigator Defines the navigator selector HistoryRangeSelector Defines the selector lt Table 11 Properties History Chart gt Displayer and Navigator are valid values for displayerChart and navigator They are only available to HistoryChart Displayer has all the properties of the Cartesian chart and Navigator has all the properties of the Area2D chart 67 151 Kool The following is a layout of the History chart lt KoolChart
70. ad gt and lt head gt tags lt DOCTYPE html PUBLIC W3C DTD XHTML 1 0 Transitional EN http www w3 org TR xhtml1 DTD xhtml1 transitional dtd gt lt html xmlns http www w3 org 1999 xhtml gt lt head gt lt Registering the license keys for KoolChart gt lt script src KoolChartLicense js type text avascript language javascript gt lt script gt lt Example 1 Registering the License Keys for KoolChart gt 2 2 Creating a Basic Chart The following example shows how you can create a 3D column chart with a single dataset using the provided samples Copy the following directories to your working directory KoolChart JS library KoolChart JS KoolChart js License file LicenseKey KoolChartLicense js Sample HTML file Samples Column_3D html The license file should be included in your HTML file to render KoolChart 8 151 Kool Column_3D html is as follows lt DOCTYPE html PUBLIC W3C DTD XHTML 1 0 Transitional EN http www w3 org TR xhtml1 DTD xhtml1 transitional dtd gt lt html xmins http www w3 org 1999 xhtml gt lt head gt lt meta http equiv Content Type content text html charset utf 8 gt lt meta http equiv Content Script Type content text javascript gt lt meta http equiv Content Style Type content text css gt lt meta http equiv X UA Compatible content IE edge gt lt link rel stylesheet ty
71. aed bar for the Cylinder3D Bar chart All other 3 g S 3 1800 1600 1400 1200 1000 H ei Jan Feb Mar Apr May Jun lt Figure 4 Output Cylinder3D Column Chart gt Kool properties of the Cylinder3D Bar chart in the layout are indentical to those of Bar3D chart You can create the Cylinder3D bar chart by using the layout for the Bar3D chart and just changing the value of the temRenderer property to BarCylinderltemRender You can use the layout for the Cylinder3D column chart shown in lt Example 18 Example Cylinder3D Column Chart gt to create a Cylinder3D bar chart by changing the value of the temRenderer property to BarCylinderltemRender 0 Anual Report 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 lt Figure 5 Output Cylinder3D Bar Chart gt 37 151 Kkoolz 7 6 6 Bar 2D Charts The Bar chart is the same as the Column chart The only difference is that in the Bar chart the numeric data is displayed along X axis horizontal axis The Bar2D chart starts with the lt Bar2Dchart gt tag and ends with the lt Bar2Dchart gt tag The valid values of the temRenderer property of the Bar2D chart are SemiCircleBarltemRenderer and GradientBarltemRenderer SemiCircleBarltemRenderer GradientBarltemRenderer LG You can refer to the API document Docs api for further information of the Bar2Dchart properties lt KoolChart background
72. and the crosshairs can be used for all charts except the following charts Radar Chart Pie Chart Doughnut Chart History Chart Scroll Chart Gauge Chart You can use the zoom and the crosshairs using the CrossRangeZoomer node 136 151 Kkoolz 7 The following example shows how to define CrossRangeZoomer The CrossRangeZoomer node should be defined as a child of the annotationElements node lt KoolChart gt lt Combination2DChart showDataTips true gt lt series gt lt Line2DSeries yField Profit displayName Profit gt lt series gt lt annotationElements gt lt CrossRangeZoomer zoom Type horizontal fontSize 11 color 0x00000 verticallabelPlacement bottom enableZooming true enableCrossHair true lt zoomRangeStroke gt lt Stroke weight J color OxFFO000 alpha 0 3 gt lt zoomRangeStroke gt lt zoomRangeFill gt lt SolidColor color 0x0000FF alpha 0 2 gt lt zoomRangeFill gt lt rossRangeZoomer lt annotationElements gt lt Combination2DChart gt lt KoolChart gt lt Example 77 Example Zoom and Crosshairs gt Properties Values Descriptions horizontalStroke Stroke Specifies the horizontal line of crosshairs verticalStroke Stroke Specifies the vertical line of crosshairs zoomRangeStroke Stroke Specifies the line style for zoom areas zoomRangeFill SolidColor Specifies the fill color for zoom areas
73. anvasElement etc Specifies the background elements of the chart showDataTips true false Whether or not to display tooltips when mouseover event occurs paddingTop Number Specifies the top margin paddingBottom Number Specifies the bottom margin paddingLeft Number Specifies the left margin paddingRight Number Specifies the right margin itemClickJsFunction JavaScript function Specifies the name of the function called when the item is clicked dataTipJsFunction JavaScript function Specifies the name of the function called to display the user defined tooltip gutterLeft Number Specifies the left margin of the axis gutterRight Number Specifies the rigth margin of the axis 28 151 Kool har gutterTop Number Specifies the top margin of the axis gutterBottom Number Specifies the bottom margin of the axis lt Table 6 Properties Cartesian Chart gt The following table describes the properties of the Polar chart Properties Values Descriptions Specifies the size of the empty space of the Doughnut chart As innerRadius 0 0 1 0 default 0 0 the value reaches 1 0 the size of the empty space increases 0 0 Pie chart showDataTips true false default false Whether or not to display tooltips when mouseover event occurs explodable t
74. ap is 500 It is valid only for LinearAixs 5 The style of Stroke for the vertical and horizontal axis In the above figure the sky blue color is defined The title of the horizontal axis The position of ticks Ticks can be located between two consecutive labels or at the top of the labels The above figure shows the example of the ticks positioned at the top of the labels The layout for the above example is as follows lt Column3DChart gt 6 lt horizontalAxis gt 7 lt CategoryAxis categoryField Month ticksBetweenLabels false 102 151 Kool title MONTH displayName Month gt lt horizontalAxis gt lt verticalAxis gt Ei 1 lt LinearAxis interval 500 baseAtZero true maximum 3500 gt lt verticalAxis gt lt horizontalAxisRenderers gt lt Axigi3DRenderer visible true minorTickLength 5 placement bottom canDropLabels false showLabels true labelAlign center gt lt axisStroke gt lt Stroke weight 10 color 0x66CCFF caps none gt lt axisStroke gt 3 lt minorTickStroke gt 2 lt Stroke weight 1 color 0x000000 caps square gt F lt imalin ie WL eebe lt Axis3DRenderer gt lt horizontalAxisRenderers gt lt verticalAxisRenderers gt lt Axis3DRenderer visible true tickLength 30 minorTickLength 3 tickPlacement left placement left canDropLabels false showLabels true labelAlign center gt lt axisStroke gt
75. arget3DResultSeries lt Table 10 Node Names of the Target vs Actual Chart gt The following is an example layout for the 2D Target vs Actual chart lt KoolChart backgroundColor 0xFFFFEE cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Target vs Actual Chart gt lt SubCaption text Linear Type gt lt Options gt lt Combination2DChart showDataTips true gt lt horizontalAxis gt lt CategoryAxis categoryField Month gt lt horizontalAxis gt lt series gt lt The actual series should be defined first gt lt Target2DResultSeries yField Result displayName Result gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Target2DResultSeries gt lt The target series gt lt Target2DGoalSeries yField Goal displayName Goal gt lt showDataEffect gt lt SeriesInterpolate gt 62 151 Kool har lt showDataEffect gt lt Target2DGoalSeries gt lt series gt lt Combination2DChart gt lt KoolChart gt lt Example 37 Example 2D Target vs Actual Chart gt You can create the 3D Target vs Actual chart from the above example by changing Combination2DChart Target2DResultSeries and Target2DResultSeries to Combination3DChart Target3DResultSeries and Target3DResultSeries respectively The following shows the outputs of the Target vs Actual chart Target vs Actual Chart Target vs Actual Chart Target vs Ac
76. art DateTimeAxis and HttpServiceRepeater 10000 9000 8000 7000 6000 5000 4000 3000 2000 1000 10000 9000 8000 7000 6000 5000 4000 3000 2000 1000 o 13 40 52 13 40 58 13 41 4 13 41 10 13 41 16 13 41 22 13 40 55 13 41 1 13 41 7 13 41 13 13 41 19 13 44 43 13 44 52 13 45 01 13 45 10 13 45 19 13 45 28 13 45 37 lt Figure 20 Outputs Real time Chart CategoryAxis Left DateTimeAxis Right gt 6 15 3 Using HttpServiceRepeater in Charts HttpServiceRepeater can be used for different types of charts other than Real time charts For example if you have created a Column3D chart and want to perform data refreshes every 1 minute HttpServiceRepeater is useful Use the layout of the Column3D chart and just add HttpServiceRepeater in the layout as follows lt KoolChart cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Anual Report gt lt Options gt lt Column3DChart id chart showDataTips true gt lt horizontalAxis gt 56 151 Kkoolz 7 lt CategoryAxis categoryField Month gt lt horizontalAxis gt lt series gt lt Column3DSeries yField Profit displayName Profit gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Column3DSeries gt lt series gt lt Column3DChart gt lt HttpServiceRepeater url http demo riamore net chartTest singleDatajsp target
77. ataSelector gt lt DualScrollBar inverted true visibleItemSize 50 gt lt dataSelector gt lt DualChart gt lt KoolChart gt lt Example 44 Example Basic Candlestick Chart gt 87 151 Kool Candlestick Chart Symbol 1 580 000 14 553 000 1 540 000 0 1 500 000 4 Disclosure Symbol 1 460 000 4 1 420 000 4 1 380 000 Ms te 1 340 000 4 Un P 1 300 000 t d mi ees e o 4 260 000 fat x 4 A 1 220 000 O ttA d AA 1 180 000 1 209 000 20130605 20130614 20130624 20130702 20130710 20130718 20130726 20130805 201308 1 200 000 800 000 00 000 A ES TE EE H UI r No Disclosure lt Figure 30 Output Candlestick Chart with Disclosure gt lt KoolChart backgroundColor OxFFFFFF cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Riamore CandleChart gt lt Options gt Defines the formatter lt NumberFormatter id n t precision 0 gt Sets DualChart lt DualChart leftGutterSyncEnable true rightGutterSyncEnable true gt eftGutterSyncEnalbe Adjusts the left margin of mainChart and subChart rightGuttersSyncEnable Adjusts the right margin of mainChart and subChart lt mainChart gt lt Candlestick2DChart showDataTips true paddingBottom Oz lt horizontalAxis gt lt CategoryAxis id hAxis categoryField date gt lt horizontalAxis gt lt verticalAxis gt lt LinearAxis
78. ates only one data corresponing to the time hour minute As the value of the nterva property of RPCItem is 5 the chart receives data from the server every 5 seconds and adds the newly received data to the existing data At the time when lt nextInitDate gt all data will be deleted and requested again refresh Copy the following URLs into your browser and try to print out http demo riamore net realtimeSample hourDataToday jsp requestAllData true http demo riamore net realtimeSample hourDataToday jsp requestAllData false requestAllData Whether or not the chart requests all data This parameter is used to determine the data refresh time If the value of requestAllData is true RPC occurrs when the following conditions are met 1 When the initial loading is finished the first RPC request occurrs 2 At the time when lt nextInitDate gt If requestAllData true you should set the value of the s nitData property in the infoMsg node to true at the server side lt isInitData gt true lt isInitData gt If requestAllData false lt isInitData gt false lt isInitData gt index Indicates the index of the recently received data By using the index you can minimise the duplication of data The client chart maintains the index of the last data received from the server By passing the index as a parameter when the next data request the server can easily find the next data to send dummy This value is for avoding the cache
79. atio 0 alpha 1 gt lt GradientEntry color OxBOBOBO ratio 1 alpha 1 gt lt entries gt lt RadialGradient gt lt needleCoverFill gt lt CircularGauge gt lt Style gt valueText 92 151 Kool fontSize 12 fontFamily Myriad textAlign center borderColor 0x999999 backgroundColor OxFFFFFF backgroundAlpha 1 paddingTop 2 borderThickness 1 borderAlpha 1 borderStyle solid color 0xFFO000 tickText fontFamily Myriad fontSize 18 color OxFFFFFF lt Style gt lt KoolChart gt lt Example 46 Example Circular Gauge gt The following is the output produced by the layout above Circular Gauge Red You can change the color and gradient of the gauge lt Figure 32 Output Circular Gauge gt 6 25 2 Half Circular Gauge The definition of the Half Circular gauge starts with the lt HalfCircularGauge gt tag and ends with the lt HalfCircularGauge gt tag The startAng e property is not available for the Half Circular gauge The initial value of the minimumAngle property is 180 degrees 9 o clock If the value of the minimumAngle property is smaller than 180 the chart will set the value of minimumAngle to 180 automatically and 93 151 Kkoolz 7 minimumAngle can not be larger than 360 So the range of the Half Circular gauge is from 9 o clock to 3 o clock And other styles and properties are the same as those of Circular gauge 6 25 3 Cylinder G
80. auge There are two types of the Cylinder gauge the vertical type and the horizontal type The Vertical Cylinder gauge starts with lt VCylinderGauge gt and ends with lt VCylinderGauge gt and the Horizontal Cylinder gauge starts with lt HCylinderGauge gt and ends with lt HCylinderGauge gt The following is an example layout for the Vertical Cylinder gauge lt KoolChart backgroundColor OxFFFFFF cornerRadius 12 borderStyle sold lt Options gt lt Caption text Gauge gt lt Options gt lt VCylinderGauge id cyl width 30 height 180 minimum 0 maximum 160 labels 20 20 40 60 80 100 120 140 160 value 50 targetMark 150 snapInterval 7 tickThickness 2 tickLength 2 tickInterval 20 liveDragging true tickColor Ox000000 valueLabelXOffset Z0 valueLabelStylename valueLabel ZS lt Style gt valuelabel fontWeight bold lt Style gt lt KoolChart gt lt Example 47 Example Vertical Cylinder Gauge gt 94 151 Kkoolz 7 100 176 lt Figure 33 Output Vertical Cylinder Gauge gt 95 151 Kkoolz 7 6 25 4 Linear Gauge There are two types of the Linear gauge the vertical type and the horizontal types The Vertical Linear gauge starts with lt VLinearGauge gt and ends with lt VLinearGauge gt and the Horizontal Linear gauge starts with lt HLinearGauge gt and ends with lt HLinearGauge gt
81. ave to use CategoryAxis CategoryAxis is not continuous and it recognizes each of the category fields as a separate field For example if you have the date or time related data CategoryAxis will recognize it as a simple string The drawback with CategoryAxis is that it may display duplicate data along the axis as it is not continuous 54 151 Kool dior lt KoolChart cornerRadius 12 borderStyle solid gt lt RealTimeChart id chart dataDisplayType dataSize displayDataSize 15 showDataTips true gt lt horizontalAxis gt lt CategoryAxis id hAxis categoryField Time gt lt horizontalAxis gt lt series gt lt Column2DSeries yField Volume displayName Trading Volume itemRenderer net riamore rmate charts renderers GradientColumnItemRenderer gt lt fill gt fills the column with the color lt SolidColor color 0xBOC759 gt lt fill gt lt Column2DSeries gt lt series gt lt RealTimeChart gt lt HttpServiceRepeater url http demo riamore net chartTest data jsp target chart interval 3 method get gt Performs data refreshes every 3 seconds lt KoolChart gt lt Example 33 Example Real time Chart Using CategoryAxis gt 6 15 2 Creating Real Time Charts Based on Time Using DateTimeAxis If you want to display the Real time chart based on time you have to use DataTimeAxis DateTimeAxis is continuous and discards duplicate data For example if KoolChart receive the previously mi
82. catName Education year2005 90 year2006 160 year2007 130 year2008 200 catName Shelter year2005 100 year2006 180 year2007 165 year2008 140 catName Leisure year2005 76 year2006 120 year2007 130 year2008 170 catName Others year2005 80 year2006 140 year2007 140 year2008 190 3 XML Format lt items gt lt item gt lt catName gt Food lt catName gt lt year2005 gt 100 lt year2005 gt lt year2006 gt 100 lt year2006 gt lt year2007 gt 180 lt year2007 gt lt year2008 gt 150 lt year2008 gt lt item gt lt item gt lt catName gt Health Care lt catName gt lt year2005 gt 80 lt year2005 gt lt year2006 gt 120 lt year2006 gt lt year2007 gt 200 lt year2007 gt lt year2008 gt 210 lt year2008 gt lt item gt lt item gt lt catName gt Others lt catName gt lt year2005 gt 80 lt year2005 gt lt year2006 gt 140 lt year2006 gt lt year2007 gt 140 lt year2007 gt lt year2008 gt 190 lt year2008 gt lt item gt lt items gt Based on the above data the following layout can be created lt KoolChart backgroundColor 0xFFFFEE cornerRadius 12 borderStyle solid gt lt Options gt 58 151 Kool lt Caption text Household Expenditure Yearly gt lt SubCaption text 2010 2013 gt lt Legend useVisibleCheck true gt lt Options gt lt RadarChart id chart1 isSeriesOnAx
83. chart create chatt chartHolder chartVars 100 100 The function which is set to the value of the KoolOnLoadCallFunction property This function is called to set the layout and the dataset when KoolChart is ready to be created Parameters ID The ID which is used as a parameter in the function KoolChart create function chartReadyHandler id document getElementByld id setLayout layoutStn document getElementByld id setData chartData Setting the layout using the XML formatted string lt 5 Using Layouts gt var layoutStr lt KoolChart backgroundColor OxFFFFFF cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Anual Report gt lt Options gt lt NumberFormatter id numFmt precision 0 gt lt Column3DChart showDataTips true gt lt horizontalAxis gt lt CategoryAxis categoryField Month gt lt horizontalAxis gt lt series gt lt Column3DSeries labelPosition inside yField Profit displayName Profit gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Column3DSeries gt lt series gt lt Column3DChart gt lt KoolChart gt Setting the dataset using using JSON format lt 3 2 Array Creating an Array Data gt var chartData Month Jan Profit 10000 Month Feb Profit 15000 Month Mar Profit 12000 10 1
84. dCallFunction JavaScript function This function is called when KoolChart is name ready to be created executed only one time Parameter ID User defined ID displayCompleteCallFunction JavaScript function This function is called when KoolChart is name completely rendered Parameter ID User defined ID lt Table 2 Properties of chartVars gt The difference between KoolOnLoadCallFunction and displayCompleteCallFunction KoolOnLoadCallFunction is used to set the data and the layout to create the chart and called when KoolChart is ready to be created displayCompleteCallFunction is useful when you want to do additional jobs after the chart has been 17 151 Kkoolz 7 created It is called when KoolChart is completely rendered var KoolOnLoadCallFunction KoolChartOnLoad chartVars KoolOnLoadCallFunction KoolOnLoadCallFunction function KoolChartOnLoad id lt Example 6 Usage Example chartVars gt Once you set chartVars as above you should pass the chartVars variable to the KoolChart create function as a parameter as follows KoolChart create chart1 chartHolder chartVars 500 500 4 2 Interface Functions KoolChart provides you with the following functions You can use these functions to set the dataset and the layout 1 setDataURL value Sets the value of the XML formatted data URL 2 setLayoutURL value Sets the value of the XML formatted layout U
85. data for a monthly report for profit 1 numeric data Month Profit var chartData Month Jan Profit 10000 GH E Month Feb Profit 15000 Feb 15 000 Month Mar Profit 12000 Mar 12 000 Month Apr Profit 30200 Apr 30 200 Month May Profit 28000 Mey SE Month Jun Profit 12000 dui ees Month Jul Profit 22000 Jul 22 000 Month Aug Profit 13000 Aug 13 000 Month Sep Profit 22000 Sep 22 000 Month Oct Profit 29000 oe E Month Nov Profit 18000 Nov zee Month Dec Profit 30000 J Dec 30 000 lt Example 4 Transforming a Single Dataset to the Array Data Format gt And the following is an example of the Array formatted data for a monthly report for profit cost and revenue multiple datasets var chartData Month Jan Revenue 10000 Cost 5000 Profit 5000 Month Feb Revenue 15000 Cost 7000 Profit 8000 Month Mar Revenue 12000 Cost 6000 Profit 6000 Month Apr Revenue 30200 Cost 4000 Profit 26200 Month May Revenue 28000 Cost 10000 Profit 18000 Month Jun Revenue 12000 Cost 5000 Profit 7000 Month Jul Revenue 22000 Cost 10000 Profit 12000 Month Aug Revenue 13000 Cost 6000 Profit 7000 15
86. e formatter numFmt gt lt imgSource gt lt ImageSourceltem url Samples Images 10000 png gt lt imgSource gt lt showDataEffect gt lt SeriesSlide duration 1000 direction up gt lt showDataEffect gt lt ImageSeries gt In the above example a single image is repeated as the value of imageDisplayType is singleRepeat The path URL of the image file is defined in the ImageSourceltem node It is a child node of the ImgSource node The properties of the ImageSourceltem node are as follows Properties Values Descriptions maintainAspectRatio True false default true Whether or not the aspect ratio is the same as the original image 75 151 Kkoolz 7 url The URL of images The path URL of the image file Specifies the unit value of each image only Value Number available to multiple lt Table 15 Properties ImageSourceltem Node gt The following is an example layout for the Image chart whose type is multiple and each image has a unique value lt ImageChart id chart showDataTips true gutterLeft 20 gutterRight 20 showLabelVertically true gt lt defines the X axis gt lt horizontalAxis gt lt CategoryAxis id hAxis categoryField Region gt lt horizontalAxis gt lt defines the Y axis gt lt verticalAxis gt lt LinearAxis id VAxis gt lt verticalAxis
87. e fontSize 11 fontStyle italic color 0000FF chartAxisStyle color 4691E1 fontSize 14 fontWeight bold fontStyle italic lt Style gt lt KoolChart gt lt Example 13 Example How to Apply Styles 2 gt 26 151 Kool Annual Report RiaMore Soft Mar Apr Horizontal Axis lt Figure 2 Example Output of the Chart with Styles gt 27 151 6 Using Layouts for Chart Types 6 1 About Common Properties of Charts Kool thoy Charts can be divided into two general categories the Cartesian chart which has axes and the Polar chart which has no axis The following table describes the properties of the Cartesian chart Properties Values Descriptions horizontalAxis CategoryAxis LinearAxis DateTimeAxis LogAxis Specifies the horizontal axis X axis verticalAxis CategoryAxis LinearAxis DateTimeAxis LogAxis Specifies the vertical axis Y axis horizontalAxisRenderer Axis3DRenderer AxisRenderer Specifies the renderer of the horizontal axis verticalAxisRenderer Axis3DRenderer AxisRenderer Specifies the renderer of the vertical axis series Chart series ex Column3DSeries Line2DSeries etc Specifies the series of the chart annotationElements GridLines Image CanvasElement CrossRangeZoomer etc Specifies the front elements of the chart Z index backgroundElements GridLines Image C
88. e endValue Number String position where the line ends The endVa ue property is ignored when the va ue property is set veins Numersin If you want to draw the normal line not diagonal line specify the position of the line label String Specifies the text displayed in lines lt Table 29 Properties AxisLine gt 135 151 AxisRange Kool dior Properties Values Descriptions labelHorizontalAlign String center left obt Specifies the horizontal alignment of the label labelVerticalAlign String top middle bottom Specifies the vertical alignment of the label Rotates labels labelRotation Number Any value of 0 360 can be available for embedded fonts but only 0 or 90 are available for system fonts fill Uint Specifies colors to fill areas startValue Number String Specifies the position where the area starts endValue Number String Specifies the position where the area ends Whether or not to draw horizontal ranges true Draws ranges with Y axis values The Y axis horizontal Boolean true false value is used false Draws ranges with X axis values The X axis value is used label String Specifies the text displayed in lines 7 11 lt Table 30 Properties AxisRange gt Zooming and Showing Crosshairs The zoom and the crosshairs enable you to enlarge certain areas of the chart and to locate a particular point on the chart respectively The zoom
89. e 37 Output Chart with Two Vertical Axes gt 106 151 Kool 7 3 5 Adding Thousands Separators Kool dior The axes defined as LinearAxis represent labels as numeric values You can use the thousands separator in digit grouping for numeric values The thousands separator provides a good way to improve the readability of numeric values lt rMateChart cornerRadius 12 gt lt Options gt lt Caption text Anual Report gt lt Options gt lt Column3DChart gt lt horizontalAxis gt lt CategoryAxis categoryField Month gt lt horizontalAxis gt lt verticalAxis gt a mat cer munfin gt lt verticalAxis gt lt series gt lt Column3DSeries yField Profit displayName Profit gt lt series gt lt Column3DChart gt lt rMateChart gt 32 000 28 000 24 000 20 000 16 000 12 000 8 000 4 000 Anual Report Jul Jan Nov Feb May Sep Apr Aug Oct Dec lt Example 56 Example Layout and Output to Add the Thousands Separator gt Properties Values Descriptions useThousandsSeparator True false default true Whether separator or not to add the thousands useNegativeSign true false default true Indicates how to display the negative sign If the value of useNegativeSign is true displays negative values with a leading minus sign otherwise negative values are enclosed in parentheses Number default 1 Sp
90. ecifies the decimal precision If the value of precision ENER Ke f f precision is 1 the precision will be ignored Separator default comma Specifies the delimiter as a thousands thousandsSeparatorTo LI separator 107 151 Kkoolz 7 decimalSeparatorTo Separator default dot Specifies the delimiter as a decimal point S down nearest up none Specifies the rounding methods roundin default none lt Table 19 Properties NumberFormatter gt 7 3 6 Adding Currency Symbols You can add a currency symbol in numbers The following example shows how to add a currency symbol in numbers lt rMateChart gt lt Options gt lt Caption text Anual Report gt lt Options gt Anual Report lt CurrencyFormatter id fmt 32 0008 28 000 f lt Column3DChart showDataTips true fontsize 11 gt 24 000 8 lt horizontalAxis gt g 20 000 lt CategoryAxis d categoryField Month gt ee d lt horizontalAxis gt re i lt verticalAxis gt 12 0002 lt verticalAxis gt lt series gt 4 000 lt Column3DSeries yField Profit gt ow lt series gt Jan Mar May Jul Sep Nov lt Column3DChart gt Feb App Jun Aug O t Dec lt rMateChart gt lt Example 57 Example Layout and Output to Add the Currency Symbol gt Properties Values Descriptions currencySymbol Symbol default Specifies the currency symbols Specifies the position of the currency
91. emRenderer H GradientColumnItemRenderer 6 4 Column 3D Charts The Column3D chart starts with the lt Column3DChart gt tag and ends with the lt Column3Dchart gt tag lt Column3DSeries gt is the series of the Column3D chart The following layout shows the multiple series of the Column3D chart lt KoolChart gt lt Column3DChart showDataTips true type clustered gt Creating a Column3D chart lt horizontalAxis Using CategoryAxis in X axis and the value of the categoryFie d property is Month lt CategoryAxis categoryField Month gt lt horizontalAxis gt lt series gt Setting the series node for the data Two column series are defined Profit and Cost are a pair of data lt Column3DSeries yField Profit gt lt showDataEffect gt Using the animation effect for data rendering lt SeriesInterpolate gt lt showDataEffect gt lt Column3DSeries gt lt Column3DSeries yField Cost gt Using the Cost value for Y axis lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Column3DSeries gt lt series gt lt Column3DChart gt lt KoolChart gt lt Example 17 Example Column3D Chart gt 34 151 Kool The type property of the Column chart determines the display method of the chart The following four types are used in the Column chart clustered This is the default value for the Column chart The clustered type is mostly used in the
92. ersion of the Real time chart lt 6 15 Real Time Charts gt Like the Real time chart it uses HTTPService and RPC for data communication The unique features of the Real time premium chart are as follows 1 You can use different data refresh cycles for each series For example if you have 3 series you can set 10 seconds for the first one and 5 seconds for the second one and 1 minute for the third one 2 The Real time chart displays the data from right to left based on the unit time or amount of data but the Real time premium chart displays the data from left to right based on the time defined by servers The cycle of each series of the Real time premium chart is different as each series can have the different time unit to display the data on the chart 3 If the initial data of the Real time chart need to be displayed in a client browser they will be displayed as soon as the chart loading is finished 4 DateTimeAxis should be defined for the X axis in the Real time premium chart The Real time premium chart does not support CategoryAxis Unlike the Real time chart the definition of the Real time premium chart does not start with lt RealTimeChart gt You can create the Real time premium chart for any type of KoolChart by defining the HttpMultiServiceRepeater node in the layout The HttpMultiServiceRepeater node has the properties of RPC for each series 77 151 Kkoolz 7 The following table describes the properties of the Ht
93. erture 38 6 7 ae EE EEN 39 6 8 PLS AM D vghmut ORartSssrss ssis ariere iren sarearena ersa E EEEE SEEE 40 Kkoolz 7 6 9 B bbl 3D Elke 44 610 ET 45 6r EE Ee 46 612 Hne El E 48 GES Dashed Line Charts eege EE EE EE 50 6 14 Combination Charts EEN 51 615 Jeer Eet eet 53 6 15 1 Creating Real Time Charts Based on the Number of Data Using CategoryAxis 54 6 15 2 Creating Real Time Charts Based on Time Using Datefimehvis 55 6 15 3 Using HttpServiceRepeater in Charts EEN 56 616 Radar CHANS enee E E attest steaareneanennanecaas 57 6 17 Targetys Actual CHANS sessies EEE EE ER EEE ARE 62 6 18 Sero CNAS inea E N RERNE 63 e ENEE 66 GEN un Ge Mel esesascrssesessaccscatscasecosssssecessssszceass sees ESER N S ESRR READE nE 69 6 21 Mats Charts 71 ops armel ie u Ce 74 6 23 Real Time Premium Charte 77 6 24 Candlestick Charte eege Neen 84 6 25 AE 91 6 25 1 CUCU a GAG E 91 6 25 2 Half Circular Gauge EEN 93 6 25 3 Cylinder Gage seeen nE E a EE EE EE S rE EEE erent reenter 94 6 25 4 BETEN 96 626 Slide a EEN 97 Using Layouts for Advanced User ENEE 100 7 1 Setting Numeric Fields in Charte 100 T2 Setting Colors in Series Items EEN 101 7 3 APPIVING EE 102 7 3 1 PDO UE AXIS SYES tsss ee 102 7 3 2 Showing and Hiding Axes Using Properties EE 104 7 3 3 Changing the Position Of Anes EEN 104 7 3 4 Creating A EU YAKS ics cascessscapcesassaysezsase seazsanlsttssayssttdsagscatecagscaecagasasecagaiesdcagaeas cao
94. es gt The labelJsFunction is related with labelPosition HTML tags can not be used for labelJsFunction The following table describes the parameters used in the above example 129 151 Kkoolz 7 Parameters Descriptions seriesId The corresponding series ID index The index of the corresponding item data The original data of the items The value of the items This parameter is passed as the array type data and the elements of the array are determined based on the chart type as follows BarSeries Bar3DSeries 0 X axis value 1 Y axis value values ColumnSeries Column3DSeries 0 X axis value 1 Y axis value 0 X axis value 1 Y axis value 2 Bubble3DSeries radius Pie2DSeries Pie3 DSeries 0 value 1 percentage 7 9 4 Filling Colors lt Table 27 Parameters Function Called for Numeric Data Fields gt Anual Report 3000 3 000 2 800 2 600 2 400 2500 2 200 2100 2000 2000 2 000 1 800 1 600 1 400 1 200 1 000 800 600 400 200 Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec lt Figure 45 Output Function Call for Numeric Data Fields gt If you want to fill items with user defined colors based on certain conditions you need to define filJsFunction in the series node The following is an example layout to define filJsFunction in a Column 3D chart lt Column3DChart showDataTips true gutterLeft 07 showLabelVert
95. es gt lt series gt lt Bar3DChart gt lt KoolChart gt lt Example 20 Example Bar3D Chart gt 39 151 Kool hor Anual Report vi D 4000 8000 12000 16000 20000 24000 lt Figure 7 Output Bar3D Chart gt 6 8 Pie and Doughnut Charts The definition of the Pie2D chart and the Doughnut2D chart starts with the lt Pie2Dchart gt tag and ends with the lt Pie2Dchart gt tag Also the definition of the Pie3D chart and the Doughnut3D chart starts with the lt Pie3Dchart gt tag and ends with the lt Pie3Dchart gt tag The series of the Pie2D chart and the Doughnut2D chart is Pie2DSeries and the series of the Pie3D chart and the Doughnut3D chart is Pie3DSeries The layouts for the Pie chart and the Doughnut chart are same except the value of the nnerRadius property in the layout The value of the nnerRadius property is a percentage value of the hole compared to the entire pie s radius The valid range of the value is from O to 1 The value of the nnerRadius property for the Pie chart is O and as the value reaches 1 the size of the inner hole increases 0 Pie chart lt KoolChart gt lt Pie2DChart innerRadius 0 showDataTips true gt lt series gt lt Pie2DSeries nameField Month The field name displayed in tooltips field Profit The numeric data field depth 0 05 The depth of the 2D chart value range 0 0 2 40 151 Kkoolz 7 lt showDataEffect gt lt Us
96. ffect gt The following example shows how to create the effect using SeriesSlide lt KoolChart gt lt Column3DChart gt lt Column3DSeries yField Profit gt lt showDataEffect gt lt SetiesSlide duration 1000 Uses SeriesSlide with specific options direction down 116 151 Kkoolz 7 minimumElementDuration 20 perElementOffset 0 elementOffset 30 gt lt showDataEffect gt lt Column3DSeries gt lt Column3DSeries yField Cost gt lt showDataEffect gt lt seriesSlide gt Uses SeriesSlide with default options lt showDataEffect gt lt Column3DSeries gt lt KoolChart gt lt Example 63 Example Effects by Using SeriesSlide gt The effect of the above example runs as follows Each element starts its slide after 30 miliseconds of the previous element s slide and the effect takes at least 20 miliseconds to complete its slide The entire effect takes at least 1 second 1 000 miliseconds to slide the data series down 7 6 Showing DataTips ToolTips on Charts Showing tooltips on the chart column bar area and line etc is achieved by using DataTips ToolTips The tooltip text will be shown when the mouse cursor moves over the chart element To display tooltips on the chart you should set the value of the showDataTips property to true The following example shows how to display tooltips when mouseover event occurs in a Column 3D chart The showDataTips propert
97. hart lt script language JavaScript type text javascript gt var chartVars KoolOnLoadCallFunction KoolChartOnLoad function KoolChartOnLoad var layoutl getCartesianLayout Column2D Column Char Profit var layout2 getCartesianLayout Line2D Line Chart Profit var layout3 getCartesianLayout Column3D Column 3D Chart with Multi Dataset Profit Cost Creating the layouts and the datasets layoutSet layoutl layout2 layout3 layout layout2 dataSet chartData chartData chartData chartData chartData Adding the layouts document getElementByld chart setSlideLayoutSet layoutSet Adding the dataset document getElementByld chart setSlideDataSet dataSet This function returns the layouts as the string type This function can be customized 97 151 Kkoolz 7 Parameters type chart type title caption dataField data field name function getCartesianLayout type title dataField var layout lt KoolChart borderStyle solid gt m lt Options gt lt Caption text title gt lt Options gt lt type Chart showDataTips true gt lt series gt for var i 0 i lt dataField length i d layout lt type Series yField dataField i m displayName dataField i pa layout lt series gt lt horizontalAxis gt lt CategoryAxis categoryField Month
98. harts the Line chart does not have the type property It only has the overlaid type The series of the Line chart is Line2DSeries Like Area2DSeries Line2Dseries has the form property that specifies the way in which the data series is shown in the chart The valid values of the form property are segment curve step and reverseStep lt KoolChart cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Anual Report gt lt Options gt lt Line2DChart showDataTips true gt lt horizontalAxis gt lt CategoryAxis categoryField Month gt lt horizontalAxis gt lt series gt lt Line2DSeries yField Profit form step gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Line2DSeries gt lt Line2DSeries yField Cost form step gt lt Line2DSeries gt lt Line2DSeries yField Revenue form step gt lt Line2DSeries gt lt series gt lt Line2DChart gt lt KoolChart gt lt Example 28 Example Line Chart gt Anual Report 3000 2800 2600 2400 2200 2000 1800 1600 1400 1200 1000 800 600 400 200 o urliD1 Drs May Jul Sep Nov url1Di2 Apr jun Aug Oct Dec lt Figure 15 Output Line Chart gt 48 151 Kkoolz 7 In the Line chart you can define the shape such as circle triangle and rectangle etc which are displayed at the data points x y coordinates by using itemRenderer for the data series Anual Report lt Figure 1
99. horizontalLabelFormatter Formatter id Specifies the formatter for the label of the horizontal line of crosshairs horizontalLabelOppFormatter Formatter id Specifies the formatter for the right side label of the horizontal line of crosshairs It is valid only if useDualCrossXLabel true horizontalLabelPlacement left right default Specifies the position for the label of the horizontal line of crosshairs left Displays the X Y coordinates on the left side showValueLabels left of the chart right Displays the X Y coordinates on the right side of the chart true false Whether or not to display the X Y coordinates default true The current position of the mouse point 137 151 Kool har verticallabelFormatter Formatter id Specifies the formatter for the label of the vertical line of crosshairs verticallabelOppFormatter Formatter id Specifies the formatter for the top side label of the vertical line of crosshairs It is valid only if useDualCrossXLabel true verticallabelPlacement top bottom default bottom Specifies the position for the label of the vertical line of crosshairs top Displays the X Y coordinates on the top side of the chart bottom Displays the X Y coordinates on the bottom side of the chart useDualCrossXLabel false true default false Whether or not to display two axes labels if more than two
100. ically true gt lt series gt lt Column3DSeries yField Profit fillJsFunction fill sFunc styleName seriesStyle gt lt showDataEffect gt 130 151 Kool dior lt SeriesSlide direction up duration Z000 gt lt showDataEffect gt lt Column3DSeries gt lt series gt lt Column3DChart gt lt Example 74 Usage Example fillJsFunction gt The following example shows the user defined function fillJsFunc set for fillsFunction i Parameters seriesId The corresponding series ID index The index of the corresponding item data The original data of the items values The value of the items This parameter is passed as the array type data and the elements of the array are determined based on the chart type as follows Bar2D 3D Series 0 X axis value 1 Y axis value Column2D 3D Series 0 X axis value 1 Y axis value Area2DSeries 0 X axis value 1 Y axis value Bubble3DSeries 0 X axis value 1 Y axis value 2 radius Line2DSeries 0 X axis value 1 Y axis value Pie2D 3D Series 0 value 1 percentage 2 nameField If you defined minField in From To charts the last index of the values is minField E function fillisFunc seriesId index data values if values 1 gt 2000 return OxFF3366 else if values 1 gt 1000 return OxFFFF33 else return OxFF9999 lt Example 75 Example JavaScript Function Called for fillJsFunction gt
101. ies Values Descriptions backgroundColor RGB Specifies the background color Specifies the transparency of the backgroundAlpha O 1 background borderColor RGB Specifies the border color Specifies the transparency of the borderAlpha O 1 border borderThickness Number pixel Specifies the thickness of the border Specifies the roundness of the cornerRadius Number corner Whether or not to display border borderStyle solid none i ines lt Table 32 Properties Labels gt 140 151 Kkoolz 7 7 13 Using Vertical Lines in Line Charts Line charts display lines along the horizontal axis but if you want to make lines display vertically rather than horizontally you must do the followings Create CategoryAxis as a child node of verticalAxis Set the number field value to xField and the name field to yField Set the value of sortOnXxField to false lt rMateChart gt lt Line2DChart gt lt CategoryAxis categoryField Month gt lt verticalAxis gt December lt series gt October sortOnXField false displayName Profits gt lt Line2DSeries gt September lt Line2DSeries xField Costs yField Month August sortOnXField false displayName Costs gt duly November lt Line2DSeries gt lt Line2DSeries xField Revenue yField Month sortOnXField false displayName Revenue gt lt Line2DSeries gt March lt series gt lt Line2DChart gt lt rMateChart gt February January
102. ing Charts in Mobile Exporting the chart image is supported in any HTML5 supported browser so that you can use this functionality in your mobile devices Until the time of KoolChart 2 0 release exporting the chart image is not supported in Android 2 3 Gingerbread and below It generally works well in Android 4 0 Ice Cream Sandwitch and above Please refer to the example http m koolchart com Samples GetSnapshot html 150 151 Kkoolz 7 Thank You 151 151
103. ing the animation effect for data rendering gt lt SeriesInterpolate gt lt showDataEffect gt lt fills gt lt colors are used alternately to fill the slices gt lt SolidColor color 0xff0000 gt lt SolidColor color Oxffffff gt lt fills gt lt Pie2DSeries gt lt series gt lt Pie2DChart gt lt KoolChart gt lt Example 21 Example Pie2D Chart gt 1900 1400 ei 1800 1400 Ne 1500 1700 Ba 2500 2100 3000 2000 2000 lt innerRadius 0 gt lt innerRadius 0 33 gt lt Figure 8 Output Pie Chart and Doughnut Chart gt As you can see from the examples above the value of the innerRadius property determines whether it will be the Pie chart or the Doughnut chart The value of the abe Position property specifies the position where to place the labels of the Polar chart The following describes the values of the abe Position property none Does not draw the value of the numeric data inside Draws labels inside the chart outside Draws labels outside the chart callout Draws labels outside the chart with the line 41 151 Kool insideWithCallout Draws labels inside the pie but if the font size of the label is smaller than insideLabelSizeLimit converts them to callout label You can explode out a single slice by clicking a slice of the Pie chart or the Doughnut chart The default value of the exp odable property is true
104. ipt gt lt script language JavaScript type text javascript gt var chartVars amp KoolOnLoadCallFunction KoolChartOnLoad KoolChart create chart1 chartHolder chartVars 100 100 function KoolChartOnLoad chart setLayout layoutStr chart setData chartData var layoutURL encodeURIComponent chartLayout xml var layoutStr lt KoolChart cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Annual Report gt lt Options gt lt Line2DChart showDataTips true gt lt horizontalAxis gt lt CategoryAxis categoryField Month gt lt horizontalAxis gt lt series gt lt Line2DSeries yField Profit displayName Profit gt 142 151 lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt lineStroke gt lt Stroke color 0xFFOO00 weight 4 gt lt lineStroke gt lt Line2DSeries gt lt series gt lt Line2DChart gt lt KoolChart gt var chartData Month Jan Revenue 10000 Cost 5000 Profit 5000 Month Feb Revenue 15000 Cost 7000 Profit 8000 Month Mar Revenue 12000 Cost 6000 Profit 6000 Month Apr Revenue 30200 Cost 4000 Profit 26200 Month May Revenue 28000 Cost 10000 Profit 18000 Month Jun Revenue 12000 Cost 5000 Profit 7000 Month Jul Revenue 22000 Cost 10000 Profit 12000 Month Aug Revenue 1300
105. is false type polygon showAllDataTips false showDataTips true gt lt radialAxisRenderers gt lt AxisRenderer horizontal true visible true styleName hangingCategoryAxis gt lt AxisRenderer gt lt AxisRenderer horizontal false visible false styleName hangingCategoryAxis gt lt AxisRenderer gt lt radialAxisRenderers gt lt radialAxis gt lt LinearAxis gt lt radialAxis gt lt angularAxis gt lt CategoryAxis id aAxis categoryField catName displayName Category gt lt angularAxis gt lt angularAxisRenderers gt lt AngularAxisRenderer axis aAxis axisTitleStyleName axisTitle styleName hangingCategoryAxis gt lt angularAxisRenderers gt lt series gt lt RadarSeries field year2010 displayName 2010 gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt stroke gt lt Sets the line style of the shape displayed at the data point gt lt Stroke color 0xE48701 weight 2 gt lt stroke gt lt lineStroke gt lt Sets the line style of the series gt lt Stroke color 0xE48701 weight 2 gt lt lineStroke gt lt areaFill gt lt Fills the inner space with the color gt lt SolidColor color 0xE48701 alpha 0 1 gt lt areaFill gt lt fill gt lt Fills the shape displayed at the data point with the color gt lt SolidColor color OxFFFFFF gt lt fill gt 59 151 Kool lt RadarSeries gt lt
106. late gt lt showDataEffect gt lt Column3DSeries gt lt Column3DSeries id series2 yField Cost displayName Cost gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Column3DSeries gt lt Column3DSeries id series3 yField Revenue displayName Revenue gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Column3DSeries gt lt series gt lt Column3DChart gt lt KoolChart gt lt Example 68 Usage Example dataTipJsFunction gt The following example shows the user defined function defined as the value of dataTipJsFunction 124 151 Kool har Parameters seriesId The ID of the series in the layout if it is defined seriesName displayName for the series index The index of the clicked items The index of the leftmost item or the top item is 0 xName If displayName is defined for X axis X axis displayName will be displayed yName If displayName is defined for Y axis Y axis displayName will be displayed data The original data of the items values This parameter is passed as the array type data and the elements of the array are determined based on the chart type as follows Bar2D 3D Series 0 X axis value 1 Y axis value Column2D 3D Series 0 X axis value 1 Y axis value Area2DSeries 0 X axis value 1 Y axis value Bubble3DSeries 0 X axis value 1 Y axis value 2 radius Line2DSeries 0 X axis value 1
107. lt showDataEffect gt lt lineStroke gt lt Stroke color 0xFF3366 weight 2 gt lt lineStroke gt lt stroke gt lt Stroke color 0xFF3366 weight 2 gt lt stroke gt lt Line2DSeries gt lt series gt lt backgroundElements gt lt Line2DChart gt lt KoolChart gt lt Example 61 Example Adding an Image to the Background gt 114 151 Kkoolz 7 3000 M 2800 D 2600 2400 2200 2000 4 1800 1600 1400 1200 1000 lt Figure 40 Output Adding an Image to the Background gt The following example shows how to add an image to the foreground of charts lt annotationElements gt lt Image source http www riamore net image riamoreMainjpg maintainAspectRatio false d lt annotationElements gt lt Example 62 Example Adding an Image to the Foreground gt If you add an image to the foreground of the chart and set the alpha value transparency of the image to 1 the chart will be invisible To avoid this problem you need to set the proper value for alpha The following table shows the properties of Images Properties Descriptions source Specifies the URL of images Whether or not the aspect ratio is the same as the original image maintainAspectRation If it is true the chart will try to keep the ratio of images otherwise the chart will adjust images to fit the size of the chart alpha The transparency of images Effective value
108. lt DateFormatter 28 000 GE gt 26 000 lt NumberFormatter id curFmt gt lt Line2DChart showDataTips true 24 000 fontSize 11 gt 22 000 lt horizontalAxis gt l i 20 000 lt DateTimeAxis dataUnits days labelUnits days interval 4 18 000 16 000 alignLabelsToUnits false 14 000 displayLocalTime true gt lt horizontalAxis gt 12 000 lt verticalAxis gt 10 000 lt LinearAxis formatter curFmt gt lt verticalAxis gt 6 000 lt series gt 6 000 lt Line2DSeries REGSIG Date 4000 yField Profit displayName Profit gt 2 000 lt series gt 0 lt Line2DChart gt 07 01 2009 07 05 2009 07 09 2009 07 13 2009 lt rMateChart gt lt Example 58 Usage Example DateFormatter gt To change the date format in the axis define DateFormatter and assign it a unique id Once DateFormatter is defined with the unique id you set the formatter property of DateTimeAxis to the id Note As the id is a unique object it should be enclosed in the curly braces Please refer to lt Example 8 Example How to Create the Property Value Using the ID gt The following table shows how to use formatString For example if you want to display a date string like 2009 12 01 you should specify the pattern string as YYYY MM DD 110 151 Kkoolz 7 Pattern Characters Descriptions Examples YY 05 Y Year YYYY 2005 YYYYY 02005 M 7 MM 07 S Manin MMM Jul MMMMze July D 4 D Day DD 04
109. lt Stroke weight 10 color 0x66CCFF caps none gt lt axisStroke gt lt tickStroke gt lt Stroke weight 1 color 0x000000 gt lt tickStroke gt lt minorTickStroke gt lt Stroke weight 1 color 0x000000 caps square gt lt minorTickStroke gt lt Axis3DRenderer gt lt verticalAxisRenderers gt lt Column3DChart gt lt Example 52 Example Layout for Axis Styles gt 103 151 Kkoolz 7 7 3 2 Showing and Hiding Axes Using Properties lt Column3DChart gt lt horizontalAxisRenderers gt lt Axis3DRenderer placement bottom showLabels true labelAlign center gt lt Axis3DRenderer gt lt horizontalAxisRenderers gt lt verticalAxisRenderers gt lt Axis3DRenderer gt lt verticalAxisRenderers gt 8 lt Column3DChart gt lt Example 53 Example Layout and Output to Hide the Vertical Axis gt 7 3 3 Changing the Position of Axes January February March April May June July August September October November December lt rMateChart gt lt Column3DChart gt ET mm I E Wi lt Example 54 Example Layout and Output to Change the Position of Axes gt 2 E 3 lt horizontalAxisRenderers gt lt Axis3DRenderer placement top showLabels false gt lt Axis3DRenderer gt lt horizontalAxisRenderers gt S 8 S lt verticalAxisRenderers gt lt Axis3DRenderer placement right showLabels true labelAlign center gt lt Axis3DRenderer
110. m 5000 to 12000 cat Mar from 12000 to 16000 cat Apr from 16000 to 10000 cat May from 10000 to 100 cat Jun from 100 to 1000 cat Jul from 1000 to 3000 cat Aug from 3000 to 8000 cat Sep from 8000 to 12000 cat Oct from 12000 to 14000 cat Nov from 14000 to 7500 cat Dec from 7500 to 2500 cat Next Year from 0 to 20000 L lt Example 40 Example Data of the From To Chart gt The above data represents the revenue variance of the year The following is the layout to create the Waterfill chart with the above data lt KoolChart backgroundColor OxFFFFEE cornerRadius 12 borderStyle so id gt lt Options gt lt Caption text 2013 Revenue Variation Monthly gt lt SubCaption text Unit Thousand Dollars textAlign right fontSize 11 paddingRight 207 gt lt Options gt lt NumberFormatter id fmt gt lt Column2DChart showDataTips true dataTip sFunction data TipFunc fontSize 11 gt lt horizontalAxis gt lt CategoryAxis categoryField cat gt lt horizontalAxis gt lt verticalAxis gt lt LinearAxis formatter fmt gt lt verticalAxis gt lt series gt itemRenderer net ramore rmate charts renderers BoxltemRenderer gt lt showDataEffect gt 70 151 Kkoolz 7 lt SeriesSlide direction up
111. mb_hover png repeat x For the thumb line DIV KoolChart__HScrollThumbHeader background url Assets h_scroll_line png no repeat For the right or up arrow DIV KoolChart__HScrollUpArrow background url Assets right_scroll_arrow png no repeat cursor pointer For the left or down arrow DIV KoolChart__HScrollDownArrow background url Assets left_scroll_arrow png no repeat cursor pointer 65 151 Kkoolz 7 For the vertical track DIV KoolChart_VScrollTrack background url Assets v_scroll_track png repeat y KoolChart_VScrollThumb background url Assets v_scroll_thumb png repeat y border 1px solid 78CBDF cursor pointer KoolChart__VScrollThumb hover background url Assets v_scroll_thumb_hover png repeat y KoolChart__VScrollThumbHeader background url Assets v_scroll_line png no repeat KoolChart_VScrollUpArrow background url Assets up_scroll_arrow png no repeat cursor pointer KoolChart__VScrollDownArrow background url Assets down_scroll_arrow png no repeat cursor pointer lt style gt 6 19 History Charts The History chart has the same characteristics as the Scroll chart But the difference between the two charts is that the History chart scrolls through the navigator or overview The navigator allows users to control the number of items displayed in the chart dynamically
112. mple lt Example 29 Example Line Chart with itemRenderer gt CircleltemRenderer No 2 in the example lt Example 29 Example Line Chart with itemRenderer gt TriangleltemRenderer No 3 in the example lt Example 29 Example Line Chart with itemRenderer gt CrossItemRenderer cross shaped XShapeltemRenderer X shaped IShapeltemRenderer I shaped RectangleltemRenderer Square shaped 6 13 Dashed Line Charts The Dashed Line chart has all the features of the Line chart and the format of the layout is identical to that of the Line chart The following table shows the properties of the Dashed Line chart Properties Values Descriptions lineStyle normal dashLine Specifies the line type To create the Dashed Line chart set the value of the ineSty e property to dashLine before after If the dashLineSeperatePos properity is set dashLinePlacement dashLinePlacement determines the place of the dashed line before or after dashLineSeperatePos The index of data If you want to use the dashed line and the normal line at the uint same time in the chart dashLineSeperatePos determines the dashLineSeperatePos position of the boundary between the dashed line and the normal line The position of dashLineSeperatePos is the index of data Number pixel Specifies the length of each dash For example if you set the default 10 value to 5 both the dashes and spaces will be 5
113. nal image Second whether to use a single image or multiple images to represent the items The following table describes the types of the Image chart Types Aspect Ratio ae 8 i Descriptions Samples imageDisplayType true false Represents data by using a single image Uses the same aspect ratio for D True items S ae he JA If the extra space remains H single unused the space will be filled with a bar Represents data by usinga lr single image False The image size is adjusted automatically mostly vertical 74 151 Kool thar singleRepeat True Represents data by using a single image soo Vern Uses the same aspect ratio for items If the extra space remains tie GGG CUE unused the space will be filled with the same images False n a X True n a multiple False Represents data by using riii multiple images de Each image has a unique value The size of an image is the unit value lt Table 14 Types of the Image Chart gt The mgSource property is added for the Image chart and all the other properties of the Image chart are the same as those of the Column chart The mgSource property determines the path of the image file and how to represent the numeric data as the images lt ImageSeries yField Data imageDisplayType sing eRepeat displayName Number styleName seriesStyl
114. ng setDataURL URL Method 5 String Array setLayout String setData Array Method 6 String XML String setLayout String setData String lt Table 3 Methods to Set the Layout and the Dataset gt You can change the layout and the dataset dynamically using the functions above In order to see the usage example of the functions above you can refer to the samples included in the installation CD Go to the Chart Samples tab of the sample and click Chart Apperances amp Data Integrations 19 151 Kkoolz 7 5 Using Layouts 5 1 About Layouts The layout of KoolChart begins with the lt KoolChart gt tag and end with the lt KoolChart gt tag It consists of 3 parts which are lt Options gt lt Chart gt and lt Style gt You can add the caption sub caption and the legend by setting the values in the lt Options gt tag The format of the KoolChart layout is XML The following example shows the normal process of setting the value of properties lt D is a property of the Column3DSeries object You can create the SolidColor instance as the value of the lt i gt property as follows lt KoolChart gt lt Column3DChart showDataTips true gt lt series gt lt Column3DSeries yField Profit gt lt Column3DSeries gt lt series gt lt Column3DChart gt lt KoolChart gt lt Example 7 Example How to Create the Property Value gt For user s convenience KoolChart provides another method t
115. ntepacapasebecapounenepsaeatiies 105 7 3 5 Adding Thousands Separators EEN 107 7 3 6 Adding Currency SYMboIIs EEN 108 7 3 7 Using Date Formats in Datefmehuis ENEE 110 7 3 8 el rte RE 111 7A Designing Chart Backoroundes EEN 112 Kkoolz 7 7 4 1 Adding GAIA OS ssassn E R E OEREN 112 7 4 2 Adding Mage E 114 7 5 Creating CTacCHilg In 116 7 6 Showing DataTips TOOITIPS on Charts 117 7 7 Creating Lines between Stacked DataSets in Column Charts 118 7 8 Setting Functions for Click Events on Iterns n ssescssssssssscssseescessssssssssssecsessnsseceessesccecsnseeessnnsessesnnnesesennseess 119 7 9 Setting User Defined Functions EEN 122 7 9 1 DataTips ToolTips FUNCTIONS EEN 124 7 9 2 Axis Labels ssena nna e E E OSa 126 7 9 3 Numere Field ot 128 7 9 4 PIMA See EE 130 7 10 Creating Areas and Umnes EEN 132 7 11 ZOOMING and SHOWING Crosshairs EEN 136 712 Adding MCT NOS serren E gepa EEEE EEEE oaaae Tiree SEET Eai E EE EEE SE EESE 139 7 13 Using Vertical Lines in Line Charts EEN 141 7 14 Changing Layouts and Data Dwvpamically EE 141 7 15 Creating Multiple Charts in an HTML 144 7 16 Real Time Chart Example A Stock Monitoring Chart 147 ZE Exporting Charts as IMAGE inosia riae s EES aE EEES 149 7 18 Sending Chart Image to Server 150 749 Exporting Charts in Mobile 23 EENS 150 4 151 Kool dior 1 Overview 1 1 About KoolChart for HTML5 KoolChart for HTML5 is a comprehensive charting solution that allows yo
116. o create the instance value of properties You can create the ID for the value of a property in advance and use the ID for the instance value This method is useful when an object is used for the value of more than one property Once you define a SolidColor ID you can use the ID to refer to the SolidColor instance whenever you want to use the values For example lt KoolChart gt lt SolidColor id color1 color 0xFFO000 gt lt Column3DChart showDataTips true gt 20 151 Kkoolz 7 lt series gt The ID should be enclosed in the curly braces lt Column3DSeries yField Profit gt lt Column3DSeries yField Cost t d lt series gt lt Column3DChart gt lt KoolChart gt lt Example 8 Example How to Create the Property Value Using the ID gt A good usage example of the object ID is that after creating two vertical axes with the object IDs make two different series refer to each vertical axis using the IDs Regardless of the chart type the terms Chart and Series will be used frequently in this document The following table describes key concepts of Chart and Series Descriptions Remarks It represents the visual part of the chart ColumnChart Column3DChart It defines the appearances of the chart such as PieChart Pie3DChart BarChart Chart axes background size etc etc The most important role of Chart is to specifiy the position coordinates of the series It repre
117. omit this parameter the data refresh time will be determined by comparing the client time with endDate In other words if you do not set the timeNow node the refresh time of each client could be different 3 isInitData node If you have the request with the parameter requestAllData true you set the value of the isInitData node to true 4 startDate node The initial time displayed in the chart If you omit this parameter the chart will display the initial time based on the time of the initial data loading 83 151 Kool 5 endDate node The last time displayed in the chart 6 nextInitDate node At the time when lt nextInitDate gt the data is refreshed The request is sent with the parameter requestAllData true This value is related with the current time and the timeNow node For example If the chart displays the data created one month ago every 10 minutes and it has finished displaying the endDate data at a certain time the data request will be sent based on this time with the parameter requestAllData true lt Example 43 Example Server Side of the Real Time Premium Chart gt The following is the output produced by the layout above Real time representation of data with different cycle This sample is a random data 900 60 sll b 17 03 00 17 04 00 17 05 00 17 06 00 17 07 00 17 08 00 17 09 00 17 10 00 17 11 00 17 12 00 gt N o 23 00 02 00 05 00 08 00 11 00 14 00 1
118. ot2Dchart gt tag and ends with the lt Plot2Dchart gt tag The series of the Plot2D chart is Plot2DSeries Note Both of xField and yField are required for each PlotSeries in the Plot2D chart The following is a sample layout and its output for the Plot chart lt KoolChart backgroundColor 0xFFFFEE cornerRadius 12 borderStyle solid gt lt Options gt lt Legend useVisibleCheck true gt lt Options gt lt Plot2DChart showDataTips true gt Ai Creating a Plot chart lt verticalAxis gt lt LinearAxis maximum 3500 gt lt verticalAxis gt lt horizontalAxis gt lt LinearAxis maximum 2800 gt lt horizontalAxis gt lt series gt lt Plot2DSeries xField Cost yField Profit radius 5 displayName Cost Profit gt lt PlotSeries gt lt Plot2DSeries xField Revenue yField Profit radius 5 displayName Revenue Profit gt lt Plot2DSeries gt lt Plot2DSeries xField Cost yField Revenue radius 5 displayName Cost Revenue gt lt Plot2DSeries gt lt series gt lt Plot2DChart gt lt KoolChart gt lt Example 27 Example Plot Chart gt 32000 a 28000 gt e 24000 bai 20000 bd e u e e ee 16000 12000 ai o e e EI 8000 gt ge Ki gt e 4000 o 6000 12000 18000 24000 30000 Cost Profit V Revenue Profit KR e E Cost Revenue lt Figure 14 Output Plot Chart gt 47 151 Kool har 6 12 Line Charts Unlike other Cartesian c
119. pe text css href Koo lChartSample css gt lt If you want to support IE 7 8 you ll need the conditional excanvas include gt lt if IE gt lt script language javascript type text javascript src KoolChart JS excanvas js gt lt script gt lt endif gt lt To include the license key gt lt script language javascript type text javascript src LicenseKey KoolChartLicense js gt lt script gt lt To include KoolChart JS library gt lt script language javascript type text javascript src KoolChart S Koo lChart js gt lt script gt lt sampleHelperjs is for samples Don t include in your application gt lt script language javascript type text javascript src sampleHelper js gt lt script gt lt script type text javascript gt Setting the name of the function which is called when KoolChart is ready to be created lt 4 1 Setting chartVars gt var chartVars KoolOnLoadCallFunction chartReadyHandler Creating a chart Parameters 1 Chart ID You can use any name you like 2 The DIV ID in which the chart is located The parent DIV ID of the chart 9 151 Kkoolz 7 3 chartVars The environment variables which are used when the chart is created 4 The width of the chart If it is omitted the value will be 100 5 The height of the chart If it is omitted the value will be 100 Kool
120. ply Styles 1 gt In the above example KoolChartStyle is defined as a style of the KoolChart node To apply the Style node to the chart you need to set the value for the sty eName property in the KoolChart node as follows styleName the style name you defined i e styleName KoolChartStyle The usage example of the style is as follows lt KoolChart d lt Options gt lt Caption text Annual Report gt lt SubCaption text RiaMore ae lt Options gt lt DateFormatter id dateFmt formatString M D gt lt NumberFormatter id numFmt gt lt Line2DChart showDataTips true styleName chartStyle gt lt horizontalAxis gt lt CategoryAxis id hAxis categoryField Month title Horizontal Axis gt lt horizontalAxis gt lt horizontalAxisRenderers gt lt Axis2DRenderer axis fhAxis gt lt horizontalAxisRenderers gt lt series gt lt Line2DSeries yField Revenue displayName Revenue gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt 25 151 Kkoolz 7 lt Line2DSeries gt lt series gt lt Line2DChart gt lt Style gt KoolChartStyle backgroundColor FFFFFE borderColor 77EE9E cornerRadius 12 borderThickness 3 borderStyle solid captionStyle fontSize 12 fontFamily Tahoma fontWeight bold color 777777 subCaptionStyle fontSize 11 fontStyle italic color 777777 chartStyl
121. problem of IE It indicates the milliseconds time from 00 00 January 1st 1970 until the current time This time is based on the client time The following rules must be followed to write the XML sent to the client Rule 1 The infoMsg node and its sub node information must be required 82 151 Kkoolz 7 Rule 2 The data should be enclosed in the item node The data in this example is based on arbitrary random data not the data from database The display results of the XML are different based on the value of requestAllData 1 requestAllData false Generates the XML for one data item The newly received data is added to the existing data 2 requestAllData true on the initial loading of the chart The client requests the data from the server with the parameter requestAllData true In this sample the server will send the cumulative data from the current time hour 00 until the time hour minute At the time when lt nextInitDate gt the client sends the request again with the parameter requestAllData true 3 The descriptions of the infoMsg node 1 index node The index parameter is not used in this example But this parameter is useful by passing the unique ID of the most recently received index The server can easily find the next data to send by using this parameter 2 timeNow node It indicates the current time of the server This parameter is used to determine the data refresh time If you
122. r Draws crosshairs in the sub chart by referencing the id of CrossRangeZoomer and using 86 151 Kool the data in the main chart lt CrossRangeZoomer id candleCRZ enableZooming ise syncCrossRangeZoomer columnCRZ zoomType both horizontalLabelFormatter nft gt lt annotationElements gt lt Candlestick2DChart gt lt mainChart gt lt subChart gt lt Column2DChart showDatatips true height 20 paddingTop 0 paddingBottom 0 gutterTop 4 gt lt horizontalAxis gt lt CategoryAxis id hAxis2 categoryField date gt lt horizontalAxis gt lt verticalAxis gt lt LinearAxis baseAtZero fa se gt lt verticalAxis gt lt series gt lt Column2DSeries yField trdvo ume itemRenderer BoxltemRenderer gt lt fill gt lt SolidColor color eca614 gt lt fill gt lt Column2DSeries gt lt series gt lt horizontalAxisRenderers gt lt Axis2DRenderer axis hAx s2 showLabels fa se tickLength 07 gt lt horizontalAxisRenderers gt lt annotationElements gt syncCrossRangeZoomer Draws crosshairs in the main chart by referencing the id of CrossRangeZoomer and using the data in the sub chart lt CrossRangeZoomer id columnCRZ enableZooming false syncCrossRangeZoomer cand eCRZ horizontalLabelFormatter nft verticallabelPlacement top gt lt annotationElements gt lt Column2DChart gt lt subChart gt lt d
123. ries In this layout the Column2DSeries node is defined as a child node of the Column2DChart node which means the data will be represented as a column series The data representation of the chart is defined in series You should make sure that the properties of series are correctly defined The Chart node ex Column2DChart Bar2Dchart etc is the parent node of series and it determines the overall appearances of the chart lt KoolChart backgroundColor 0xFFFFEE cornerRadius 12 borderStyle solid gt lt Options gt lt Caption text Anual Report gt lt Options gt lt Column2DChart showDataTips true gt lt horizontalAxis gt lt CategoryAxis categoryField Month gt lt horizontalAxis gt lt Column2DSeries yField Profit itemRenderer SemiCircleColumnItemRenderer gt lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt fill gt lt SolidColor color 0xFFO000 alpha 0 5 gt lt fill gt lt stroke gt lt Stroke color OxFFFFOO weight 1 gt lt stroke gt lt Column2DSeries gt lt series gt lt Column2DChart gt lt KoolChart gt lt Example 16 Example Column2D Chart gt 33 151 Kkoolz 7 The temRenderer property of the Column2DSeries node determines the shape of each data item The valid values of the temRenderer property of the ColumnSeries series are SemiCircleColumnItemRenderer and GradientColumnItemRenderer SemiCircleColumnIt
124. rizontalAxis gt DataTimeAxis is defined as the horizontal axis lt DateTimeAxis dataUnits days labelUnits days title DateTime Axis interval 3 displayName Date displayLocalTime true gt lt horizontalAxis gt lt verticalAxis gt LogAxis is defined as the vertical axis lt LogAxis title Log Axis interval 10 minimum 10 maximum 10000 gt lt verticalAxis gt lt series gt lt Line2DSeries xField Date yField Profit displayName Profit gt lt series gt lt Line2DChart gt lt KoolChart gt lt Example 15 Example DateTimeAxis and LogAxis gt Note If you want to use DataTimeAxis you should define the DateTime field in the series For example if you want to use DateTimeAxis for the horizontal axis in the Column chart you should specify xField In the Bar chart you should define yField for the vertical axis xField represents the field name of the corresponding time range The usage of xField is same as that of cateogoryField in 32 151 Kkoolz 7 CategoryAxis but you should define it as the property of the series not the property of DateTimeAxis 6 3 Column 2D Charts The Column2D chart starts with the lt Column2DChart gt tag and ends with the lt Column2Dchart gt tag You can define horizontalAxis verticalAxis backgroundElements series etc as the child node of the Column2DChart node The following is an example of the Column2D chart with a single dataset single se
125. rizontalStroke gt lt SolidColor color Oxffffff alpha 0 5 gt lt horizontalFill gt lt horizontalalternateFill gt lt SolidColor color 0x000000 alpha 0 5 gt lt horizontalAlternateFill gt lt verticalStroke gt lt Stroke color 0x000000 alpha 1 weight 2 gt lt verticalStroke gt 113 151 Kool har lt verticalFill gt lt SolidColor color 0xOOffff alpha 0 5 gt lt verticalFill gt lt verticalAlternateFill gt lt SolidColor color 0x999999 alpha 0 5 gt lt verticalAlternateFill gt lt GridLines gt lt backgroundElements gt lt Column3DChart gt lt KoolChart gt lt Example 60 Example backgroundElements gt 7 4 2 Adding Images In order to add images to the background of the chart you can use backgroundElements or annotationElements The background elements are displayed in the backgound of the chart and the annotation elements are displayed in the foregound of the chart The following example shows how to add an image using backgroundElements lt KoolChart backgroundColor 0xFFFFEE cornerRadius 12 borderStyle solid gt lt Line2DChart showDataTips true gt lt horizontalAxis gt lt CategoryAxis categoryField Month gt lt horizontalAxis gt lt series gt lt Line2DSeries yField Profit displayName Profit itemRenderer mx charts renderers CircleltemRenderer radius 5 gt lt showDataEffect gt lt SeriesInterpolate gt
126. rue false default true Whether or not to explode out a clicked piece of the doughnut or pie series PieGradationSeries Pie3DSeries Specifies the series of the chart itemClickJsFunction JavaScript function Specifies the name of the function called when the item is clicked dataTipJsFunction JavaScript function Specifies the name of the function called to display the user defined tooltip lt Table 7 Properties Polar Chart gt 6 2 About Axes of Cartesian Charts Except Pie charts and Doughnut charts all charts Cartesian charts have X axes horizontal axes and Y axes vertical axes In charts there are two types of axes The one is the category type axis and the other is the numeric type axis In the categroy type there is only one axis CategroyAxis which is used to define the axis for the text labels CategoryAxis is useful when you are not able to quantify the labels of the axis but you want to 29 151 Kool dior group the labels For example you can use the text for the fields of the axis such as the departments ex Management Division Research Department etc or month ex January Febuary etc In the numeric type axis there are three types of axes LinearAxis LogAxis and DateTimeAxis LinearAxis is used for continuous data that is the general numeric value LogAxis is used for the logarithmic function and DataTimeAxis is used for the date amp
127. sents the actual data ColumnSeries Series If you have three numeric data for a chart you Column3DSeries BarSeries need to define three series for each data Pie3DSereis etc lt Table 4 Descriptions of Chart and Series gt 21 151 Kkoolz 7 5 2 Setting KoolChart in Layouts The KoolChart node tag indicates the start end of the layout The main role of the KoolChart node tag is to decorate the overall design of the chart The following example shows how to use the properties of KoolChart lt KoolChart cornerRadius 12 borderStyle solid backgroundColor OxFFFF77 gt lt Options gt lt Caption text Anual Report gt lt KoolChart gt lt Example 9 Example Layout of the Properties of the KoolChart Node gt 5 3 Setting Options in Layouts The Options node in the layout is optional not mandatory This tag can be used to add the title subtitle and legend in the chart lt KoolChart gt lt Options gt Title Subtitle Legend lt Options gt lt Column3DChart showDataTips true width 100 height 100 gt lt series gt lt Column3DSeries yField Profit displayName Profit gt lt Column3DChart gt lt KoolChart gt lt Example 10 Usage Example Options gt 22 151 5 3 1 Creating Captions and Subcaptions Kool har lt Example 10 Usage Example Options gt shows the layout for a Column3D chart You can create the title by setting
128. ssing data duplicated data caused by some error the data will be ignored And if KoolChart cannot receive the data in the correct order DateTimeAxis will display a blank for the missed data You can use DateTimeAxis for the typical Rea time chart lt KoolChart cornerRadius 12 borderStyle solid gt lt RealTimeChart id chart dataDisplayType time timePeriod 60 interval 3 showDataTips true gt Performs data refreshes every 3 seconds for 60 seconds lt horizontalAxis gt Seconds is the unit of dataUnits and labelUnits and the data refresh interval is 3 seconds and the label interval is 9 seconds lt DateTimeAxis dataUnits seconds labelUnits seconds datalnterval 3 interval 9 displayLocalTime true gt lt horizontalAxis gt lt series M xField should be set as DateTimeAxis is used lt Column2DSeries xField Time yField Volume displayName Trading Volume 55 151 Kool har itemRenderer net riamore rmate charts renderers GradientColumnItemRenderer gt lt fill gt lt SolidColor color 0xBO0C759 gt lt fill gt lt Column2DSeries gt lt series gt lt RealTimeChart gt lt HttpServiceRepeater url http demo riamore net chartTest data4 jsp target chart interval 3 method get gt lt KoolChart gt lt Example 34 Example Real time Chart by Using DateTimeAxis gt Note You should set the same value for the interval property of RealTimeCh
129. t image You can save the image file to the local PC by clicking the right mouse button Please refer to the example Chart Samples gt Export Chart gt Save as Image 7 18 Sending Chart Image to Server You can send the chart image to the server to save it to your server or to create a new image file with the chart image The following example is a JavaScript function for sending the chart image to the server JavaScript function generating the Base64 formatted data and submitting it to the server function getSanpshot generating the Base64 formatted data var base64src document getElementByld chart1 getSnapshot var data document getElementByld data var extension document getElementByld extension extension image file extension value png image source data value base64src when the image is submitted the server side script needs to decode the image and save it to the server document getElementByld sumForm submit In the above JavaScript function the getSnapshot method is called to generate the Base64 formatted data which is sent to the server As the getSnapshot method also uses the toDataURL method of HTMLS5 Canvas this functionality cannot be used in IE 7 8 In order to use the above function the HTML Form script and the server side script need to be written Please refer to the example Chart Samples gt Export Chart gt Save as Image 7 19 Export
130. tTest data4 jsp target chart interval 3 method get gt lt KoolChart gt lt Example 82 Example Monitor Stocks gt Stock Monitoring Refresh every 3 seconds Random data 10000 1000 L 300 s000 800 N 700 g 6000 600 S 5 500 a 4000 4 400 300 2000 4 200 100 o 4 BI IFE o 03 52 38 03 52 47 03 52 56 03 53 05 03 53 14 03 53 23 03 53 32 E Trading Volume Stock Price lt Figure 51 Output Real time Chart to Monitor Stocks gt 7 17 Exporting Charts as Image You can export charts as an image file encoded in Base64 format KoolChart 2 0 supports this functionality by using the toDataURL method of HTML5 Canvas As the toDataURL method is not supported in excanvas js you cannot use IE 7 8 for exporting charts The following example shows how to call KoolChart provided method saveAsImage for exporting the chart as the Base64 formatted data function snapShot var base64src document getElementByld chart1 saveAsImage document getElementByld img src base64src The saveAsImage method is a KoolChart provided function called by accessing calling getElementByld the chart 149 151 Kkoolz 7 id chart1 in the example above When the first statement is executed the image data encoded in Base64 format is saved to the variable base64src As JavaScript cannot save a file to the local PC we provide an example that opens a new popup window that displays the char
131. tems gt lt Example 32 Example Real time Chart gt When you create the Real time chart in your web page you don t have to add the initial data Note If the value of the nterva property in the Real time chart is 5 5 seconds KoolChart will pull the data from servers every 5 seconds but in the real service enviromment several factors network link status communication status traffic etc may cause some delays The server side programmer should consider those factors to develop the program that pull the real time data The Real time chart uses two data types to represent data 1 The number of data As soon as the Real time chart receives the data it displays the predefined number of data immediately and then displays the next data one by one For example if you set the value of displayDataSize to 20 it will display 20 data at once and then refresh the chart with the next data 2 Time The Real time chart displays data based on the time For example if you set the value of timePeriod to 3600 seconds 1 hour and set the value of interval to 3 the Real time chart will display data every 3 seconds for 1 hour After 1 hour it will refresh the chart with the next data The value of interval should be the same as that of HttpServiceRepeater 6 15 1 Creating Real Time Charts Based on the Number of Data Using CategoryAxis If you want to display the Real time chart based on the number of data you h
132. the title text as the value of the text property in the Caption tag 5 3 2 Creating Legends The legend is used to display the titles of each series in the multiple series chart In order to use the legend you can specify the value of the disp ayName property of the series For example if you want to create the Column3D chart you need to specify the name of the series as Column3Dseries in the chart The value of the disp layName property will be displayed in the legend Annual Report Annual Report Annual Report O SH Idi Prot i D cost V B Revenue Soe f H f U 2400 5 2800 L 2400 d g j A T 2000 f 2400 5 2000 f P 1600 A AROR d P 1600 A S d P 1600 8 5 H 1200 U H i 1200 A 1200 p d U SS 4 200 2 200 s T 400 d f 400 f S i Di Drs M el S Ne url1D1 Dr3 May Jul Sep Nov Ce j i D12 Apr poole ad Des d P th TT Il oii S ek Gem es P position right position top position left R direction vertical direction horizontal direction vertical O useVisibleCheck true useVisibleCheck true useVisibleCheck false P vAlign middle hAlign right vAlign bottom E R T I E S lt Example 11 Example Properties of Legend gt 5 4 Setting Styles CSS in Layouts The Style node is the style sheets specifying the format of the chart To define Style node check the following rules 23 151 Kkoolz 7 1 You should define the Style node
133. thout cancelling the previous requests single Sends one request at a time If the duplicated requests occur the error message will be generated last Cancels all the previous requests and sends the last request 78 151 Kool retryCount Number default 30 Specifies the retry count when RPC error occurs lt Table 17 Properties RPCItem Node gt The following example shows how to create a Real time premium chart by using a Combination 2D chart lt KoolChart backgroundColor OxFFFFFF cornerRadius 22 borderStyle sold lt Options gt lt Caption text Real time chart different cycle data gt lt SubCaption text Random data is used textAlign right fontSize 11 gt lt Legend fontSize 77 useVisibleCheck true gt lt Options gt Defines the formatters lt DateFormatter id dateOrgFmt formatString YYYY MM DD HH NN SS gt lt DateFormatter id dateFmt formatString HH NN SS gt lt DateFormatter id dateFfmt2 formatString HH NN gt lt NumberFormatter id numFmt gt Creates the Combination 2D chart with one column series and two line series lt Combination2DChart id chart showDataTips true dataTipMode multiple gt lt series gt lt Line series with 5 seconds cycle gt lt Line2DSeries id ineSeries xField date yField data5 displayName Data 5 Seg lt lineStroke gt lt Stroke color O
134. tive labels If there is no enough space between two consecutive labels the value will be ignored dstdintenal Number Specifies the interval between two consecutive data For example If you set 30 151 Kkoolz 7 as dataUnits second and the actual interval between two consecutive data is 3 seconds you should set as datalnterval 4 It means that KoolChart treats every 3 seconds as a unit and renders it at 4th position In some types of chart this property can be ignored displayName String character string Specifies the text displayed in tooltips displayLocalTime false true default false Specifies whether or not the local time zone is used If the value is false Greenwich Mean Time will be used labelJsFunction Javascript Function Specifies the name of the function called to display the user defined label LogAxis interval Multiplier of 10 Specifies the lables as the multiplier of 10 ne Specifies the minimum value of the axis minimum Number label Specifies the maximum value of the axis maximum Number label title Stirng character string Specifies the title of the axis displayName String character string Specifies the text displayed in tooltips labelJsFunction JavaScript Function Specifies the name of the function called to display the user defined label 6 2 1 CategoryAxis and LinearAxis lt Table 8
135. tpMultiServiceRepeater node Properties Values Descriptions Specifies the base URL for the ur property of baseURL URL RPClItem full path baseURL url of RPCItem method get post default get Specifies the HTTP method requestTimeout Second The maximum waiting time for the request Specifies the controller of the target of RPCItem targetController Chart ID It should be the chart showErrorMessage true false default true Whether or not to show the error message box when RPC error occurrs lt Table 16 Properties HttpMultiServiceRepeater Node gt The following table describes the properties of the RPCItem node Properties Values Descriptions name String Specifies the name of RPCItem url String Specifies the url of RPCItem full path baseURL url of RPCItem method get post default get Specifies the HTTP method target Series ID Specifies the ID of the data series received from the RPC request Each RPClItem is a series interval Seconds Specifies the interval of the RPC requests The first RPC request is sent when the initial chart loading is finished If the value of interval is not specified the request will not be sent periodically concurrency multiple single last default multiple Specifies how to handle the duplicated HTTP requests multiple Sends all requests wi
136. tual Chart Linear Type Cylinder Type Cylinder Ber Type 3000 2000 z aso wei 00 2 00 2 500 S a5 KN 2000 1 900 2 esu 1900 pace m SE Jan 4 900 a 1 500 00 1 500 o 5 a i Lu de 1 400 8 i 3 ua 2 i 4 i H L b E ar A FP F Mi ML z 8 AN FEB MAR app We I WL AG SEP OCT NOV OEC AN FEB MAR APR We AUG SEP OCT NOV DE D 200 400 60 lt Figure 22 Outputs Target vs Actual Chart gt 6 18 Scroll Charts The Scroll charts are useful when the chart has too many data to show but has a little space Instead of accommodating all dadta in the constrained space you can use the Scroll chart to increase the space and dispay the data better It displays a specified number of items in the chart and by scrolling with the mouse it displays the rest of the items As CategoryLinearAxis is inherited from LinearAxis you can use all the properties of LinearAxis in CategoryLinearAxis To create a Scroll chart follow the steps below Create a 2D chart layout for example the Column 2D chart As the Column chart needs to be scrolled horizontally set CategoryLinearAxis as a child node of the horizontalAxis node the verticalAxis node for the Bar chart Set ScrollableAxisRenderer as a child node of the horizontalAxisRenderers node The scrollbar is created as a style of CSS The image files for the scrollbar are located in the Assets directory 63 151 Kool lt KoolChart backgroundColor 0xFFFFEE cornerRadi
137. u to add visualization features into your applications It is a pure JavaScript HTML5 Canvas solution and you do not have to install any plugin KoolChart for HTMLS5 is platform independent and a non browser specific World Wide Web solution As it provides you with more than 30 types of 2D 3D charts and gauges you can experience a higher level of user interface from KoolChart for HTML5 Please visit our website at http www koolchart com and click Demo you will see a decent user interface and the highly interactive charting solution 1 2 System Requirements Server No restrictions Client HTML5 Canvas supported browsers IE Firefox Safari Chrome iPhone Android 9 0 3 0 3 0 3 0 1 0 1 0 For IE 7 or 8 ExplorerCanvas excanvas js which is packaged in KoolChart for HTML5 can be used to bring the feature which supports the HTML5 canvas tag to Internet Explorer but it could degrade the performance of chart renderings and the print function doesn t work properly in IE7 and IE8 Depending on which browser or version is used the feature and the shape of chart elements rendered in charts can be different 1 3 KoolChart System Configuration WEB SERVER WAS Back End Data Source Data Connectivities as Open Source Database Generated DataSet HTML code JSON XML XML Data T Link or Include Proprietary JavaScript code Database User created ava cript code lt Figure
138. ual Report gt lt Options gt lt Column3DChart showDataTips true gt lt axisLabelFunc is the name of JavaScript gt lt CategoryAxis categoryField Month displayName Date lt horizontalAxis gt lt verticalAxis gt lt LinearAxis displayName Amount gt lt verticalAxis gt lt Column3DChart gt lt KoolChart gt lt Example 70 Usage Example labelJsFunction gt Z A user defined function for X axis labels Parameters id The ID of axes value The value of items function axisLabelFunc id value return value 2009 lt Example 71 Example JavaScript Function Called for Labels gt 127 151 Kool Anual Report 2400 2200 2000 1800 1600 1400 1200 1000 800 600 400 200 E f ei 7 Jan 2009 Feb 2009 Mar 2009 Apr 2009 May 2009 Jun 2009 lt Figure 44 Output Function Call for Labels gt 7 9 3 Numeric Fields If you want to create user defined numeric data fields in Column Bar or Pie charts you need to define labelJsFunction in the series node The following example shows how to define labelJsFunction to create user defined numeric data fields lt series gt lt seriesLabelFunc is the name of JavaScript function gt ee yField Profit displayName Profit labelPosition outside styleName seriesStyle lt showDataEffect gt
139. us 12 borderStyle solid gt lt Options gt lt Caption text Scroll Chart Column 2D gt lt Options gt lt Column2DChart showDataTips true gutterRight 10 gt lt series gt lt Column2DSeries id cs1 yField Data1 displayName Data1l itemRenderer SemiCircleColumnItemRenderer gt lt series gt lt horizontalAxis gt lt CategoryLinearAxis id hAxis categoryField Gu gt lt horizontalAxis gt lt horizontalAxisRenderers gt lt horizontalAxisRenderers gt lt Column2DChart gt lt KoolChart gt lt Example 38 Example Scroll 2D Column Chart gt Scroll Chart Column2D 3400 4 3200 3000 3 000 2800 2600 4 2 500 2400 4 2200 4 2000 4 1 900 2 000 2 000 1800 4 oe 1600 1 500 1400 4 1 400 1 400 1200 4 1000 4 1 000 800 4 600 400 5 200 4 0 4 dE gee City G City H City lt Figure 23 Output Scroll 2D Column Chart gt gt Scroll Images for CSS lt style gt For the scrollbar DIV 64 151 Kool hav KoolChart__ScrollBar border 1px solid 78CBDF For the horizontal track DIV KoolChart__HScrollTrack background url Assets h_scroll_track png repeat x For the thumb DIV KoolChart__HScrollThumb background url Assets h_scroll_thumb png repeat x border 1px solid 78CBDF cursor pointer For the thumb hover DIV KoolChart__HScrollThumb hover background url Assets h_scroll_thu
140. ut Combination Chart with type clustered gt If you want to display the stacked column set the value of the type property to stacked sooo i 4000 lt Figure 19 Output Combination Chart with type stacked gt 6 15 Real Time Charts The Real time chart is useful when you need to monitor real time data which is changing continuously The definition of the Real time chart starts with the lt RealTimeChart gt tag and ends with the lt RealTimeChart gt tag For the series of the Real time chart you can specify column series line series or area series HttpsServiceRepeater has the role of initiating RPC Remote Procedure Call which is used to read data from servers and should be defined in the layout To create the Real time chart you should keep in mind the following rules 1 The HttpServiceRepeater node must be created as the child node of lt KoolChart gt and the sibling node of lt RealTimeCartesianChart gt 2 Set the value of the target property to the ID of the Real time chart 3 The URL of HttpServiceRepeater is the path of XML The format of the XML data must be written as follows 53 151 Kkoolz 7 lt xml version 1 0 encoding utf 8 gt lt items gt Starts with the items node lt item gt Each data item should be enclosed in lt item gt lt item gt lt Time gt 13 8 27 lt Time gt lt Volume gt 5527 lt Volume gt lt Price gt 309 lt Price gt lt item gt lt i
141. var dataURL encodeURIComponent singleData xml chartVars amp dataURL dataURL KoolChart create chart1 chartHolder chartVars 100 100 Parameters seriesId The ID of series in the layout if it is defined displayText The content of tooltips 120 151 Kkoolz 7 index The index of clicked items The index of leftmost or top items is 0 data The original data of items values This parameter is passed as an array type data and the elements of the array are determined based on the chart type as follows Bar2D 3D Series 0 X axis value 1 Y axis value Column2D 3D Series 0 X axis value 1 Y axis value Area2DSeries 0 X axis value 1 Y axis value Bubble3DSeries 0 X axis value 1 Y axis value 2 radius Line2DSeries 0 X axis value 1 Y axis value Pie2DSeries 0 value A function chartClick seriesld displayText index data values alert seriesid seriesId WndisplayText displayText Wnindex index Wndata data Wnvalues valu es lt script gt lt head gt lt body gt lt div class content gt lt div id chartHolder style width 600px height 400px gt lt div gt lt div gt lt body gt lt html gt lt Example 67 Example JavaScript Function Called When Item Click Occurs gt The following table describes the parameters used in the above example Parameters Descriptions seriesId
142. xFF6666 weight 2 alpha 1 gt lt lineStroke gt lt horizontalAxis gt lt DateTimeAxis id hAx s2 displayLocalTime true labelUnits minutes dataUnits seconds interval 1 formatter dateOrgFmt displayName 7ime gt lt horizontalAxis gt lt verticalAxis gt lt LinearAxis id VAxis2 minimum 0 maximum 150 gt lt verticalAxis gt lt Line2DSeries gt lt Line series with 3 seconds cycle gt lt Line2DSeries id ineSeries2 xField date yField data3 displayName Data 3 Sec verticalAxis VAx s2 horizontalAxis hAxis2 gt lt lineStroke gt lt Stroke color 0x339966 weight 1 alpha Z gt lt lineStroke gt 79 151 Kool lt Line2DSeries gt lt Defines the accumulated sum gt lt Column2DSeries id co umnSeries xField date yField data60 displayName Accumulated sum itemRenderer BoxitemRenderer gt lt horizontalAxis gt lt DateTimeAxis id hAx s displayLocalTime true labelUnits hours dataUnits minutes interval 3 datalnterval 70 formatter dateOrgFmt displayName 7ime gt lt horizontalAxis gt lt verticalAxis gt lt LinearAxis id VAxis minimum 0 maximum 999 gt lt verticalAxis gt lt fill gt lt SolidColor color Ox6666FF gt lt fill gt lt Column2DSeries gt lt series gt lt horizontalAxisRenderers gt lt AxisRenderer axis h
143. xValueLabel true maxLabelJsFunction maxLabe Func minLabelJsFunction minLabelFunc gt Sets the fill color when the closing price is higher than the opening price lt fill gt lt SolidColor color f0000 alpha 0 5 gt lt fill gt Sets the color of the line connecting the highest price and the lowest price when the closing price is higher than the opening price lt stroke gt lt Stroke color ff0000 gt lt stroke gt Sets the color of the outer line of the bar when the closing price is higher than the opening price lt boxStroke gt lt Stroke color 0000 gt lt boxStroke gt Sets the fill color for the bar when the opening price is higher than the closing price lt declineFill gt lt SolidColor color 0000ff alpha 0 5 gt lt declineFill gt Sets the color of the line connecting the highest price and the lowest price when the opening price is higher than the closing price lt declineStroke gt lt Stroke color 0000ff gt lt declineStroke gt Sets the color of the outer line of the bar when the opening price is higher than the closing price lt declineBoxStroke gt lt Stroke color 0000ff gt lt declineBoxStroke gt lt Candlestick2DSeries gt lt series gt lt horizontalAxisRenderers gt lt Axis2DRenderer placement bottom axis hAxis tickLength 07 gt lt horizontalAxisRenderers gt lt annotationElements gt syncCrossRangeZoome
144. y is the common property for all charts lt KoolChart gt lt Options gt lt Caption text Annual Report gt lt Options gt lt Column3DChart showDataTips true gt lt horizontalAxis gt lt CategoryAxis categoryField Month title Month gt lt horizontalAxis gt lt series gt lt Column3DSeries yField Profit displayName Profit gt 117 151 Kkoolz 7 lt showDataEffect gt lt SeriesInterpolate gt lt showDataEffect gt lt Column3DSeries gt Profit Mar A 1500 O lt Tooltip displayed when mouseover event occurs gt lt KoolChart gt lt Example 64 Usage Example Tooltips gt Once you set the value of showDataTips to true and set the value of the displayName property of Series to Profit you can have the Tooltip text like above example 7 7 Creating Lines between Stacked DataSets in Column Charts You might want to add some additional lines to connect shapes in the chart in order to indicate an additional reporting relationship You can add connecting lines to the stacked column chart by setting the value of the ineTo achItems property of Column2DSeries or Column3DSeries to true alwayShowLines Indicates whether the line for 0 valued data can be displayed or not True Displays lines for all data including O valued data False Displays lines except O valued data lt Column2DChart showDataTips true type stacked gt Defines

RiaMore Soft - JavaScript Charts

Contents

Download Pdf Manuals

Related Search

Related Contents