No more than 4 datas into a graph

[JFRangelSerrano]

Hello,

I am currently using the free version of Sneat Bootstrap 5 Admin, and will most likely purchase the pro version.

But before I do that, I wanted to make sure that a limitation I'm currently experiencing is actually due to it, because I'm using the free version and when I get the pro version, I won't suffer from it anymore.

Currently all charts are limited to displaying a maximum of 4 values. The professional version will allow me to present more than 4 values ​​in the graphs, right?

Somebody can corfirm it to me?

Thanks in advance.

[github-actions[bot]]

Thanks for creating an issue ☺️ It seems our raise support form was skipped while creating this issue. Please consider raising support via our support form only which will create issues using essential information we need to resolve your query quickly. This will help in growing an excellent community where,

• Other people can get it resolved if they have the same query
• We can easily understand your query
• Community at a later stage can also provide you solutions/suggestions Closing this issue. Regards.

[JFRangelSerrano]

Hi Ajay

I have not yet been able to solve this doubt.

The channels for it are quite cumbersome.

I beg you, if you finally manage to resolve it, communicate the resolution through this channel, or to my email: jfrangelserrano(at).hotmail.com.

Thank you so much.

[monab]

Hi @JFRangelSerrano,

Sorry for keeping you waiting for a long... 🙏🏻

Can you please share the charts images that you are talking about? As we are not proving the charts page in the Free version.

Awaiting to hear from you :)

Stay Safe!!

[JFRangelSerrano]

Hi monab,

Glad I finally got an answer.

Thanks a lot.

I just tried again and I have to correct my initial request because, at least now (maybe I was wrong before), it is not all type of charts that suffer from this problem but only one, which is the one that I indicate below:

If you inject into this chart more than 4 data series, the chart is not rendered.

It's critical to me that this chart can accept an "unlimited" number of data series (actually, I won't need more than 12, but I put it that way so you understand me) and I need to make sure that if I end up buying the product, this limitation is resolved.

I take this opportunity to ask you about a possible channel of communication with you that is more fluid. Once we have purchased the product, we cannot leave our clients unattended for so long in the event of a similar incident.

Thanks in advance.

I await your reply.

All the best.

[poojadosad]

Hi @JFRangelSerrano,

We tried to add more data series to the chart and it works perfectly fine. You just need to add config labels, colors and series .

We are sharing the link to the library we are using for our charts here: https://apexcharts.com/docs/chart-types/pie-donut/

Also, We will actively reply to your queries here :)

Let us know if you have any other queries.

[JFRangelSerrano]

Hello,

First of all, thanks for your quick response.

Ok, I'll try it again and see if I'm doing something wrong.

I just want to tell you that I don't know if I'll be able to do the test before the weekend, so it's possible that I won't be able to inform you of the result until next week.

I beg you please be attentive to this chat to receive my answer.

Thank you very much for your help. It is a pleasure to feel that there is someone supporting me.

All the best.

[poojadosad]

Hi @JFRangelSerrano,

We are actively replying to the issues.

If you face any issues, feel free to get in touch :)

Awaiting to hear from you!!

[JFRangelSerrano]

Hello again,

Sorry for the delay in responding, but I have not been able to perform the tests until today.

I've checked everything and I'm still getting the same problem.

Here is my code so that you can compare it with the following options:

OK (LabelsData & SeriesData Length <=4):

LabelsData = ["20 - 29", "40 - 49", "50 - 59", "Desconocida"]
SeriesData = [4, 8, 8, 81]
AgeAndGendersColors = ["#696cff", "#03c3ec", "#71dd37", "#8592a3", "#566a7f", "#a1acb8", "#eceef1"]

ERROR (LabelsData & SeriesData Length >4):

LabelsData = ["20 - 29", "40 - 49", "50 - 59", "60 - 69", "Desconocida"]
SeriesData = [4, 8, 4, 4, 81]
AgeAndGendersColors = ["#696cff", "#03c3ec", "#71dd37", "#8592a3", "#566a7f", "#a1acb8", "#eceef1"]

MY CODE:

function DonutStatisticsChartRender(donutStatisticsChartElementParentId, donutStatisticsChartElementId, labelsData, seriesData, ClasifiedEntitiesPercent, ClasifiedEntitiesLabel) { let cardColor, headingColor, axisColor, shadeColor, borderColor;

cardColor = config.colors.white;
headingColor = config.colors.headingColor;
axisColor = config.colors.axisColor;
borderColor = config.colors.borderColor;

document.getElementById(donutStatisticsChartElementParentId).removeChild(document.getElementById(donutStatisticsChartElementId))
const donutStatisticsChartElement = document.createElement("div");
donutStatisticsChartElement.id = donutStatisticsChartElementId;
document.getElementById(donutStatisticsChartElementParentId).appendChild(donutStatisticsChartElement);

// Dounts Statistics Chart
// --------------------------------------------------------------------
const donutStatisticsChartConfig = {
        chart: {
            height: 165,
            width: 130,
            type: 'donut'
        },
        labels: labelsData,
        series: seriesData,
    colors: AgeAndGenderColors,
        stroke: {
            width: 5,
            colors: cardColor
        },
        dataLabels: {
            enabled: false,
            formatter: function (val, opt) {
                return parseInt(val) + '%';
            }
        },
        legend: {
            show: false
        },
        grid: {
            padding: {
                top: 0,
                bottom: 0,
                right: 15
            }
        },
        plotOptions: {
            pie: {
                donut: {
                    size: '75%',
                    labels: {
                        show: true,
                        value: {
                            fontSize: '1.5rem',
                            fontFamily: 'Public Sans',
                            color: headingColor,
                            offsetY: -15,
                            formatter: function (val) {
                                return parseInt(val) + '%';
                            }
                        },
                        name: {
                            offsetY: 20,
                            fontFamily: 'Public Sans'
                        },
                        total: {
                            show: true,
                            fontSize: '0.8125rem',
                            color: axisColor,
                            label: ClasifiedEntitiesLabel,
                            formatter: function (w) {
                                return ClasifiedEntitiesPercent.toString()+'%';
                            }
                        }
                    }
                }
            }
        }
    };
if (typeof donutStatisticsChartElement !== undefined && donutStatisticsChartElement !== null) {
    const statisticsChart = new ApexCharts(donutStatisticsChartElement, donutStatisticsChartConfig);
    statisticsChart.render();
}

}

[poojadosad]

Hi @JFRangelSerrano,

We have tested the data you have provided and it is working fine with both the cases.

The problem is with the other config code like you have defined variables like LabelsData, SeriesData & AgeAndGendersColors,

In config, you are using them like labelsData, seriesData & AgeAndGenderColors.

The first two variables start with capital letters and 3rd variable's spelling is not correct.

You can refactor your code carefully it will work fine, also you can use our code configs and then customize them carefully.

Also, check the console for errors, it will be helpful to counter the errors easily.

Let us know if you have any further queries :)

[JFRangelSerrano]

Ok, sorry.

It was a translation error. Really, in code, these vars are named labelsData, seriesData and AgeAndGenderColors. Even if I use debugger into DonutStatisticsChartRender function, I watch correct values por these vars.

But, more simple. Into this function:

This code works fine:

[...]

const donutStatisticsChartConfig = { chart: { height: 165, width: 130, type: 'donut' }, labels: ['Electronic', 'Sports', 'Decor', 'Fashion'], series: [85, 15, 50, 50], colors: [config.colors.primary, config.colors.secondary, config.colors.info, config.colors.success], stroke: { width: 5, colors: cardColor

[...]

And this code fails:

[...]

const donutStatisticsChartConfig = { chart: { height: 165, width: 130, type: 'donut' }, labels: ['Electronic', 'Sports', 'Decor', 'Fashion', 'Desconocida'], series: [85, 15, 50, 50, 75], colors: [config.colors.primary, config.colors.secondary, config.colors.info, config.colors.success, config.colors.secondary], stroke: { width: 5, colors: cardColor

[...]

[bubsy24]

Hello I am having a similar problem. I can only have 4 rows displayed in a table when querying from mysql. I am using the first table from "tables-basic.html". Could you please explain it as if you were teaching a 5 year old as I am not very good at coding. Thank you very much.

[poojadosad]

Hi JFRangelSerrano,

We have tested your data and it is working without any errors.

The chart is working fine in the package and you need to customize it according to your needs. If it is working in the downloaded code, you can use the same.

And customization and integration are not part of the support.

Regards

[poojadosad]

Hi bubsy24,

Thanks for getting in touch with us :)

Teaching is not part of the support.

Regards

[JFRangelSerrano]

Ok, @poojadosad ,

I'll try it again.

Thanks

[JFRangelSerrano]

Hi again,

First of all, thanks for your help and I apologize for my delay in responding and my insistence.

I have been able to verify that the error is easy to reproduce without any external intervention. I beg you to try the following steps:

1.- Press "Download free" button from https://themeselection.com/item/sneat-free-bootstrap-html-admin-template/ for download sneat-bootstrap-html-admin-template-v1.0.1.zip file and unzip it. 2.- Double click on .\sneat-bootstrap-html-admin-template\index.html file for load it on web browser 3.- In web browser, click on "Vertical Menu Template" link 4.- It's all ok 5.- Edit .\sneat-bootstrap-html-admin-template\assets\js\dashboards-analytics.js and chage lines 430,431 and 432 for: labels: ['Electronic', 'Sports', 'Decor', 'Fashion', 'Unknow'], series: [85, 15, 50, 50, 20], colors: [config.colors.primary, config.colors.secondary, config.colors.info, config.colors.success, config.colors.secondary], 6.- Refresh web browser 7.- It fails. Chart is not rendered.

[JFRangelSerrano]

Hi again!

Could you check this?

Thanks in advance!!

[poojadosad]

Hi @JFRangelSerrano,

Thank you for being patient.

Please replace, your old stroke config code with the following code

 stroke: {
        width: 5,
        colors: [cardColor],
      }

This change will solve your query, also we will solve this issue in our future release.

Let me know if you have any further queries

[JFRangelSerrano]

Hi,

Thanks for you reply.

I'll try it and notice you about results.

Thanks in advance.

[JFRangelSerrano]

Hi again!!

Finally, it works fine!! :-)

Thank you very much for all!!!

[poojadosad]

Hi @JFRangelSerrano,

As your issue has been resolved, you can close this issue. If you have any further questions or concerns, please don't hesitate to reach out : )

Regards.