AAChartModel

AAInfographics

📈📊📱💻🖥️An elegant modern declarative data visualization chart framework for iOS, iPadOS and macOS. Extremely powerful, supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types. 极其精美而又强大的跨平台数据可视化图表框架,支持柱状图、条形图、折线图、曲线图、折线填充图、曲线填充图、气泡图、扇形图、环形图、散点图、雷达图、混合图等各种类型的多达几十种的信息图图表,完全满足工作所需.
Under MIT License
By AAChartModel

animation ios swift data-analysis model draw graphics data-visualization objective-c view graph chart column-chart bar-chart line-chart area-chart bubble-chart plot spline-chart pie


AAInfographics


English Document 🇬🇧 | 简体中文文档 🇨🇳 | 繁體中文文檔 🇭🇰
There is the link of Objective-C version of AAChartKit as follow
https://github.com/AAChartModel/AAChartKit
Preface

AAInfographics is the Swift language version of AAChartKit which is object-oriented, a set of easy-to-use, extremely elegant graphics drawing controls,based on the popular open source front-end chart library Highcharts. It makes it very fast to add interactive charts to your mobile projects. It supports single touch-drag for data inspection, multi-touch for zooming, and advanced responsiveness for your apps .

Features

Appreciation

| Column Chart | Column Range Chart | Area Chart |
| :----: | :----: | :----: |
| | | |


| Line Chart | Step Area Chart | Step Line Chart |
| :----: | :----: | :----: |
| | | |


| Spline Chart | Areaspline Chart | Stacked Polar Chart |
| :----: | :----: | :----: |
| | | |


| Bubble Chart | Arearange Average Value Chart | Column Mixed Line Chart |
| :----: | :----: | :----: |
| | | |


| Scatter Chart | Boxplot Chart | Mirror Column Chart |
| :----: | :----: | :----: |
| | | |


Installation
CocoaPods (recommended)

  1. Add following content
    ```ruby
    pod 'AAInfographics', :git => 'https://github.com/AAChartModel/AAChartKit-Swift.git'


```
to your project Podfile.



  1. Run pod install or pod update.

  2. Import AAInfographics.


Manually (old school way)

  1. Download whole project demo of AAInfographicsDemo

  2. Drag the folder AAInfographics into your project.


Usage

  1. Creat the instance object of chart view:AAChartView


swift
let chartViewWidth = self.view.frame.size.width
let chartViewHeight = self.view.frame.size.height
aaChartView = AAChartView()
aaChartView?.frame = CGRect(x:0,y:0,width:chartViewWidth,height:chartViewHeight)
// set the content height of aachartView
// aaChartView?.contentHeight = self.view.frame.size.height
self.view.addSubview(aaChartView!)

2. Configure the properties of chart model:AAChartModel


swift
let aaChartModel = AAChartModel()
.chartType(.column)//Can be any of the chart types listed under `AAChartType`.
.animationType(.bounce)
.title("TITLE")//The chart title
.subtitle("subtitle")//The chart subtitle
.dataLabelsEnabled(false) //Enable or disable the data labels. Defaults to false
.tooltipValueSuffix("USD")//the value suffix of the chart tooltip
.categories(["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"])
.colorsTheme(["#fe117c","#ffc069","#06caf4","#7dffc0"])
.series([
AASeriesElement()
.name("Tokyo")
.data([7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]),
AASeriesElement()
.name("New York")
.data([0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]),
AASeriesElement()
.name("Berlin")
.data([0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]),
AASeriesElement()
.name("London")
.data([3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]),
])



  1. Draw the chart(This method is called only for the first time after you create an AAChartView instance object)


swift
//The chart view object calls the instance object of AAChartModel and draws the final graphic
aaChartView?.aa_drawChartWithChartModel(aaChartModel!)


🌹🌹🌹Congratulations! Everything was done!!! You will get what you want!!!


Update chart content

if you want to refresh chart content,you should do something as follow.According to your actual needs, select the function that fits you.



swift
//Only refresh the chart series data
aaChartView?.aa_onlyRefreshTheChartDataWithChartModelSeries(chartModelSeriesArray)



swift
//Refresh the chart after the AAChartModel whole content is updated
aaChartView?.aa_refreshChartWholeContentWithChartModel(aaChartModel!)


Infographics sample




























More graphics




  • Note: The following DEMO picture is a GIF dynamic picture which has a size of around 6M. If you don't see any dynamic preview, then this is because the picture resources were not fully loaded. In such a case please be patient and wait for the contents to finish loading. Maybe you need to reload this page.






Special instructions
Support user click events and move over events

you can monitor the user touch events message through implementing delegate function for AAChartView instance object


```swift
//Set AAChartView events delegate
aaChartView!.delegate = self as AAChartViewDelegate
//set AAChartModel support user touch event
aaChartModel = aaChartModel!.touchEventEnabled(true)


//implement AAChartView user touch events delegate function
extension CommonChartVC: AAChartViewDelegate {
open func aaChartView(_ aaChartView: AAChartView, moveOverEventMessage: AAMoveOverEventMessageModel) {
print("🔥selected point series element name: (moveOverEventMessage.name ?? "")")
}
}
```


The received touch events message contain following content


swift
public class AAMoveOverEventMessageModel: NSObject {
public var name: String?
public var x: Float?
public var y: Float?
public var category: String?
public var offset: [String: Any]?
public var index: Int?
}


Monitoring user click events can achieve a variety of custom functions. For example, you can implement Double Charts Linkage through user click event callbacks. The example effects are as follows



Support for custom the style of chart AATooltip through JavaScript function

As we all know, AAInfographics support using HTML String. Most of time, the headerFormat 、pointFormat、footerFormat HTML string is enough for customizing chart tooltip string content, However, sometimes the needs of APP is so weird to satified, in this time, you can even customize the chart tooltip style through JavaScript function.


For example



js
aaOptions.tooltip?
.useHTML(true)
.formatter("""
function () {
return ' 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 <br/> '
+ ' Support JavaScript Function Just Right Now !!! <br/> '
+ ' The Gold Price For <b>2020 '
+ this.x
+ ' </b> Is <b> '
+ this.y
+ ' </b> Dollars ';
}
""")
.valueDecimals(2)//设置取值精确到小数点后几位//设置取值精确到小数点后几位
.backgroundColor("#000000")
.borderColor("#000000")
.style(AAStyle()
.color("#FFD700")
.fontSize(12)
)


you can get the customized tooltip style chart like this👇



js
aaOptions.tooltip?
.useHTML(true)
.formatter(#"""
function () {
let wholeContentStr ='<span style=\"' + 'color:lightGray; font-size:13px\"' + '>◉ Time: ' + this.x + ' year</span><br/>';
let length = this.points.length;
for (let i = 0; i < length; i++) {
let thisPoint = this.points[i];
let yValue = thisPoint.y;
if (yValue != 0) {
let spanStyleStartStr = '<span style=\"' + 'color:'+ thisPoint.color + '; font-size:13px\"' + '>◉ ';
let spanStyleEndStr = '</span> <br/>';
wholeContentStr += spanStyleStartStr + thisPoint.series.name + ': ' + thisPoint.y + '℃' + spanStyleEndStr;
}
}
return wholeContentStr;
}
"""#)
.backgroundColor("#050505")
.borderColor("#050505")


you can get the customized tooltip style chart like this👇


Support value range segmentation

Support scrolling update chart data



Support data sorting with animation effect



Supported chart type for now

swift
enum AAChartType: String {
case column     = "column"     //column chart
case bar         = "bar"         //bar chart
case area       = "area"       //area chart
case areaspline = "areaspline" //areaspline chart
case line       = "line"         //line chart
case spline     = "spline"     //spline chart
case scatter     = "scatter"     //scatter chart
case pie         = "pie"         //pie chart
case bubble     = "bubble"      //bubble chart
case pyramid     = "pyramid"     //pyramid chart
case funnel     = "funnel"   //funnel chart
case columnrange = "columnrange" //column range chart
case arearange = "arearange" //area range chart
case areasplinerange = "areasplinerange" //area spline range chart
case boxplot = "boxplot" //boxplot chart
case waterfall = "waterfall" //waterfall chart
case polygon = "polygon" //polygon chart
}


Supported zoom gesture types for now

swift
enum AAChartZoomType: String {
case none = "none"
case x = "x"
case y = "y"
case xy = "xy"
}


Supported animation type for now

```swift


public enum AAChartAnimationType: String {
case easeInQuad = "easeInQuad"
case easeOutQuad = "easeOutQuad"
case easeInOutQuad = "easeInOutQuad"
case easeInCubic = "easeInCubic"
case easeOutCubic = "easeOutCubic"
case easeInOutCubic = "easeInOutCubic"
case easeInQuart = "easeInQuart"
case easeOutQuart = "easeOutQuart"
case easeInOutQuart = "easeInOutQuart"
case easeInQuint = "easeInQuint"
case easeOutQuint = "easeOutQuint"
case easeInOutQuint = "easeInOutQuint"
case easeInSine = "easeInSine"
case easeOutSine = "easeOutSine"
case easeInOutSine = "easeInOutSine"
case easeInExpo = "easeInExpo"
case easeOutExpo = "easeOutExpo"
case easeInOutExpo = "easeInOutExpo"
case easeInCirc = "easeInCirc"
case easeOutCirc = "easeOutCirc"
case easeInOutCirc = "easeInOutCirc"
case easeOutBounce = "easeOutBounce"
case easeInBack = "easeInBack"
case easeOutBack = "easeOutBack"
case easeInOutBack = "easeInOutBack"
case elastic = "elastic"
case swingFromTo = "swingFromTo"
case swingFrom = "swingFrom"
case swingTo = "swingTo"
case bounce = "bounce"
case bouncePast = "bouncePast"
case easeFromTo = "easeFromTo"
case easeFrom = "easeFrom"
case easeTo = "easeTo"
}
```


Here are the ten concrete animation types of AAInfographics


| Back | Bounce | Circ | Cubic | Elastic |
|:---------:|:---------:|:---------:|:---------:|:---------:|
| | | | | |


| Expo | Quad | Quart | Quint | Sine |
|:---------:|:---------:|:---------:|:---------:|:---------:|
| | | | | |


About AAChartModel

Property name | Property type | Description | Value Range |
------------ | ------------- | ------------- | ------------- |
title | String | The chart title | Any valid string |
subtitle | String |The chart subtitle | Any valid string |
chartType | AAChartType | The default series type for the chart. Can be any of the chart types listed under AAChartType. | .column, .bar, .area, .areaSpline, .line, .spline, .pie, .bubble, .scatter, .pyramid, .funnel, .areaRange, .columnRange |
stacking| AAChartStackingType | Whether to stack the values of each series on top of each other. Possible values are null to disable, "normal" to stack by value or "percent". When stacking is enabled, data must be sorted in ascending X order | .none, .normal, .percent |
symbol | AAChartSymbolType | A predefined shape or symbol for the marker. When null, the symbol is pulled from options.symbols. Other possible values are "circle", "square", "diamond", "triangle" and "triangle-down" | .circle, .square, .diamond, .triangle, .triangleDown |



Created By

An An
``` java
"CODE IS FAR AWAY FROM BUG WITH THE ANIMAL PROTECTING"



Source Code Links⛓
Normal Versions

Language | Project Name | Target Platform | Source Code Link |
------------ | ------------- | ------------- | ------------- |
Swift | AAInfographics | iOS |https://github.com/AAChartModel/AAChartKit-Swift |
Objective C | AAChartKit | iOS | https://github.com/AAChartModel/AAChartKit |
Kotlin | AAInfographics | Android | https://github.com/AAChartModel/AAChartCore-Kotlin |
Java | AAChartCore | Android | https://github.com/AAChartModel/AAChartCore |


Pro Versions

Pro Versions are more powerful data visualization frameworks that support more types beautiful chart like bellcurve, bullet, columnpyramid, cylinder, dependencywheel, heatmap, histogram, networkgraph, organization, packedbubble, pareto, sankey, series, solidgauge, streamgraph, sunburst, tilemap, timeline, treemap, variablepie, variwide, vector, venn, windbarb, wordcloud, xrange charts and so on.


Language | Project Name | Target Platform | Source Code Link |
------------ | ------------- | ------------- | ------------- |
Swift | AAInfographics-Pro | iOS |https://github.com/AAChartModel/AAChartKit-Swift-Pro |
Objective C | AAChartKit-Pro | iOS | https://github.com/AAChartModel/AAChartKit-Pro |
Kotlin | AAInfographics-Pro | Android | Coming Soon... |
Java | AAChartCore-Pro | Android | Coming Soon... |


LICENSE


AAInfographics is available under the MIT license. See the LICENSE file for more information.


Contact

Todo list