Hello! We’re experiencing some issues with our graphs/charts disappearing. The charts are visible when viewed on edge or firefox but on chrome or safari, the charts data is blank. Only the encompassing box, title, and sometimes the legends are shown.
What we’ve done to try and resolve the problem:
-Chrome has been updated to the latest version
-Graphina on our site is updated to the most recent version
-Turning the plugin off and on
-Caches have been cleared
-Upon inspection, we found that the following line was missing from the existing plugin: pdfmake.min.js.map now (?):graphina_datatable_pdf.js
Any help would be greatly appreciated!
]]>Hi, wondering why my columns are not all the same width. Also wondering if there is a way to edit the amount of space in-between the two sets of columns.
Hi. I upgraded to Graphina Pro to take advantage of the dynamic charts options. Have been displaying quarterly data and want to move to daily data. Using a csv file of about 2500 daily data points, the chart takes about 90 seconds to load on the published page. It’s even slower when trying to edit in Elementor. Can you suggest ways to improve performance? Is it quicker to pull from an SQL database or Google sheet. Other settings or techniques? Appreciate any assistance.
]]>Hi,
Unfortunally the number formatting on my column charts is not working, once I choose to show the labels pre/postfix aswell. When I hide the lable pre/postfix, the number formatting, for example with the locale (de-DE) is working propperly. Once I choose to show lable pre/postfix aswell, the decimal number separation disappears. This is only on column charts. As you see on my website, on line charts it is all good.
I hope anyone can help me out. Cheers!
]]>Hello !
My website is running wordpress 6.6.2 with graphina 2.0.3?and graphina pro?2.1.2 with elementor 3.25.4.
Since this update, my dynamic charts ( with mysql query ) appear for a second (just during loading time) and disappear.
Do you have a solution please?
THANKS
]]>Dear support,
I hope this this request has already resolved but I gotta ask.
I am creating some metrics and stuff using HTML CSS and JS and I want to depict them with graphina charts. Is there a way to pass my JS variables to the charts?
I will paste bellow what I did with pure code and google.charts that I want to use graphina instead of them.
]]><style>
/* Styling the form container */
#crypto-metrics-form {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
background-color: #1a1a1a;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}
/* Styling the form labels and input fields side by side */
.form-group {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.form-group label {
font-size: 16px;
color: #ffffff;
flex: 1;
}
.form-group input[type="number"] {
width: 150px;
padding: 8px;
border: 1px solid #444;
border-radius: 8px;
font-size: 14px;
background-color: #333;
color: #ffffff;
}
/* Styling the submit button */
#crypto-metrics-form button {
background-color: #e67e22;
color: white;
border: none;
padding: 12px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
width: 100%;
margin-top: 10px;
}
/* Button hover effect */
#crypto-metrics-form button:hover {
background-color: #d35400;
}
/* Styling the container for the result */
#results {
margin-top: 20px;
font-size: 18px;
color: #ffffff;
}
/* Styling for tier inputs in a compact way */
.tier-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 15px;
color: #ffffff;
}
.tier-container input {
width: 100px;
padding: 8px;
border: 1px solid #444;
border-radius: 8px;
font-size: 14px;
background-color: #333;
color: #ffffff;
}
/* Styling for the gauge chart container */
#gauge_chart_div {
width: 400px;
height: 200px;
margin-top: 20px;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
padding: 20px;
}
#gauge_chart_title {
text-align: center;
color: #ffffff;
font-size: 18px;
margin-bottom: 10px;
}
</style>
<form id="crypto-metrics-form">
<div class="form-group">
<label for="n">Συντελεστη? (n):</label>
<input type="number" id="n" name="n" value="2" required>
</div>
<div class="form-group">
<label for="pb">Αποδοση ΒΤC (PB):</label>
<input type="number" id="pb" name="pb" value="5" required>
</div>
<div class="form-group">
<label for="tc">Συνολικ? Κεφ?λαιο Αποταμιε?σεων (Total Capital - TC):</label>
<input type="number" id="tc" name="tc" required>
</div>
<div class="form-group">
<label for="ams">Μ?σο? ?ρο? Μηνια?α? Αποταμ?ευση? (Average Monthly Savings - AMS):</label>
<input type="number" id="ams" name="ams" required>
</div>
<div class="form-group">
<label for="cic">Τρ?χον Επενδυτικ? Κεφ?λαιο (Current Investment Capital - CIC):</label>
<input type="number" id="cic" name="cic" required>
</div>
<div class="form-group">
<label for="acc">Συνολικ? Κεφ?λαιο σε Κρυπτονομ?σματα (Allocated Crypto Capital - ACC):</label>
<input type="number" id="acc" name="acc" required>
</div>
<label style="color: #ffffff;">Κατανομ? Κεφαλα?ου αν? Tier (Tier Allocated Capital - TAC):</label>
<div class="tier-container">
<input type="number" id="tac1" name="tac1" placeholder="Tier 1" required>
<input type="number" id="tac2" name="tac2" placeholder="Tier 2" required>
<input type="number" id="tac3" name="tac3" placeholder="Tier 3" required>
<input type="number" id="tac4" name="tac4" placeholder="Tier 4" required>
</div>
<div class="form-group">
<label for="icc">?δη Επενδεδυμ?νο Κεφ?λαιο σε Κρυπτονομ?σματα (Invested Crypto Capital - ICC):</label>
<input type="number" id="icc" name="icc" required>
</div>
<div class="form-group">
<label for="acic">Διαθ?σιμο Κεφ?λαιο προ? Επ?νδυση (Available CIC - ACIC):</label>
<input type="number" id="acic" name="acic" required>
</div>
<div class="form-group">
<label for="ps">Συνολικ?? Αριθμ?? Επιλεγμ?νων Crypto Project (Project Selected - PS):</label>
<input type="number" id="ps" name="ps" required>
</div>
<div class="form-group">
<label for="tp">Συνολικη αποδοση χαρτοφυλακιου (Total Profit - TP):</label>
<input type="number" id="tp" name="tp" required>
</div>
<div class="form-group">
<label for="ai">Ετησιο συνολικο εισοδημα (Annual Income - AI):</label>
<input type="number" id="ai" name="ai" required>
</div>
<button type="submit">Υποβολ?</button>
</form>
<div id="results"></div>
<div id="gauge_chart_div">
<div id="gauge_chart_title">Δε?κτη? Διασπορ?? αν? Προτζεκτ</div>
<div id="gauge_chart_inner"></div>
</div>
<script>
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawGaugeChart);
function drawGaugeChart(value = 0, ticks = [0], colors = {}) {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['PS', value]
]);
var options = {
width: 400,
height: 200,
max: ticks[ticks.length - 1],
min: ticks[0],
majorTicks: ticks,
minorTicks: Math.max(1, Math.floor((ticks[ticks.length - 1] - ticks[0]) / ((ticks.length - 1) * 2))),
redFrom: colors.redFrom || 0,
redTo: colors.redTo || 0,
yellowFrom: colors.orangeFrom || 0,
yellowTo: colors.orangeTo || 0,
greenFrom: colors.greenFrom || 0,
greenTo: colors.greenTo || 0,
blueFrom: colors.blueFrom || 0,
blueTo: colors.blueTo || 0,
purpleFrom: colors.purpleFrom || 0,
purpleTo: colors.purpleTo || 0,
backgroundColor: 'transparent',
chartArea: {
backgroundColor: {
fill: 'transparent'
}
},
fontName: 'Arial',
fontColor: '#ffffff',
gauge: {
borderColor: '#ffffff'
}
};
var chart = new google.visualization.Gauge(document.getElementById('gauge_chart_inner'));
chart.draw(data, options);
}
document.getElementById('crypto-metrics-form').addEventListener('submit', function(event) {
event.preventDefault();
// Get input values
const cic = parseInt(document.getElementById('cic').value);
const ps = parseInt(document.getElementById('ps').value);
let colorCategory = '';
let ticks = [];
let colors = {};
// Determine the color, ticks, and ranges based on conditions
if (cic < 1000) {
ticks = [0, 1, 2, 3, 4, 5, 6, 7]; // 9 ticks
colors = { greenFrom: 0, greenTo: 3.5, orangeFrom: 3.5, orangeTo: 6.5, redFrom: 6.5, redTo: 7 };
if (ps <= 3) {
colorCategory = 'Green';
} else if (ps <= 6) {
colorCategory = 'Orange';
} else {
colorCategory = 'Red';
}
} else if (cic >= 1000 && cic < 5000) {
ticks = [0, 3, 6, 9, 12]; // 5 ticks
colors = { orangeFrom: 0, orangeTo: 3.5, greenFrom: 3.5, greenTo: 7.5, blueFrom: 7.5, blueTo: 12.5 };
if (ps <= 3) {
colorCategory = 'Orange';
} else if (ps <= 7) {
colorCategory = 'Green';
} else if (ps <= 12) {
colorCategory = 'Blue';
} else {
colorCategory = 'Purple';
}
} else if (cic >= 5000 && cic <= 10000) {
ticks = [0, 3, 6, 9, 12, 15]; // 6 ticks
colors = { redFrom: 0, redTo: 2.5, orangeFrom: 2.5, orangeTo: 5.5, greenFrom: 5.5, greenTo: 10.5, blueFrom: 10.5, blueTo: 15 };
if (ps <= 2) {
colorCategory = 'Red';
} else if (ps <= 5) {
colorCategory = 'Orange';
} else if (ps <= 10) {
colorCategory = 'Green';
} else {
colorCategory = 'Blue';
}
} else if (cic > 10000 && cic <= 20000) {
ticks = [0, 5, 10, 15, 20]; // 5 ticks
colors = { redFrom: 0, redTo: 5.5, orangeFrom: 5.5, orangeTo: 9.5, greenFrom: 9.5, greenTo: 15.5, blueFrom: 15.5, blueTo: 20 };
if (ps <= 5) {
colorCategory = 'Red';
} else if (ps <= 9) {
colorCategory = 'Orange';
} else if (ps <= 15) {
colorCategory = 'Green';
} else {
colorCategory = 'Blue';
}
} else if (cic > 20000 && cic <= 50000) {
ticks = [0, 5, 10, 15, 20, 25]; // 6 ticks
colors = { redFrom: 0, redTo: 8.5, orangeFrom: 8.5, orangeTo: 15.5, greenFrom: 15.5, greenTo: 20.5, blueFrom: 20.5, blueTo: 25 };
if (ps <= 8) {
colorCategory = 'Red';
} else if (ps <= 15) {
colorCategory = 'Orange';
} else if (ps <= 20) {
colorCategory = 'Green';
} else {
colorCategory = 'Blue';
}
} else if (cic > 50000) {
ticks = [0, 10, 20, 30, 40, 50, 60]; // 7 ticks
colors = { redFrom: 0, redTo: 10.5, orangeFrom: 10.5, orangeTo: 20.5, greenFrom: 20.5, greenTo: 40.5, blueFrom: 40.5, blueTo: 50.5, purpleFrom: 50.5, purpleTo: 60 };
if (ps <= 10) {
colorCategory = 'Red';
} else if (ps <= 20) {
colorCategory = 'Orange';
} else if (ps <= 40) {
colorCategory = 'Green';
} else if (ps <= 50) {
colorCategory = 'Blue';
} else {
colorCategory = 'Purple';
}
}
// Update the gauge chart with the calculated value, appropriate ticks, and colors
drawGaugeChart(ps, ticks, colors);
// Optionally update the UI
const resultElement = document.getElementById('results');
resultElement.innerHTML =Δε?κτη? Διασπορ?? αν? Προτζεκτ: <span style="color: ${colorCategory.toLowerCase()}">${colorCategory}</span>;
});
</script>
Hey there,
I am seeking guidance on how to customize the bars in my chart using CSS. Despite attempting various approaches, I have been unable to find specific classes that accommodate my desired changes. My goal is to modify the border radius of only two sides of the bars, rather than all four. If anyone has experience or suggestions on how to achieve this, I would greatly appreciate your assistance.
]]>HI
Thank you for your awesome plugin.
However, I have little issue with the plugin. I want?to remove the last colon (:) from the tooltip text. So please help me.
Thanks
]]>lite version is activated but when Pro version is activated, gives the following error and crashes the site,
Error: Undefined constant “Elementor\GRAPHINA_LITE_URL
It’s a multisite
]]>Hi, with the release of version 2.0 I noticed that special characters are not rendering properly on the frontend.
For example, when I enter Goods & Services as the category name in the “Column” chart type, it renders on the frontend as Goods & Services.
This change also precludes me from putting HTML tags such as <sup> in the category name.
Is this something that is going to be fixed in a future version or is this expected functionality?
Thanks
]]>The PHP error log shows “PHP Parse error: syntax error, unexpected ‘|’, expecting ‘{‘ in /wp-content/plugins/graphina-elementor-charts-and-graphs/utils/graphina_chart_helper.php on line 31
Version 2.0.0 is causing critical error.
]]>New update to 2.0.0 with WordPress version 6.6.1 caused critical error on site. Reverted for now.
]]>Getting tons of these PHP errors after installing Graphina Pro:
ERROR: [8192] Creation of dynamic property Elementor\Line_chart::$gradientColor is deprecated
Elementor without Graphina works fine. Tried disabling all other plugins. Elementor version is 3.22.3, Graphina version 1.8.10, Graphina Pro version 1.4.6, PHP version 8.3.6, WP version 6.5.5. All plugins are at latest versions.
According to my research, PHP 8.2 and greater deprecated the ability to create properties dynamically. See https://wiki.php.net/rfc/deprecate_dynamic_properties
]]>Can I use total labels on stacked bar chart like a sample page of Apexchars?
https://apexcharts.com/javascript-chart-demos/bar-charts/stacked/
]]>Hello
I’ve tried a few ways including using a dynamic data source (google sheets), but are there any ways to have hyperlinks or clickable links in the content?
]]>If I don’t reload the page, the chart is not showing properly in the UI. but if I reload the page, it is showing pefectly.
For an example if you go to this blog page directly, you will see the sample grap is showig perfectly. But if you navigate to another page for example the home page and back to this page, you will see the graph is not showing properly.
Maybe the problem is for cache or something else but I want a solution for this. Please let me know anyone if there has any solution for this problem.
]]>Hello, I am trying to showcase my data via the column chart, and I’m having issues as the data does not get displayed correctly and when I click on the option for stacked bar nothing happens. I have three columns in my data, for which I would like to showcase a stacked bar. For example I have a column with some question answers, another column with countries and a third one with the values for each combination of answer/country, so I want to make the graph in such a way that on the x axis there will be the answer options while on the y axis will be the values and for each answer the countries will be stacked.
Could you let me know why the stacked option doesn’t work?
]]>I want to make dark chart like this, just like Graphina banner. but unable to find options to change x y value color. Can your team help me with this?
How to exclude all graphina asset from the front end example,?
i have try with wp_dequeue or deregister but still not working
Hello,
I’m having trouble with the graphina pro plug in, it doesn’t work with elementor, it causes the editor to infinitely load.
I had previously older version of the plug in and it worked.
How can I downgrade the version, I’m not seeing such option in wordpress.
Thank you.
]]>Is it possible to add a call out or a highlight to a graph? We want to add text over top of the graph to callout the difference between two columns in the column graph.
]]>Hello, we have converted an existing website into a multisite and are using Elementor Pro and Graphina Pro.
The problem is that charts can only be edited by users with administrator rights in Elementor. Users with “Editor” rights can create charts, but these are no longer displayed when they are reloaded.
Elementor, Elementor Pro and Graphina are all installed in the latest version.
Andy idea how to solve this?
]]>When you hover over the bars on the charts the opacity of the bars changes. Is there a way to disable that effect? I cannot find it.
]]>Hey guys,
is it possible to use dynamic data with graphina in gutenberg (from database, js, ACF)? We’re planning an admin dashboard where information about usercount, etc should be shown and thinking about getting graphina for that.
Greetings!
]]>Hello guys. Charts are not loading properly in loop Carousel. Also if they somehow load the last loop load only after some interaction with it(click, swipe etc.). Any thoughts about this situation maybe there is some lazyload or something so I can force charts to load.
]]>The plugin works fine, thanks a lot. But when trying to insert it via Elementor, the graph is not shown anymore. In past it worked, but it seems like the latest version of the plugin does not support that?
On start page of our link it works fine, but not in the forum. Only title loads.
Any ideas?
]]>Hi what is graphina”s js file to be excluded in cache ?
]]>Hi, I was wondering what would be the CSS or JS to include or exclude to LiteSpeed settings so the graphs keeps working on mobile devices. It works fine when JS settings > are all off. But when either JS minifier, JS, combine JS, external JS in line, deferred or reported loading are on, it breaks.
Thanks for any update
Romain
]]>Hi, it’s a great plugin and it works fine on desktop but it does not load on mobiles. Any idea why or howto fix it ? Thanks a lot
Romain
]]>Good day,
Really like your plugin so far. I wanted to change the fill color of only one column in a column chart – the column with the lowest critical value. I tried using CSS to change the fill color for only one column without much luck. Is this possible to have a different color for select columns?
]]>