ioschartsbar-chartlinechartios-charts
ios-charts combined chart: bars going past right axis of chart
I'm trying to make something similar to this
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
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"
}
Solution
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"
}
}
