diogobernardino / williamchart

Android Library to rapidly develop attractive and insightful charts in android applications.
5.1k stars 800 forks source link

Customize bar chart #292

Closed shadmanadman closed 3 years ago

shadmanadman commented 3 years ago

Hi everyone.I know this isn't an issue but I didn't know what to do. I am trying to customize the BarChart and I really need some help. I'm trying to show tooltip when chart is created. This is when I click on the bar and tooltip is showing perfectly. Screenshot from 2021-02-01 22-35-03

But when I'm trying to show tooltip on BarChartView.kt I can't get the y of a bar. Screenshot from 2021-02-01 22-39-35

This is may code in drawBars function from BarChartView.kt:

` override fun drawBars(frames: List<Frame>) {
        frames.forEachIndexed { index, frame ->
            when(index){
                currentAverage->{
                    painter.prepare(color = barsColorCurrentAverage, style = Paint.Style.FILL)
                }
                average->{
                    painter.prepare(color = barsColorAverage, style = Paint.Style.FILL)
                }
                previousAverage->{
                    painter.prepare(color = barsColorPreviousAverage, style = Paint.Style.FILL)
                }
                else-> painter.prepare(color = barsColor, style = Paint.Style.FILL)

            }
            canvas.drawRoundRect(
                frame.toRectF(),
                barRadius,
                barRadius,
                painter.paint
            )
        }

        // Show tooltip 
        if (!isTooltipDraw) {
           //************************ This line*******************************
            tooltip.onDataPointClick(frames[25].left, frames[25].bottom)
            isTooltipDraw=true
        }
        // Draw bottom line
        painter.prepare(color = barsColorCurrentAverage,style = Paint.Style.FILL)
        canvas.drawLine(
            frames.last().toRectF().right,frames.last().toRectF().bottom,
            frames.first().toRectF().right,frames.first().toRectF().bottom,painter.paint
        )
    }`
shadmanadman commented 3 years ago

Thanks guys but I figure it out my self. I don't know if its a good way to measure y . I share it here in case if its anyone problem. In the DataPoint class I add another val called y.Then in BarChartRenderer.kt I equals my y value to secreenPositionY . This is PlaceDataPoints function in BarChartRenderer.kt:

private fun placeDataPoints(innerFrame: Frame) {

        val scaleSize = chartConfiguration.scale.size
        val chartHeight = innerFrame.bottom - innerFrame.top
        val halfBarWidth = (innerFrame.right - innerFrame.left) / xLabels.size / 2
        val labelsLeftPosition = innerFrame.left + halfBarWidth
        val labelsRightPosition = innerFrame.right - halfBarWidth
        val widthBetweenLabels = (labelsRightPosition - labelsLeftPosition) / (xLabels.size - 1)

        data.forEachIndexed { index, dataPoint ->
            dataPoint.screenPositionX = labelsLeftPosition + (widthBetweenLabels * index)
            dataPoint.screenPositionY =
                innerFrame.bottom -
                    // bar length must be positive, or zero
                    (chartHeight * max(
                        0f,
                        dataPoint.value - chartConfiguration.scale.min
                    ) / scaleSize)
         //This line******************
            dataPoint.y=dataPoint.screenPositionY
        }
    }

Then in drwBars function from BarChartView.kt:

tooltip.onDataPointClick(frames[25].left, frames[25].y)