Derek Hannah
Derek Hannah

Reputation: 547

ios-charts combined chart: bars going past right axis of chart

I'm trying to make something similar to this

jom8o

Im going to have 4 BarChartDataSets grouped, and 2 LineChartDataSets, each data set has 7 data points, the user can add or remove these datasets at will

The bars seem to be grouping fine, and the line chart shows all 7 points

but as I add more BarChartDataSets to the chart, the bars go off the right side of the chart, the line chart stays the same, here is an image sequence of me starting with a single LineChartDataSet, then adding BarChartDataSets one by one, some of the bars have a value of 0, so its hard to see the group, look for the 0 label at the bottom

enter image description hereenter image description hereenter image description hereenter image description hereenter image description here

How can i stop the bars from going off the right of the chart?

Here is the code:

//get data and values from DataMOs in the activeFeeds
            var lineChartDataSets = [LineChartDataSet]()
            var barChartDataSets = [BarChartDataSet]()
            for (key, dayValuesArray) in valuesByFeed {
                var barChartDataEntries = [BarChartDataEntry]()
                var lineChartDataEntries = [ChartDataEntry]()
                var lineChartDataSet: LineChartDataSet!
                var barChartDataSet: BarChartDataSet!
                var dataEntry: ChartDataEntry

                for (index, value) in (dayValuesArray?.enumerated())! {
                    //create line chart for Demand and Prod feeds
                    //create bar chart for every other feed
                    if key == "Demand" || key == "Prod"{
                        dataEntry = ChartDataEntry(x: Double(self.activeFeeds.count * index), y: Double(value)!)
                        lineChartDataEntries.append(dataEntry)
                    } else {
                        dataEntry = BarChartDataEntry(x: Double(self.activeFeeds.count * index), y: Double(value)!)
                        barChartDataEntries.append(dataEntry as! BarChartDataEntry)
                    }
                }

                //create line chart data set for Demand and Prod feeds
                //create bar chart data set for every other feed
                if key == "Demand" || key == "Prod"{
                    lineChartDataSet = LineChartDataSet(values: lineChartDataEntries, label: key)
                    lineChartDataSet.drawCirclesEnabled = false
                } else {
                    barChartDataSet = BarChartDataSet(values: barChartDataEntries, label: key)
                }

                switch key {
                case "Solar":
                    barChartDataSet.setColors(UIColor.orange.withAlphaComponent(1.0))
                    barChartDataSet.valueTextColor = UIColor.white
                    break
                case "Wind":
                    barChartDataSet.setColors(UIColor.blue.withAlphaComponent(1.0))
                    barChartDataSet.valueTextColor = UIColor.white
                    break
                case "Battery":
                    barChartDataSet.setColors(UIColor.green.withAlphaComponent(1.0))
                    barChartDataSet.valueTextColor = UIColor.white
                    break
                case "Gen":
                    barChartDataSet.setColors(UIColor.red.withAlphaComponent(1.0))
                    barChartDataSet.valueTextColor = UIColor.white
                    break
                case "Demand":
                    lineChartDataSet.setColors(UIColor.purple.withAlphaComponent(1.0))
                    lineChartDataSet.valueTextColor = UIColor.white
                    lineChartDataSet.drawFilledEnabled = true
                    lineChartDataSet.fillColor = UIColor.purple.withAlphaComponent(0.8)
                    break
                case "Prod":
                    lineChartDataSet.setColors(UIColor.magenta.withAlphaComponent(1.0))
                    lineChartDataSet.valueTextColor = UIColor.white
                    lineChartDataSet.drawFilledEnabled = true
                    lineChartDataSet.fillColor = UIColor.magenta.withAlphaComponent(0.8)
                    break
                default:
                    break
                }

                //append to correct data set array
                if key == "Demand" || key == "Prod"{
                    lineChartDataSets.append(lineChartDataSet)
                } else {
                    barChartDataSets.append(barChartDataSet)
                }
            }

            //set chart data
            let chartData = CombinedChartData()
            chartData.barData = BarChartData(dataSets: barChartDataSets)
            chartData.lineData = LineChartData(dataSets: lineChartDataSets)
            let activeFeedsCount = self.activeFeeds.count
            if activeFeedsCount > 0 {
                self.combinedChartView.data = chartData
                if chartData.barData.dataSetCount > 1 {
                    self.combinedChartView.barData?.groupBars(fromX: 0, groupSpace: 1.0, barSpace: 0.5)
                    self.combinedChartView.notifyDataSetChanged()
                }
            } else {
                self.combinedChartView.data = CombinedChartData()
                self.combinedChartView.noDataText = "No Feeds To Show"
            }

Upvotes: 2

Views: 1704

Answers (1)

DevB2F
DevB2F

Reputation: 5085

I was not able to reproduce the problem with the 0 label, but it is possible to use combinedChart.xAxis.axisMaximum to make sure you can see all the bars to the right.

 let activeFeeds = 6
 func dataSet() {

    combinedChart.isUserInteractionEnabled = true
    combinedChart.scaleXEnabled = false
    combinedChart.scaleYEnabled = false

    combinedChart.dragEnabled = true
    //combinedChart.xAxis.axisMinimum = 0.0
    combinedChart.xAxis.axisMaximum = 100.0

    //get data and values from DataMOs in the activeFeeds
    var lineChartDataSets = [LineChartDataSet]()
    var barChartDataSets = [BarChartDataSet]()
    combinedChart.setVisibleXRange(minXRange: 0.0, maxXRange: 26.0)

    let arr1 = [17000,16500,16800,16700,17900,17100,18000]
    let arr2 = [17000,17500,16900,16800,17200,17105,17000]

    let valuesByFeed = ["Solar":arr1, "Wind": arr2, "Battery": arr1, "Gen":arr1, "Demand":arr1, "Prod":arr1]

    for (key, dayValuesArray) in valuesByFeed {
        var barChartDataEntries = [BarChartDataEntry]()
        var lineChartDataEntries = [ChartDataEntry]()
        var lineChartDataSet: LineChartDataSet!
        var barChartDataSet: BarChartDataSet!
        var dataEntry: ChartDataEntry

        for (index, value) in (dayValuesArray.enumerated()) {
            //create line chart for Demand and Prod feeds
            //create bar chart for every other feed
            if key == "Demand" || key == "Prod"{
                dataEntry = ChartDataEntry(x: Double(self.activeFeeds * index), y: Double(value))
                lineChartDataEntries.append(dataEntry)
            } else {
                dataEntry = BarChartDataEntry(x: Double(self.activeFeeds * index), y: Double(value))
                barChartDataEntries.append(dataEntry as! BarChartDataEntry)
            }
        }


        //create line chart data set for Demand and Prod feeds
        //create bar chart data set for every other feed
        if key == "Demand" || key == "Prod"{
            lineChartDataSet = LineChartDataSet(values: lineChartDataEntries, label: key)
            lineChartDataSet.drawCirclesEnabled = false
        } else {
            barChartDataSet = BarChartDataSet(values: barChartDataEntries, label: key)
        }

        switch key {
        case "Solar":
            print("case solar")
            barChartDataSet.setColors(UIColor.orange.withAlphaComponent(1.0))
            barChartDataSet.valueTextColor = UIColor.white
            break
        case "Wind":
            print("case wind")
            barChartDataSet.setColors(UIColor.blue.withAlphaComponent(1.0))
            barChartDataSet.valueTextColor = UIColor.white
            break
        case "Battery":
            print("case battery")
            barChartDataSet.setColors(UIColor.green.withAlphaComponent(1.0))
            barChartDataSet.valueTextColor = UIColor.white
            break
        case "Gen":
            print("case gen")

            barChartDataSet.setColors(UIColor.red.withAlphaComponent(1.0))
            barChartDataSet.valueTextColor = UIColor.white
            break
        case "Gen2":
            print("case gen")

            barChartDataSet.setColors(UIColor.red.withAlphaComponent(1.0))
            barChartDataSet.valueTextColor = UIColor.white
            break
        case "Gen3":
            print("case gen")

            barChartDataSet.setColors(UIColor.red.withAlphaComponent(1.0))
            barChartDataSet.valueTextColor = UIColor.white
            break
        case "Gen4":
            print("case gen")

            barChartDataSet.setColors(UIColor.red.withAlphaComponent(1.0))
            barChartDataSet.valueTextColor = UIColor.white
            break


        case "Demand":
            print("case demand")

            lineChartDataSet.setColors(UIColor.purple.withAlphaComponent(1.0))
            lineChartDataSet.valueTextColor = UIColor.white
            lineChartDataSet.drawFilledEnabled = true
            lineChartDataSet.fillColor = UIColor.purple.withAlphaComponent(0.8)
            break
        case "Prod":
            print("case prod")

            lineChartDataSet.setColors(UIColor.magenta.withAlphaComponent(1.0))
            lineChartDataSet.valueTextColor = UIColor.white
            lineChartDataSet.drawFilledEnabled = true
            lineChartDataSet.fillColor = UIColor.magenta.withAlphaComponent(0.8)
            break
        default:
            break
        }

        //append to correct data set array
        if key == "Demand" || key == "Prod"{
            lineChartDataSets.append(lineChartDataSet)
        } else {
            barChartDataSets.append(barChartDataSet)
        }
    }

    //set chart data
    let chartData = CombinedChartData()
    print("bar count: \(barChartDataSets.count)")
    print("line count: \(lineChartDataSets.count)")
    chartData.barData = BarChartData(dataSets: barChartDataSets)
    chartData.lineData = LineChartData(dataSets: lineChartDataSets)
    let activeFeedsCount = self.activeFeeds
    if activeFeedsCount > 0 {
        self.combinedChart.data = chartData
        if chartData.barData.dataSetCount > 1 {
            self.combinedChart.barData?.groupBars(fromX: 0, groupSpace: 1.0, barSpace: 0.5)
            self.combinedChart.notifyDataSetChanged()
        }
    } else {
        self.combinedChart.data = CombinedChartData()
        self.combinedChart.noDataText = "No Feeds To Show"
    }


}

enter image description here

Upvotes: 1

Related Questions