Merge pull request #3415 from larryonoff/draw-gradient-line

Added gradient line drawing to LineChartRenderer. based on PR #3142

ChartsDemo-iOS/Swift/DemoBaseViewController.swift

@@ -21,6 +21,8 @@ enum Option {
     case toggleAutoScaleMinMax
     case toggleData
     case toggleBarBorders
+    // LineChart
+    case toggleGradientLine
     // CandleChart
     case toggleShadowColorSameAsCandle
     // CombinedChart
@@ -58,6 +60,8 @@ enum Option {
         case .toggleAutoScaleMinMax: return "Toggle auto scale min/max"
         case .toggleData: return "Toggle Data"
         case .toggleBarBorders: return "Toggle Bar Borders"
+        // LineChart
+        case .toggleGradientLine: return "Toggle Gradient Line"
         // CandleChart
         case .toggleShadowColorSameAsCandle: return "Toggle shadow same color"
         // CombinedChart

ChartsDemo-iOS/Swift/Demos/LineChart1ViewController.swift

@@ -30,43 +30,44 @@ class LineChart1ViewController: DemoBaseViewController {
                         .toggleIcons,
                         .toggleStepped,
                         .toggleHighlight,
+                        .toggleGradientLine,
                         .animateX,
                         .animateY,
                         .animateXY,
                         .saveToGallery,
                         .togglePinchZoom,
                         .toggleAutoScaleMinMax,
                         .toggleData]
-        
+
         chartView.delegate = self
-        
+
         chartView.chartDescription.enabled = false
         chartView.dragEnabled = true
         chartView.setScaleEnabled(true)
         chartView.pinchZoomEnabled = true
-        
+
         // x-axis limit line
         let llXAxis = ChartLimitLine(limit: 10, label: "Index 10")
         llXAxis.lineWidth = 4
         llXAxis.lineDashLengths = [10, 10, 0]
         llXAxis.labelPosition = .rightBottom
         llXAxis.valueFont = .systemFont(ofSize: 10)
-        
+
         chartView.xAxis.gridLineDashLengths = [10, 10]
         chartView.xAxis.gridLineDashPhase = 0
-        
+
         let ll1 = ChartLimitLine(limit: 150, label: "Upper Limit")
         ll1.lineWidth = 4
         ll1.lineDashLengths = [5, 5]
         ll1.labelPosition = .rightTop
         ll1.valueFont = .systemFont(ofSize: 10)
-        
+
         let ll2 = ChartLimitLine(limit: -30, label: "Lower Limit")
         ll2.lineWidth = 4
         ll2.lineDashLengths = [5,5]
         ll2.labelPosition = .rightBottom
         ll2.valueFont = .systemFont(ofSize: 10)
-        
+
         let leftAxis = chartView.leftAxis
         leftAxis.removeAllLimitLines()
         leftAxis.addLimitLine(ll1)
@@ -75,9 +76,9 @@ class LineChart1ViewController: DemoBaseViewController {
         leftAxis.axisMinimum = -50
         leftAxis.gridLineDashLengths = [5, 5]
         leftAxis.drawLimitLinesBehindDataEnabled = true
-        
+
         chartView.rightAxis.enabled = false
-        
+
         //[_chartView.viewPortHandler setMaximumScaleY: 2.f];
         //[_chartView.viewPortHandler setMaximumScaleX: 2.f];
 
@@ -88,13 +89,13 @@ class LineChart1ViewController: DemoBaseViewController {
         marker.chartView = chartView
         marker.minimumSize = CGSize(width: 80, height: 40)
         chartView.marker = marker
-        
+
         chartView.legend.form = .line
-        
+
         sliderX.value = 45
         sliderY.value = 100
         slidersValueChanged(nil)
-        
+
         chartView.animate(xAxisDuration: 2.5)
     }
 
@@ -103,7 +104,7 @@ class LineChart1ViewController: DemoBaseViewController {
             chartView.data = nil
             return
         }
-        
+
         self.setDataCount(Int(sliderX.value), range: UInt32(sliderY.value))
     }
 
@@ -112,35 +113,54 @@ class LineChart1ViewController: DemoBaseViewController {
             let val = Double(arc4random_uniform(range) + 3)
             return ChartDataEntry(x: Double(i), y: val, icon: #imageLiteral(resourceName: "icon"))
         }
-        
+
         let set1 = LineChartDataSet(values: values, label: "DataSet 1")
         set1.drawIconsEnabled = false
-
-        set1.lineDashLengths = [5, 2.5]
-        set1.highlightLineDashLengths = [5, 2.5]
-        set1.setColor(.black)
-        set1.setCircleColor(.black)
-        set1.lineWidth = 1
-        set1.circleRadius = 3
-        set1.drawCircleHoleEnabled = false
-        set1.valueFont = .systemFont(ofSize: 9)
-        set1.formLineDashLengths = [5, 2.5]
-        set1.formLineWidth = 1
-        set1.formSize = 15
-
+        setup(set1)
+
         let gradientColors = [ChartColorTemplates.colorFromString("#00ff0000").cgColor,
                               ChartColorTemplates.colorFromString("#ffff0000").cgColor]
         let gradient = CGGradient(colorsSpace: nil, colors: gradientColors as CFArray, locations: nil)!
-        
+
         set1.fillAlpha = 1
         set1.fill = Fill(linearGradient: gradient, angle: 90) //.linearGradient(gradient, angle: 90)
         set1.drawFilledEnabled = true
-        
+
         let data = LineChartData(dataSet: set1)
-        
+
         chartView.data = data
     }
-
+
+    private func setup(_ dataSet: LineChartDataSet) {
+        if dataSet.isDrawLineWithGradientEnabled {
+            dataSet.lineDashLengths = nil
+            dataSet.highlightLineDashLengths = nil
+            dataSet.setColors(.black, .red, .white)
+            dataSet.setCircleColor(.black)
+            dataSet.gradientPositions = [0, 40, 100]
+            dataSet.lineWidth = 1
+            dataSet.circleRadius = 3
+            dataSet.drawCircleHoleEnabled = false
+            dataSet.valueFont = .systemFont(ofSize: 9)
+            dataSet.formLineDashLengths = nil
+            dataSet.formLineWidth = 1
+            dataSet.formSize = 15
+        } else {
+            dataSet.lineDashLengths = [5, 2.5]
+            dataSet.highlightLineDashLengths = [5, 2.5]
+            dataSet.setColor(.black)
+            dataSet.setCircleColor(.black)
+            dataSet.gradientPositions = nil
+            dataSet.lineWidth = 1
+            dataSet.circleRadius = 3
+            dataSet.drawCircleHoleEnabled = false
+            dataSet.valueFont = .systemFont(ofSize: 9)
+            dataSet.formLineDashLengths = [5, 2.5]
+            dataSet.formLineWidth = 1
+            dataSet.formSize = 15
+        }
+    }
+
     override func optionTapped(_ option: Option) {
         guard let data = chartView.data else { return }
 
@@ -150,31 +170,36 @@ class LineChart1ViewController: DemoBaseViewController {
                 set.drawFilledEnabled = !set.drawFilledEnabled
             }
             chartView.setNeedsDisplay()
-            
+
         case .toggleCircles:
             for case let set as LineChartDataSet in data {
                 set.drawCirclesEnabled = !set.drawCirclesEnabled
             }
             chartView.setNeedsDisplay()
-            
+
         case .toggleCubic:
             for case let set as LineChartDataSet in data {
                 set.mode = (set.mode == .cubicBezier) ? .linear : .cubicBezier
             }
             chartView.setNeedsDisplay()
-            
+
         case .toggleStepped:
             for case let set as LineChartDataSet in data {
                 set.mode = (set.mode == .stepped) ? .linear : .stepped
             }
             chartView.setNeedsDisplay()
-            
+
         case .toggleHorizontalCubic:
             for case let set as LineChartDataSet in data {
                 set.mode = (set.mode == .cubicBezier) ? .horizontalBezier : .cubicBezier
             }
             chartView.setNeedsDisplay()
-
+        case .toggleGradientLine:
+            for set in chartView.data!.dataSets as! [LineChartDataSet] {
+                set.isDrawLineWithGradientEnabled = !set.isDrawLineWithGradientEnabled
+                setup(set)
+            }
+            chartView.setNeedsDisplay()
         default:
             super.handleOption(option, forChartView: chartView)
         }
@@ -183,7 +208,7 @@ class LineChart1ViewController: DemoBaseViewController {
     @IBAction func slidersValueChanged(_ sender: Any?) {
         sliderTextX.text = "\(Int(sliderX.value))"
         sliderTextY.text = "\(Int(sliderY.value))"
-        
+
         self.updateChartData()
     }
 }

Source/Charts/Data/Implementations/Standard/LineChartDataSet.swift

@@ -71,7 +71,11 @@ open class LineChartDataSet: LineRadarChartDataSet, LineChartDataSetProtocol
             }
         }
     }
-
+
+    open var isDrawLineWithGradientEnabled = false
+
+    open var gradientPositions: [CGFloat]?
+
     /// The radius of the drawn circles.
     open var circleRadius = CGFloat(8.0)
 

Source/Charts/Data/Interfaces/LineChartDataSetProtocol.swift

@@ -29,7 +29,13 @@ public protocol LineChartDataSetProtocol: LineRadarChartDataSetProtocol
     ///
     /// **default**: 0.2
     var cubicIntensity: CGFloat { get set }
-
+
+    /// If true, gradient lines are drawn instead of solid
+    var isDrawLineWithGradientEnabled: Bool { get set }
+
+    /// The points where gradient should change color
+    var gradientPositions: [CGFloat]? { get set }
+
     /// The radius of the drawn circles.
     var circleRadius: CGFloat { get set }