About
RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 15 years
old) and has a wealth of features making it an ideal
choice to show charts on your website.
Download
Get the latest version of RGraph (version 6.17) from
the download page. There's also older versions available,
minified files and links to cdnjs.com hosted libraries.
License
RGraph can be used for free under the GPL or if
that doesn't suit your situation there's an
inexpensive (£99) commercial license available.I have issues with the Horizontal Bar chart
Posted by Sukh at 10:00 on Wednesday 20th July 2022 [link]
I need to show it on mobile view but it does not show and also need to some space between image and bar. Please let me know what should i do for it..
Attached image:)
Posted by Richard at 10:17 on Wednesday 20th July 2022 [link]
Hi,
Can you give more detail and a link to the page in question?
Try removing all of the options and any responsive configuration that you've added to see if a basic chart shows up.
Cheers.
Richard
Can you give more detail and a link to the page in question?
Try removing all of the options and any responsive configuration that you've added to see if a basic chart shows up.
Cheers.
Richard
Posted by Sukh at 10:25 on Wednesday 20th July 2022 [link]
Here is the code which i am using for it.
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.drawing.image.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.hbar.js"></script>
<body>
<canvas id="cvs" height="500" width="646" >[No canvas support]</canvas>
<script>
// The labels for the chart are not added by giving them to the
// chart but manually adding text to the chart.
images = [
"[REMOVED]",
"[REMOVED]",
"[REMOVED]",
"[REMOVED]",
"[REMOVED]"
];
// Create the Horizontal Bar chart and configure it. With there
// being no labels on the left-hand side the margin autofit
// will make the left margin zero
bar = new RGraph.HBar({
id: 'cvs',
data: [[3.83,12.68],[8.00,12.00],[24.00,12.00],[9.5,1.25],[6.5,12.5]],
options: {
backgroundGrid: false,
xaxis: false,
yaxis: false,
yaxisLabels: ['','','','',''],
xaxisScale: false,
labelsAbove: true,
marginBottom: 10,
colors: ["#D5F7E5","#1430a9"],
corners: "round",
cornersRoundRadius: 50,
marginInner: 5,
labelsAboveSpecific: ["3.83%","12.68%","8.00%","12.00%","24.00%","12.00%","9.5%","1.25%","6.5%","12.5%"],
labelsAboveSize: "Medium",
textFont: "Montserrat",
textSize: 15.28 ,
textWeight: "bold",
backgroundGridylines: false,
backgroundGridBorder: false,
xaxis: false,
yaxis: false,
yaxisScale: false,
backgroundGridDotted: true,
}
// Use the draw event to add the labels on the left-hand side
}).responsive([
{maxWidth: null,height:650,width:350,options:{textSize: 10,marginInner: 15,titleSize: 16,keyPositionY: 100,keyPositionGraphBoxed:false,keyBackground:'rgba(0,0,0,0)',keyPositionX: 50}},
{maxWidth: 800,height:350,width:250,options:{textSize: 8,marginInner: 5,titleSize: 10,keyPositionY: 170,keyPositionGraphBoxed: true,keyBackground:'rgba(255,255,255,0.75)',keyPositionX: 120}}
]).grow();
for (var i=0,idx=0;i<bar.coordsText.length; i+=1) {
if (bar.coordsText[i].tag == 'yaxis.labels') {
// Use the drawing API Image object to add the image instead of the
// canvas' 2D context directly. This means that the images will be redrawn
// automatically should tooltips be added to the chart later. Plus, of
// course, the drawing API image objects supports having a tooltip itself.
new RGraph.Drawing.Image({
id: 'cvs',
// Use the coordinates of the blank labels that were added in the
// chart configuration to position the image.
x: bar.coordsText[i].x-6,
y: bar.coordsText[i].y+5,
src: images[idx++],
options: {
valign: 'center',
height:77,
}
}).draw();
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.drawing.image.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.hbar.js"></script>
<body>
<canvas id="cvs" height="500" width="646" >[No canvas support]</canvas>
<script>
// The labels for the chart are not added by giving them to the
// chart but manually adding text to the chart.
images = [
"[REMOVED]",
"[REMOVED]",
"[REMOVED]",
"[REMOVED]",
"[REMOVED]"
];
// Create the Horizontal Bar chart and configure it. With there
// being no labels on the left-hand side the margin autofit
// will make the left margin zero
bar = new RGraph.HBar({
id: 'cvs',
data: [[3.83,12.68],[8.00,12.00],[24.00,12.00],[9.5,1.25],[6.5,12.5]],
options: {
backgroundGrid: false,
xaxis: false,
yaxis: false,
yaxisLabels: ['','','','',''],
xaxisScale: false,
labelsAbove: true,
marginBottom: 10,
colors: ["#D5F7E5","#1430a9"],
corners: "round",
cornersRoundRadius: 50,
marginInner: 5,
labelsAboveSpecific: ["3.83%","12.68%","8.00%","12.00%","24.00%","12.00%","9.5%","1.25%","6.5%","12.5%"],
labelsAboveSize: "Medium",
textFont: "Montserrat",
textSize: 15.28 ,
textWeight: "bold",
backgroundGridylines: false,
backgroundGridBorder: false,
xaxis: false,
yaxis: false,
yaxisScale: false,
backgroundGridDotted: true,
}
// Use the draw event to add the labels on the left-hand side
}).responsive([
{maxWidth: null,height:650,width:350,options:{textSize: 10,marginInner: 15,titleSize: 16,keyPositionY: 100,keyPositionGraphBoxed:false,keyBackground:'rgba(0,0,0,0)',keyPositionX: 50}},
{maxWidth: 800,height:350,width:250,options:{textSize: 8,marginInner: 5,titleSize: 10,keyPositionY: 170,keyPositionGraphBoxed: true,keyBackground:'rgba(255,255,255,0.75)',keyPositionX: 120}}
]).grow();
for (var i=0,idx=0;i<bar.coordsText.length; i+=1) {
if (bar.coordsText[i].tag == 'yaxis.labels') {
// Use the drawing API Image object to add the image instead of the
// canvas' 2D context directly. This means that the images will be redrawn
// automatically should tooltips be added to the chart later. Plus, of
// course, the drawing API image objects supports having a tooltip itself.
new RGraph.Drawing.Image({
id: 'cvs',
// Use the coordinates of the blank labels that were added in the
// chart configuration to position the image.
x: bar.coordsText[i].x-6,
y: bar.coordsText[i].y+5,
src: images[idx++],
options: {
valign: 'center',
height:77,
}
}).draw();
}
}
</script>
</body>
</html>
Posted by Richard at 11:27 on Wednesday 20th July 2022 [link]
Using the mobile testing view in Chrome your chart appears to be OK - no problem going from large to small screens.
And the chart won't auto-rotate - it always remains a Horizontal Bar chart.
My test page of your code is here:
[REMOVED]
And the chart won't auto-rotate - it always remains a Horizontal Bar chart.
My test page of your code is here:
[REMOVED]
Posted by Sukhdeep at 11:54 on Wednesday 20th July 2022 [link]
and also please let me know what is the another option to fix it...How can I do it with another way?
Posted by Richard at 12:19 on Wednesday 20th July 2022 [link]
I can't see an issue with your chart I'm afraid.
In terms of adding space for your labels, you can increase the size of the marginLeft property. You'll also need to turn off the marginLeftAuto property though:
marginLeftAuto: false,
marginLeft: 75
Then you can adjust the x/y coordinates that you position the images at.
In terms of adding space for your labels, you can increase the size of the marginLeft property. You'll also need to turn off the marginLeftAuto property though:
marginLeftAuto: false,
marginLeft: 75
Then you can adjust the x/y coordinates that you position the images at.
Posted by Sukhdeep at 12:33 on Wednesday 20th July 2022 [link]
Please shared me the code file with your given property.
Thanks
Thanks
Posted by Richard at 12:41 on Wednesday 20th July 2022 [link]
I've already posted the link to the test page - but here it is again:
[REMOVED]
[REMOVED]
Posted by Sukhdeep at 12:44 on Wednesday 20th July 2022 [link]
I got link already but please do changes on that page which you shared previous post.
"In terms of adding space for your labels, you can increase the size of the marginLeft property. You'll also need to turn off the marginLeftAuto property though:
marginLeftAuto: false,
marginLeft: 75
Then you can adjust the x/y coordinates that you position the images at."
"In terms of adding space for your labels, you can increase the size of the marginLeft property. You'll also need to turn off the marginLeftAuto property though:
marginLeftAuto: false,
marginLeft: 75
Then you can adjust the x/y coordinates that you position the images at."
Posted by Richard at 12:56 on Wednesday 20th July 2022 [link]
You just have to change the X coordinate at which you place the image (I think that you can leave the Y coordinate as-is):
x: bar.coordsText[i].x - 15,
y: bar.coordsText[i].y + 5,
Withe the properties just add them to your configuration as you would other properties.
x: bar.coordsText[i].x - 15,
y: bar.coordsText[i].y + 5,
Withe the properties just add them to your configuration as you would other properties.
Posted by Richard at 13:23 on Wednesday 20th July 2022 [link]
Try this:
[REMOVED]
[REMOVED]
Posted by Sukhdeep at 13:28 on Wednesday 20th July 2022 [link]
thankyou so much .It worked
Posted by Sukhdeep at 14:25 on Wednesday 20th July 2022 [link]
I need to change the format of the percentage value which is mention under below:-
Please do it.
attached image which i have and which i want to get.
Font: Montserrat
Weight: 700
Size: 12.92px
Line height : 19.48px
Please do it.
attached image which i have and which i want to get.
Font: Montserrat
Weight: 700
Size: 12.92px
Line height : 19.48px
Posted by Richard at 18:13 on Wednesday 20th July 2022 [link]
All of the labels and text properties are described here:
https://www.rgraph.net/canvas/hbar.html#labels-and-text-properties
You want, in particular, these I think:
textFont
textSize (which is measured in points)
textColor
textItalic
textBold
PS Please don't post new messages each time - post replies to this thread.
https://www.rgraph.net/canvas/hbar.html#labels-and-text-properties
You want, in particular, these I think:
textFont
textSize (which is measured in points)
textColor
textItalic
textBold
PS Please don't post new messages each time - post replies to this thread.
Posted by Sukh at 06:45 on Thursday 21st July 2022 [link]
Please implement these properties on your generated link ([REMOVED])
and shared me this link again
Thanks
and shared me this link again
Thanks
Posted by Richard at 11:05 on Thursday 21st July 2022 [link]
Simply add them like you did the other properties in your chart configuration. For example:
...
textFont: 'Montserrat',
textBold: true,
...
etc
...
textFont: 'Montserrat',
textBold: true,
...
etc
Posted by Sukhdeep at 06:31 on Friday 22nd July 2022 [link]
I used these properties but it does not effect on the font...
if i Change the below properties. It does not change...Please reply..
textFont: 'Montserrat',
textSize: 20 ,
if i Change the below properties. It does not change...Please reply..
textFont: 'Montserrat',
textSize: 20 ,
Posted by Sukhdeep at 07:07 on Friday 22nd July 2022 [link]
Hi.
I tried and font family and textbold properties worked.
But I need to increase font size.
It does not effect if I change the size.
textSize:12.92,
This is the size which I need. Also I need to change the color of the percentage alternatively.
example :
3.83% - #000000,
12.68% - #001A95,
8.00% - #000000,
12.68% - #001A95,
And so on...
Please do it...how to do change these color and how to change the textSize.
I tried and font family and textbold properties worked.
But I need to increase font size.
It does not effect if I change the size.
textSize:12.92,
This is the size which I need. Also I need to change the color of the percentage alternatively.
example :
3.83% - #000000,
12.68% - #001A95,
8.00% - #000000,
12.68% - #001A95,
And so on...
Please do it...how to do change these color and how to change the textSize.
Posted by Richard at 10:30 on Friday 22nd July 2022 [link]
In the example code that you sent me you had both textSize in the main configuration and also the responsive configuration. The responsive configuration overrides the main configuration so set it here instead of the main configuration.
Also, this:
textWeight: "bold"
Isn't an RGraph property - the property that you want is:
textBold: true
This can also go in the responsive configuration.
Also, this:
textWeight: "bold"
Isn't an RGraph property - the property that you want is:
textBold: true
This can also go in the responsive configuration.
Posted by Sukhdeep at 11:23 on Friday 22nd July 2022 [link]
Rgraph is not visible on the desktop as well as on mobile...Please check also i want to change the color of percentage alternatively
3.83% - #000000,
12.68% - #001A95,
8.00% - #000000,
12.68% - #001A95,
like this
Here is my code...Please share me your tested link file...
<?php
/**
* Template Name: API Testing Template
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package cashaa.com
*/
get_header();
?>
<main id="primary" class="site-main outerPages my-5 py-5">
<?php
// echo $response;
// Getting all currencies
$curl = curl_init();
// $from = '2633816a-dc95-4015-2536-08d7b39928d1';
// $to = '43796ac1-8f4e-4875-2533-08d7b39928d1';
// $reqURL = "[REMOVED]";
$allCurrencies = '[REMOVED]';
curl_setopt_array($curl, array(
CURLOPT_URL => $allCurrencies,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
));
$response = curl_exec($curl);
$currency_json = json_decode($response, true);
$err = curl_error($curl);
curl_close($curl);
?>
<div class="wrapper homePageWrapper">
<section class="buySellCryptoSection section-panel white_bg">
<div class="container pb-4">
<div class="row align-items-center text-center-mob swap_sec-mob">
<div class="col-lg-6 mb-4 mb-lg-0">
<div class="cryptoExchangeFormFrontend">
<h6>YOU GET</h6>
<form novalidate="" class="">
<div class="row">
<div class="col-md-12">
<div class="input-group mb-0">
<input aria-describedby="currencyInput" class="form-control"
formcontrolname="amount" id="textinput" placeholder="Enter Amount" type="number" disabled>
<div class="input-group-append"> <span class="input-group-text"
id="selectedBTNnotimge">EUR</span> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-5 align-self-center">
<div class="custom_select_transparent">
<div class="btn-group dropdown ">
<button type="button" class="dropdown-toggle waves-light btn btn-lg selectFROMcurr" id="1stCurr" data-bs-toggle="dropdown" aria-expanded="false">
<img alt="" class="icon" width="32"
src="<?php // echo esc_url( get_template_directory_uri() . '/images/images_plan/EUR.png' ); ?>">
EUR
</button>
<div class="dropdown-menu 1stCurr" aria-labelledby="1stCurr">
<?php
foreach($currency_json['currencies'] as $currency):
echo '<button type="button" class="btn getCURRVALUE" data-id="' .$currency['symbol']. '"> <img alt=""
src="'.$currency['iconUrl'].'">' .$currency['symbol']. '</button>';
endforeach;
?>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-2">
<div class="verticalDevider"> <img alt=""
src="<?php echo esc_url( get_template_directory_uri() . '/images/d141e8c48951bd6e4408f61c64557464.png' ); ?>">
</div>
</div>
<div class="col-12 col-sm-5 align-self-center">
<div class="custom_select_transparent">
<div class="btn-group dropdown">
<button type="button" class="dropdown-toggle waves-light btn btn-lg selectedBTN2"
id="2ndCurr" data-bs-toggle="dropdown" aria-expanded="false">
<img
alt="" class="icon" width="32"
src="<?php // echo esc_url( get_template_directory_uri() . '/images/images_plan/CAS.png' ); ?>">
To </button>
<div class="dropdown-menu 2ndCurr" aria-labelledby="2ndCurr">
<!---->
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 text-center mt-5 mb-4">
<h6 class="mb-2">YOU SEND </h6>
<h3 class="sendPriceVal"><span class="priceVal c-darkBlue">0</span>
<span id="resultCurr">Amount</span>
</h3>
</div>
<div class="col-12 text-center"> <button
class="cashaa_btn btn_blue_gredient btn btn-md" mdbbtn="" size="md"
style="text-transform: inherit !important;" type="button">Exchange
Now</button> </div>
</div>
</form>
</div>
</div>
<div class="col-lg-6 mb-4 mb-lg-0">
<div class="bigHeading withNumberPlaceholder1">
<h1 class="bigHeadingBlue">Buy & Sell Cryptocurrency</h1>
</div>
<h2 class="smallHeading">Unlimited crypto liquidity with minimum price deviation.</h2>
<div class="row">
<div class="col-md-10">
<p class="mt-0 mb-2 c-darkBlue"><strong>Competitive rates with high liquidity.</strong>
</p>
<p class="mb-4">Lowest Bitcoin buy rate and highest sell rate, without any hidden fees.
</p>
<p class="mt-0 mb-2 c-darkBlue"><strong>Flat fee.</strong></p>
<p class="mb-4">We charge a flat fee of 1.49% on buying and selling.</p>
</div>
</div>
</div>
</div>
</div>
<a class="mouse_pointer" href="javascript:void(0);"> <span>Your Money your way</span><i
class="fa fa-angle-down text-light"></i> </a>
</section>
<section class="section-panel white_bg dived_box-shadow">
<div class="container">
<div class="row align-items-center text-center">
<div class="col-lg-12 mb-12 mb-lg-0">
<div class="withNumberPlaceholder col-md-8 col-lg-8 col-sm-12 mar-auto p-0">
<h3 class="bigHeadingBlue">Why earn with Cashaa</h3>
<h2 class="smallHeading">Earn the industry?s highest interest rates on major
cryptocurrencies and digital assets. Numbers don?t lie! See below. </h2>
</div>
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.drawing.image.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.hbar.js"></script>
<body>
<div class="view">
<div class="desktop">
<div class="chart-container" style="position: relative; "><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; inset: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
<canvas id="my_Chart" style="display: block;" width="1252" height="626"></canvas>
</div>
<!--image div-->
<div class="row" style="position: relative; ">
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/themes/dataviz.js"></script>
<script>
// Data define for bar chart
var myData = {
labels: ["BTC", "USDT", "BTC", "USDT", "BTC", "USDT", "BTC","USDT","BTC","USDT"],
datasets: [{
backgroundColor: ["#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9"],
data: [ 3.83,12.68,6.52,12.5,12.00,24.00,8.00,12.00,1.25,9.5,],
}]
};
// Options to display value on top of bars
var myoption = {
legend: {display: false},
responsive: true,
// maintainAspectRatio: false,
tooltips: {enabled: false},
scales:{
yAxes: [{
gridLines:
{
borderDash: [3],
drawBorder: false,
},
display: true,
ticks: {
fontColor: "white", // this code for show left serial number here
},
}],
xAxes:[{
gridLines:{
display: false,
}
}],
},
hover: {
animationDuration: 1
},
animation: {
duration: true,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.textAlign = "top";
ctx.font = "900 20px Montserrat, sans-serif";
ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.textBaseline = "center";
ctx.fillText ("Canvas!", 0, 0);
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index] +"%";
ctx.fillText(data, bar._model.x -20, bar._model.y - 10);
});
});
}
}
};
//Code to drow Chart
var ctx = document.getElementById("my_Chart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
// Define chart type
data: myData, // Chart data
options: myoption // Chart Options [This is optional paramenter use to add some extra things in the chart].
});
</script> </div>
</span>
</div>
<div class="mobile">
<canvas id="cvs" height="500" width="646" >[No canvas support]</canvas>
.
<script>
// The labels for the chart are not added by giving them to the
// chart but manually adding text to the chart.
images = [ "[REMOVED]",
"[REMOVED]",
"[REMOVED]",
"[REMOVED]",
"[REMOVED]"];
// Create the Horizontal Bar chart and configure it. With there
// being no labels on the left-hand side the margin autofit
// will make the left margin zero
bar = new RGraph.HBar({
id: 'cvs',
data: [[3.83,12.68],[8.00,12.00],[24.00,12.00],[9.5,1.25],[6.5,12.5]],
width: 700,
height: 275,
options: {
backgroundGrid: false,
xaxis: false,
yaxis: false,
yaxisLabels: ['','','','',''],
xaxisScale: false,
labelsAbove: true,
marginBottom: 10,
marginLeftAuto: false,
colors: ["#D5F7E5","#1732ac"],
corners: "round",
cornersRoundRadius: 5,
marginInner: 5,
labelsAboveSpecific: ["3.83%","12.68%","8.00%","12.00%","24.00%","12.00%","9.5%","1.25%","6.5%","12.5%"],
labelsAboveSize: "Medium",
textFont: 'Montserrat',
//textColor :["#ffffff","#ffffff"],
textBold: true,
lineHeight: 19.48,
textWeight: 700,
backgroundGridylines: false,
backgroundGridBorder: false,
xaxis: false,
yaxis: false,
yaxisScale: false,
backgroundGridDotted: true,
}
// Use the draw event to add the labels on the left-hand side
}).responsive([
{maxWidth: null,height:650,width:350,options:{textSize: 12.98, marginInner: 15,titleSize: 16,keyPositionY: 100,keyPositionGraphBoxed:false,keyBackground:'rgba(0,0,0,0)',keyPositionX: 50}},
{maxWidth: 800,height:350,width:250,options:{textSize: 8, marginInner: 5, titleSize: 10,keyPositionY: 170,keyPositionGraphBoxed: true,keyBackground:'rgba(255,255,255,0.75)',keyPositionX: 120}}
]).grow();
for (var i=0,idx=0;i<bar.coordsText.length; i+=1) {
if (bar.coordsText[i].tag == 'yaxis.labels') {
// Use the drawing API Image object to add the image instead of the
// canvas' 2D context directly. This means that the images will be redrawn
// automatically should tooltips be added to the chart later. Plus, of
// course, the drawing API image objects supports having a tooltip itself.
new RGraph.Drawing.Image({
id: 'cvs',
// Use the coordinates of the blank labels that were added in the
// chart configuration to position the image.
// x: bar.coordsText[i].x-6,
// y: bar.coordsText[i].y+5,
x: bar.coordsText[i].x-30,
y: bar.coordsText[i].y+5,
src: images[idx++],
options: {
valign: 'center',
height:77,
bold:true,
size:80,
}
}).draw();
}
}
</script>
</span>
</div>
</div>
<style>
.img_size {
float: left;
width: 150px;
margin-left: 80px;
margin-top: 15px;
}
.view .mobile {
display:none;
}
@media only screen and (max-width: 600px) and (min-width: 400px) {
.view .mobile {
display: block;
}
.view .desktop {
display: none;
}
}
@media (max-width: 1024px) {
.view .mobile {
display: block;
}
.view .desktop {
display: none;
}
}
</style>
<div class="whatsNextSection section-pad animateElements1 pb-4">
<div class="cardsWrapper">
<div class="row justify-content-center justify-content-md-start">
<div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="flip-card flip-card-nw light">
<div class="flip-card-inner1">
<div class="flip-card-front d-flex flex-column">
<h4 class="heading">Daily Payouts</h4>
<p class="placeMouseIndicator dec"> Interest is calculated
daily, and paid out daily on all your assets. </p>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="flip-card flip-card-nw medium">
<div class="flip-card-inner1">
<div class="flip-card-front d-flex flex-column">
<h4 class="heading">Withdraw Anytime</h4>
<p class="placeMouseIndicator dec"> Withdraw any amount at any
time while earning interest on the remaining balance.</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="flip-card flip-card-nw dark">
<div class="flip-card-inner1">
<div class="flip-card-front d-flex flex-column">
<h4 class="heading">Fixed Term Deposits</h4>
<p class="placeMouseIndicator dec"> Opt-in for fixed deposits
upto 12 months to earn higher interest rates.</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="flip-card flip-card-nw dark">
<div class="flip-card-inner1">
<div class="flip-card-front d-flex flex-column">
<h4 class="heading">Benefit of Compounding</h4>
<p class="placeMouseIndicator dec"> Interest earned is
compounded daily or at the end of the fixed deposit term.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="mouse_pointer">
<span>Cashaa in the
Media</span>
<i class="fa fa-angle-down text-dark" aria-hidden="true"></i>
</a>
</section>
</div>
</main><!-- #main -->
<?php
get_footer();
3.83% - #000000,
12.68% - #001A95,
8.00% - #000000,
12.68% - #001A95,
like this
Here is my code...Please share me your tested link file...
<?php
/**
* Template Name: API Testing Template
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package cashaa.com
*/
get_header();
?>
<main id="primary" class="site-main outerPages my-5 py-5">
<?php
// echo $response;
// Getting all currencies
$curl = curl_init();
// $from = '2633816a-dc95-4015-2536-08d7b39928d1';
// $to = '43796ac1-8f4e-4875-2533-08d7b39928d1';
// $reqURL = "[REMOVED]";
$allCurrencies = '[REMOVED]';
curl_setopt_array($curl, array(
CURLOPT_URL => $allCurrencies,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
));
$response = curl_exec($curl);
$currency_json = json_decode($response, true);
$err = curl_error($curl);
curl_close($curl);
?>
<div class="wrapper homePageWrapper">
<section class="buySellCryptoSection section-panel white_bg">
<div class="container pb-4">
<div class="row align-items-center text-center-mob swap_sec-mob">
<div class="col-lg-6 mb-4 mb-lg-0">
<div class="cryptoExchangeFormFrontend">
<h6>YOU GET</h6>
<form novalidate="" class="">
<div class="row">
<div class="col-md-12">
<div class="input-group mb-0">
<input aria-describedby="currencyInput" class="form-control"
formcontrolname="amount" id="textinput" placeholder="Enter Amount" type="number" disabled>
<div class="input-group-append"> <span class="input-group-text"
id="selectedBTNnotimge">EUR</span> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-5 align-self-center">
<div class="custom_select_transparent">
<div class="btn-group dropdown ">
<button type="button" class="dropdown-toggle waves-light btn btn-lg selectFROMcurr" id="1stCurr" data-bs-toggle="dropdown" aria-expanded="false">
<img alt="" class="icon" width="32"
src="<?php // echo esc_url( get_template_directory_uri() . '/images/images_plan/EUR.png' ); ?>">
EUR
</button>
<div class="dropdown-menu 1stCurr" aria-labelledby="1stCurr">
<?php
foreach($currency_json['currencies'] as $currency):
echo '<button type="button" class="btn getCURRVALUE" data-id="' .$currency['symbol']. '"> <img alt=""
src="'.$currency['iconUrl'].'">' .$currency['symbol']. '</button>';
endforeach;
?>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-2">
<div class="verticalDevider"> <img alt=""
src="<?php echo esc_url( get_template_directory_uri() . '/images/d141e8c48951bd6e4408f61c64557464.png' ); ?>">
</div>
</div>
<div class="col-12 col-sm-5 align-self-center">
<div class="custom_select_transparent">
<div class="btn-group dropdown">
<button type="button" class="dropdown-toggle waves-light btn btn-lg selectedBTN2"
id="2ndCurr" data-bs-toggle="dropdown" aria-expanded="false">
<img
alt="" class="icon" width="32"
src="<?php // echo esc_url( get_template_directory_uri() . '/images/images_plan/CAS.png' ); ?>">
To </button>
<div class="dropdown-menu 2ndCurr" aria-labelledby="2ndCurr">
<!---->
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 text-center mt-5 mb-4">
<h6 class="mb-2">YOU SEND </h6>
<h3 class="sendPriceVal"><span class="priceVal c-darkBlue">0</span>
<span id="resultCurr">Amount</span>
</h3>
</div>
<div class="col-12 text-center"> <button
class="cashaa_btn btn_blue_gredient btn btn-md" mdbbtn="" size="md"
style="text-transform: inherit !important;" type="button">Exchange
Now</button> </div>
</div>
</form>
</div>
</div>
<div class="col-lg-6 mb-4 mb-lg-0">
<div class="bigHeading withNumberPlaceholder1">
<h1 class="bigHeadingBlue">Buy & Sell Cryptocurrency</h1>
</div>
<h2 class="smallHeading">Unlimited crypto liquidity with minimum price deviation.</h2>
<div class="row">
<div class="col-md-10">
<p class="mt-0 mb-2 c-darkBlue"><strong>Competitive rates with high liquidity.</strong>
</p>
<p class="mb-4">Lowest Bitcoin buy rate and highest sell rate, without any hidden fees.
</p>
<p class="mt-0 mb-2 c-darkBlue"><strong>Flat fee.</strong></p>
<p class="mb-4">We charge a flat fee of 1.49% on buying and selling.</p>
</div>
</div>
</div>
</div>
</div>
<a class="mouse_pointer" href="javascript:void(0);"> <span>Your Money your way</span><i
class="fa fa-angle-down text-light"></i> </a>
</section>
<section class="section-panel white_bg dived_box-shadow">
<div class="container">
<div class="row align-items-center text-center">
<div class="col-lg-12 mb-12 mb-lg-0">
<div class="withNumberPlaceholder col-md-8 col-lg-8 col-sm-12 mar-auto p-0">
<h3 class="bigHeadingBlue">Why earn with Cashaa</h3>
<h2 class="smallHeading">Earn the industry?s highest interest rates on major
cryptocurrencies and digital assets. Numbers don?t lie! See below. </h2>
</div>
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.drawing.image.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.hbar.js"></script>
<body>
<div class="view">
<div class="desktop">
<div class="chart-container" style="position: relative; "><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; inset: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
<canvas id="my_Chart" style="display: block;" width="1252" height="626"></canvas>
</div>
<!--image div-->
<div class="row" style="position: relative; ">
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/themes/dataviz.js"></script>
<script>
// Data define for bar chart
var myData = {
labels: ["BTC", "USDT", "BTC", "USDT", "BTC", "USDT", "BTC","USDT","BTC","USDT"],
datasets: [{
backgroundColor: ["#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9"],
data: [ 3.83,12.68,6.52,12.5,12.00,24.00,8.00,12.00,1.25,9.5,],
}]
};
// Options to display value on top of bars
var myoption = {
legend: {display: false},
responsive: true,
// maintainAspectRatio: false,
tooltips: {enabled: false},
scales:{
yAxes: [{
gridLines:
{
borderDash: [3],
drawBorder: false,
},
display: true,
ticks: {
fontColor: "white", // this code for show left serial number here
},
}],
xAxes:[{
gridLines:{
display: false,
}
}],
},
hover: {
animationDuration: 1
},
animation: {
duration: true,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.textAlign = "top";
ctx.font = "900 20px Montserrat, sans-serif";
ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.textBaseline = "center";
ctx.fillText ("Canvas!", 0, 0);
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index] +"%";
ctx.fillText(data, bar._model.x -20, bar._model.y - 10);
});
});
}
}
};
//Code to drow Chart
var ctx = document.getElementById("my_Chart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
// Define chart type
data: myData, // Chart data
options: myoption // Chart Options [This is optional paramenter use to add some extra things in the chart].
});
</script> </div>
</span>
</div>
<div class="mobile">
<canvas id="cvs" height="500" width="646" >[No canvas support]</canvas>
.
<script>
// The labels for the chart are not added by giving them to the
// chart but manually adding text to the chart.
images = [ "[REMOVED]",
"[REMOVED]",
"[REMOVED]",
"[REMOVED]",
"[REMOVED]"];
// Create the Horizontal Bar chart and configure it. With there
// being no labels on the left-hand side the margin autofit
// will make the left margin zero
bar = new RGraph.HBar({
id: 'cvs',
data: [[3.83,12.68],[8.00,12.00],[24.00,12.00],[9.5,1.25],[6.5,12.5]],
width: 700,
height: 275,
options: {
backgroundGrid: false,
xaxis: false,
yaxis: false,
yaxisLabels: ['','','','',''],
xaxisScale: false,
labelsAbove: true,
marginBottom: 10,
marginLeftAuto: false,
colors: ["#D5F7E5","#1732ac"],
corners: "round",
cornersRoundRadius: 5,
marginInner: 5,
labelsAboveSpecific: ["3.83%","12.68%","8.00%","12.00%","24.00%","12.00%","9.5%","1.25%","6.5%","12.5%"],
labelsAboveSize: "Medium",
textFont: 'Montserrat',
//textColor :["#ffffff","#ffffff"],
textBold: true,
lineHeight: 19.48,
textWeight: 700,
backgroundGridylines: false,
backgroundGridBorder: false,
xaxis: false,
yaxis: false,
yaxisScale: false,
backgroundGridDotted: true,
}
// Use the draw event to add the labels on the left-hand side
}).responsive([
{maxWidth: null,height:650,width:350,options:{textSize: 12.98, marginInner: 15,titleSize: 16,keyPositionY: 100,keyPositionGraphBoxed:false,keyBackground:'rgba(0,0,0,0)',keyPositionX: 50}},
{maxWidth: 800,height:350,width:250,options:{textSize: 8, marginInner: 5, titleSize: 10,keyPositionY: 170,keyPositionGraphBoxed: true,keyBackground:'rgba(255,255,255,0.75)',keyPositionX: 120}}
]).grow();
for (var i=0,idx=0;i<bar.coordsText.length; i+=1) {
if (bar.coordsText[i].tag == 'yaxis.labels') {
// Use the drawing API Image object to add the image instead of the
// canvas' 2D context directly. This means that the images will be redrawn
// automatically should tooltips be added to the chart later. Plus, of
// course, the drawing API image objects supports having a tooltip itself.
new RGraph.Drawing.Image({
id: 'cvs',
// Use the coordinates of the blank labels that were added in the
// chart configuration to position the image.
// x: bar.coordsText[i].x-6,
// y: bar.coordsText[i].y+5,
x: bar.coordsText[i].x-30,
y: bar.coordsText[i].y+5,
src: images[idx++],
options: {
valign: 'center',
height:77,
bold:true,
size:80,
}
}).draw();
}
}
</script>
</span>
</div>
</div>
<style>
.img_size {
float: left;
width: 150px;
margin-left: 80px;
margin-top: 15px;
}
.view .mobile {
display:none;
}
@media only screen and (max-width: 600px) and (min-width: 400px) {
.view .mobile {
display: block;
}
.view .desktop {
display: none;
}
}
@media (max-width: 1024px) {
.view .mobile {
display: block;
}
.view .desktop {
display: none;
}
}
</style>
<div class="whatsNextSection section-pad animateElements1 pb-4">
<div class="cardsWrapper">
<div class="row justify-content-center justify-content-md-start">
<div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="flip-card flip-card-nw light">
<div class="flip-card-inner1">
<div class="flip-card-front d-flex flex-column">
<h4 class="heading">Daily Payouts</h4>
<p class="placeMouseIndicator dec"> Interest is calculated
daily, and paid out daily on all your assets. </p>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="flip-card flip-card-nw medium">
<div class="flip-card-inner1">
<div class="flip-card-front d-flex flex-column">
<h4 class="heading">Withdraw Anytime</h4>
<p class="placeMouseIndicator dec"> Withdraw any amount at any
time while earning interest on the remaining balance.</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="flip-card flip-card-nw dark">
<div class="flip-card-inner1">
<div class="flip-card-front d-flex flex-column">
<h4 class="heading">Fixed Term Deposits</h4>
<p class="placeMouseIndicator dec"> Opt-in for fixed deposits
upto 12 months to earn higher interest rates.</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="flip-card flip-card-nw dark">
<div class="flip-card-inner1">
<div class="flip-card-front d-flex flex-column">
<h4 class="heading">Benefit of Compounding</h4>
<p class="placeMouseIndicator dec"> Interest earned is
compounded daily or at the end of the fixed deposit term.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="mouse_pointer">
<span>Cashaa in the
Media</span>
<i class="fa fa-angle-down text-dark" aria-hidden="true"></i>
</a>
</section>
</div>
</main><!-- #main -->
<?php
get_footer();
Posted by Richard at 11:35 on Friday 22nd July 2022 [link]
There's no way to change the color of a label based on the value of a bar - only the color of all the text can be set.
Posted by Sukh at 11:41 on Friday 22nd July 2022 [link]
okay.But why my code is not working..
i means rgraph is not visible on the desktop and mobile.
Please check...
i means rgraph is not visible on the desktop and mobile.
Please check...
Posted by Richard at 12:27 on Friday 22nd July 2022 [link]
The test page - which is your code - is working for me on both desktop and mobile. So I suggest that you start eliminating other things by removing code from the page.
Start by removing the configuration from your chart so that its a basic chart; no images and no responsive configuration.
Then, when it's a basic chart, start looking at other parts of the page.
Start by removing the configuration from your chart so that its a basic chart; no images and no responsive configuration.
Then, when it's a basic chart, start looking at other parts of the page.
Posted by Sukh at 13:01 on Friday 22nd July 2022 [link]
[LINK REMOVED]
This is my page link.Please check..what is the issue with my code.
<?php
get_header()
?>
<!DOCTYPE html>
<html>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<body>
<div class="view">
<div class="desktop">
<div class="chart-container" style="position: relative; "><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; inset: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
<canvas id="my_Chart" style="display: block;" width="1252" height="626"></canvas>
</div>
<!--image div-->
<div class="row" style="position: relative; ">
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="h[REMOVED]"><noscript><img src="[REMOVED]">
</noscript>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<script>
// Data define for bar chart
var myData = {
labels: ["BTC", "USDT", "BTC", "USDT", "BTC", "USDT", "BTC","USDT","BTC","USDT"],
datasets: [{
backgroundColor: ["#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9"],
data: [ 3.83,12.68,6.52,12.5,12.00,24.00,8.00,12.00,1.25,9.5,],
}]
};
// Options to display value on top of bars
var myoption = {
legend: {display: false},
responsive: true,
// maintainAspectRatio: false,
tooltips: {enabled: false},
scales:{
yAxes: [{
gridLines:
{
borderDash: [3],
drawBorder: false,
},
display: true,
ticks: {
fontColor: "white", // this code for show left serial number here
},
}],
xAxes:[{
gridLines:{
display: false,
}
}],
},
hover: {
animationDuration: 1
},
animation: {
duration: true,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.textAlign = "top";
ctx.font = "900 20px Montserrat, sans-serif";
ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.textBaseline = "center";
ctx.fillText ("Canvas!", 0, 0);
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index] +"%";
ctx.fillText(data, bar._model.x -20, bar._model.y - 10);
});
});
}
}
};
//Code to drow Chart
var ctx = document.getElementById("my_Chart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
// Define chart type
data: myData, // Chart data
options: myoption // Chart Options [This is optional paramenter use to add some extra things in the chart].
});
</script> </div>
</div>
<div class="mobile">
<canvas id="cvs" height="500" width="646" >[No canvas support]</canvas>
.
<script>
// The labels for the chart are not added by giving them to the
// chart but manually adding text to the chart.
images = [ "[REMOVED]",
"[REMOVED]",
"[REMOVED]",
"[REMOVED]",
"[REMOVED]"];
// Create the Horizontal Bar chart and configure it. With there
// being no labels on the left-hand side the margin autofit
// will make the left margin zero
bar = new RGraph.HBar({
id: 'cvs',
data: [[3.83,12.68],[8.00,12.00],[24.00,12.00],[9.5,1.25],[6.5,12.5]],
width: 700,
height: 275,
options: {
backgroundGrid: false,
xaxis: false,
yaxis: false,
yaxisLabels: ['','','','',''],
xaxisScale: false,
labelsAbove: true,
marginBottom: 10,
marginLeftAuto: false,
colors: ["#D5F7E5","#1732ac"],
corners: "round",
cornersRoundRadius: 5,
marginInner: 5,
labelsAboveSpecific: ["3.83%","12.68%","8.00%","12.00%","24.00%","12.00%","9.5%","1.25%","6.5%","12.5%"],
labelsAboveSize: "Medium",
textFont: 'Montserrat',
textBold: true,
lineHeight: 19.48,
textWeight: 700,
backgroundGridylines: false,
backgroundGridBorder: false,
xaxis: false,
yaxis: false,
yaxisScale: false,
backgroundGridDotted: true,
}
// Use the draw event to add the labels on the left-hand side
}).responsive([
{maxWidth: null,height:650,width:350,options:{textSize: 12.98, marginInner: 15,titleSize: 16,keyPositionY: 100,keyPositionGraphBoxed:false,keyBackground:'rgba(0,0,0,0)',keyPositionX: 50}},
{maxWidth: 800,height:350,width:250,options:{textSize: 8, marginInner: 5, titleSize: 10,keyPositionY: 170,keyPositionGraphBoxed: true,keyBackground:'rgba(255,255,255,0.75)',keyPositionX: 120}}
]).grow();
for (var i=0,idx=0;i<bar.coordsText.length; i+=1) {
if (bar.coordsText[i].tag == 'yaxis.labels') {
// Use the drawing API Image object to add the image instead of the
// canvas' 2D context directly. This means that the images will be redrawn
// automatically should tooltips be added to the chart later. Plus, of
// course, the drawing API image objects supports having a tooltip itself.
new RGraph.Drawing.Image({
id: 'cvs',
// Use the coordinates of the blank labels that were added in the
// chart configuration to position the image.
// x: bar.coordsText[i].x-6,
// y: bar.coordsText[i].y+5,
x: bar.coordsText[i].x-30,
y: bar.coordsText[i].y+5,
src: images[idx++],
options: {
valign: 'center',
height:77,
bold:true,
size:80,
}
}).draw();
}
}
</script>
</div>
</div>
<style>
.img_size {
float: left;
width: 220px;
margin-left: 45px;
margin-top: 15px;
}
.view .mobile {
display:none;
}
@media only screen and (max-width: 600px) and (min-width: 400px) {
.view .mobile {
display: block;
}
.view .desktop {
display: none;
}
}
@media (max-width: 1024px) {
.view .mobile {
display: block;
}
.view .desktop {
display: none;
}
}
</style>
<?php
get_footer()
?>
This is my page link.Please check..what is the issue with my code.
<?php
get_header()
?>
<!DOCTYPE html>
<html>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<body>
<div class="view">
<div class="desktop">
<div class="chart-container" style="position: relative; "><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; inset: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
<canvas id="my_Chart" style="display: block;" width="1252" height="626"></canvas>
</div>
<!--image div-->
<div class="row" style="position: relative; ">
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="h[REMOVED]"><noscript><img src="[REMOVED]">
</noscript>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<script>
// Data define for bar chart
var myData = {
labels: ["BTC", "USDT", "BTC", "USDT", "BTC", "USDT", "BTC","USDT","BTC","USDT"],
datasets: [{
backgroundColor: ["#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9"],
data: [ 3.83,12.68,6.52,12.5,12.00,24.00,8.00,12.00,1.25,9.5,],
}]
};
// Options to display value on top of bars
var myoption = {
legend: {display: false},
responsive: true,
// maintainAspectRatio: false,
tooltips: {enabled: false},
scales:{
yAxes: [{
gridLines:
{
borderDash: [3],
drawBorder: false,
},
display: true,
ticks: {
fontColor: "white", // this code for show left serial number here
},
}],
xAxes:[{
gridLines:{
display: false,
}
}],
},
hover: {
animationDuration: 1
},
animation: {
duration: true,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.textAlign = "top";
ctx.font = "900 20px Montserrat, sans-serif";
ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.textBaseline = "center";
ctx.fillText ("Canvas!", 0, 0);
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index] +"%";
ctx.fillText(data, bar._model.x -20, bar._model.y - 10);
});
});
}
}
};
//Code to drow Chart
var ctx = document.getElementById("my_Chart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
// Define chart type
data: myData, // Chart data
options: myoption // Chart Options [This is optional paramenter use to add some extra things in the chart].
});
</script> </div>
</div>
<div class="mobile">
<canvas id="cvs" height="500" width="646" >[No canvas support]</canvas>
.
<script>
// The labels for the chart are not added by giving them to the
// chart but manually adding text to the chart.
images = [ "[REMOVED]",
"[REMOVED]",
"[REMOVED]",
"[REMOVED]",
"[REMOVED]"];
// Create the Horizontal Bar chart and configure it. With there
// being no labels on the left-hand side the margin autofit
// will make the left margin zero
bar = new RGraph.HBar({
id: 'cvs',
data: [[3.83,12.68],[8.00,12.00],[24.00,12.00],[9.5,1.25],[6.5,12.5]],
width: 700,
height: 275,
options: {
backgroundGrid: false,
xaxis: false,
yaxis: false,
yaxisLabels: ['','','','',''],
xaxisScale: false,
labelsAbove: true,
marginBottom: 10,
marginLeftAuto: false,
colors: ["#D5F7E5","#1732ac"],
corners: "round",
cornersRoundRadius: 5,
marginInner: 5,
labelsAboveSpecific: ["3.83%","12.68%","8.00%","12.00%","24.00%","12.00%","9.5%","1.25%","6.5%","12.5%"],
labelsAboveSize: "Medium",
textFont: 'Montserrat',
textBold: true,
lineHeight: 19.48,
textWeight: 700,
backgroundGridylines: false,
backgroundGridBorder: false,
xaxis: false,
yaxis: false,
yaxisScale: false,
backgroundGridDotted: true,
}
// Use the draw event to add the labels on the left-hand side
}).responsive([
{maxWidth: null,height:650,width:350,options:{textSize: 12.98, marginInner: 15,titleSize: 16,keyPositionY: 100,keyPositionGraphBoxed:false,keyBackground:'rgba(0,0,0,0)',keyPositionX: 50}},
{maxWidth: 800,height:350,width:250,options:{textSize: 8, marginInner: 5, titleSize: 10,keyPositionY: 170,keyPositionGraphBoxed: true,keyBackground:'rgba(255,255,255,0.75)',keyPositionX: 120}}
]).grow();
for (var i=0,idx=0;i<bar.coordsText.length; i+=1) {
if (bar.coordsText[i].tag == 'yaxis.labels') {
// Use the drawing API Image object to add the image instead of the
// canvas' 2D context directly. This means that the images will be redrawn
// automatically should tooltips be added to the chart later. Plus, of
// course, the drawing API image objects supports having a tooltip itself.
new RGraph.Drawing.Image({
id: 'cvs',
// Use the coordinates of the blank labels that were added in the
// chart configuration to position the image.
// x: bar.coordsText[i].x-6,
// y: bar.coordsText[i].y+5,
x: bar.coordsText[i].x-30,
y: bar.coordsText[i].y+5,
src: images[idx++],
options: {
valign: 'center',
height:77,
bold:true,
size:80,
}
}).draw();
}
}
</script>
</div>
</div>
<style>
.img_size {
float: left;
width: 220px;
margin-left: 45px;
margin-top: 15px;
}
.view .mobile {
display:none;
}
@media only screen and (max-width: 600px) and (min-width: 400px) {
.view .mobile {
display: block;
}
.view .desktop {
display: none;
}
}
@media (max-width: 1024px) {
.view .mobile {
display: block;
}
.view .desktop {
display: none;
}
}
</style>
<?php
get_footer()
?>
Posted by Richard at 13:37 on Friday 22nd July 2022 [link]
The page appears to work fine - and switches from a Bar chart to an HBar chart when the screen size reduces.
Posted by Sukh at 14:19 on Friday 22nd July 2022 [link]
Hi Sir,
I tested it. It works properly on desktop and mobile both but the border-radius of the graph property is not working..Please check how to create a border-radius of graph on desktop..
Thanks
I tested it. It works properly on desktop and mobile both but the border-radius of the graph property is not working..Please check how to create a border-radius of graph on desktop..
Thanks
Posted by Richard at 17:54 on Friday 22nd July 2022 [link]
Are you using ChartJS for the Bar chart and RGraph for the HBar chart?! It looks like you are. Funnily enough, I don't provide support for ChartJS.
Posted by sukh at 13:02 on Monday 25th July 2022 [link]
how to reduce the width of the graph strips..
<!DOCTYPE html>
<html>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<body>
<div class="view">
<div class="desktop">
<div class="chart-container" style="position: relative; "><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; inset: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
<canvas id="my_Chart" style="display: block;" width="1252" height="626"></canvas>
</div>
<!--image div-->
<div class="row" style="position: relative; ">
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]">
</noscript>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/themes/dataviz.js"></script>
<script>
// Data define for bar chart
var myData = {
labels: ["BTC", "USDT", "BTC", "USDT", "BTC", "USDT", "BTC","USDT","BTC","USDT"],
datasets: [{
backgroundColor: ["#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9"],
borderRadius: 10,
data: [ 3.83,12.68,6.52,12.5,12.00,24.00,8.00,12.00,1.25,9.5,],
}]
};
// Options to display value on top of bars
var myoption = {
legend: {display: false},
responsive: true,
// maintainAspectRatio: false,
tooltips: {enabled: false},
scales:{
yAxes: [{
gridLines:
{
borderDash: [3],
drawBorder: false,
},
display: true,
ticks: {
fontColor: "white", // this code for show left serial number here
},
}],
xAxes:[{
gridLines:{
display: false,
}
}],
},
hover: {
animationDuration: 1
},
animation: {
duration: true,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.textAlign = "top";
ctx.font = "800 20px Montserrat, sans-serif";
ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.textBaseline = "center";
ctx.fillText ("Canvas!", 0, 0);
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index] +"%";
ctx.fillText(data, bar._model.x -50, bar._model.y - 10);
});
});
}
}
};
//Code to drow Chart
var ctx = document.getElementById("my_Chart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
// Define chart type
data: myData, // Chart data
options: myoption // Chart Options [This is optional paramenter use to add some extra things in the chart].
});
</script>
</div>
</div>
<div class="mobile">
<canvas id="cvs" height="500" width="646" >[No canvas support]</canvas>
<script>
// The labels for the chart are not added by giving them to the
// chart but manually adding text to the chart.
images = [ "[REMOVED]",
"[REMOVED]",
"[REMOVED]",
"[REMOVED]",
"[REMOVED]"];
// Create the Horizontal Bar chart and configure it. With there
// being no labels on the left-hand side the margin autofit
// will make the left margin zero
bar = new RGraph.HBar({
id: 'cvs',
data: [[3.83,12.68],[8.00,12.00],[24.00,12.00],[9.5,1.25],[6.5,12.5]],
width: 700,
height: 275,
options: {
backgroundGrid: false,
xaxis: false,
yaxis: false,
yaxisLabels: ['','','','',''],
xaxisScale: false,
labelsAbove: true,
marginBottom: 10,
marginLeftAuto: false,
colors: ["#D5F7E5","#1732ac"],
corners: "round",
cornersRoundRadius: 5,
marginInner: 5,
labelsAboveSpecific: ["3.83%","12.68%","8.00%","12.00%","24.00%","12.00%","9.5%","1.25%","6.5%","12.5%"],
labelsAboveSize: "Medium",
textFont: 'Montserrat',
lineHeight: 19.48,
backgroundGridylines: false,
backgroundGridBorder: false,
xaxis: false,
yaxis: false,
yaxisScale: false,
backgroundGridDotted: true,
}
// Use the draw event to add the labels on the left-hand side
}).responsive([
{maxWidth: null,height:650,width:800,options:{textSize: 12.98, textBold:true, marginInner: 10,titleSize: 16,keyPositionY: 100,keyPositionGraphBoxed:false,keyBackground:'rgba(0,0,0,0)',keyPositionX: 50}},
{maxWidth: 800,height:350,width:800,options:{textSize: 8, textBold:true, marginInner: 5, titleSize: 10,keyPositionY: 170,keyPositionGraphBoxed: true,keyBackground:'rgba(255,255,255,0.75)',keyPositionX: 120}}
]).grow();
for (var i=0,idx=0;i<bar.coordsText.length; i+=1) {
if (bar.coordsText[i].tag == 'yaxis.labels') {
// Use the drawing API Image object to add the image instead of the
// canvas' 2D context directly. This means that the images will be redrawn
// automatically should tooltips be added to the chart later. Plus, of
// course, the drawing API image objects supports having a tooltip itself.
new RGraph.Drawing.Image({
id: 'cvs',
// Use the coordinates of the blank labels that were added in the
// chart configuration to position the image.
// x: bar.coordsText[i].x-6,
// y: bar.coordsText[i].y+5,
x: bar.coordsText[i].x-10,
y: bar.coordsText[i].y+5,
src: images[idx++],
options: {
valign: 'center',
height:77,
bold:true,
size:80,
}
}).draw();
}
}
</script>
</div>
</div>
<style>
.img_size {
float: left;
width: 180px;
margin-left: 50px;
margin-top: 15px;
}
.view .mobile {
display:none;
}
@media only screen and (max-width: 600px) and (min-width: 400px) {
.view .mobile {
display: block;
}
.view .desktop {
display: none;
}
}
@media (max-width: 1024px) {
.view .mobile {
display: block;
}
.view .desktop {
display: none;
}
}
</style>
<!DOCTYPE html>
<html>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<script src="[REMOVED]"></script>
<body>
<div class="view">
<div class="desktop">
<div class="chart-container" style="position: relative; "><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; inset: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
<canvas id="my_Chart" style="display: block;" width="1252" height="626"></canvas>
</div>
<!--image div-->
<div class="row" style="position: relative; ">
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]"></noscript>
</div>
<div class="col-md-2 img_size">
<img data-src="[REMOVED]" class=" lazyloaded" src="[REMOVED]"><noscript><img src="[REMOVED]">
</noscript>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/themes/dataviz.js"></script>
<script>
// Data define for bar chart
var myData = {
labels: ["BTC", "USDT", "BTC", "USDT", "BTC", "USDT", "BTC","USDT","BTC","USDT"],
datasets: [{
backgroundColor: ["#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9","#D5F7E5", "#1430a9"],
borderRadius: 10,
data: [ 3.83,12.68,6.52,12.5,12.00,24.00,8.00,12.00,1.25,9.5,],
}]
};
// Options to display value on top of bars
var myoption = {
legend: {display: false},
responsive: true,
// maintainAspectRatio: false,
tooltips: {enabled: false},
scales:{
yAxes: [{
gridLines:
{
borderDash: [3],
drawBorder: false,
},
display: true,
ticks: {
fontColor: "white", // this code for show left serial number here
},
}],
xAxes:[{
gridLines:{
display: false,
}
}],
},
hover: {
animationDuration: 1
},
animation: {
duration: true,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.textAlign = "top";
ctx.font = "800 20px Montserrat, sans-serif";
ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.textBaseline = "center";
ctx.fillText ("Canvas!", 0, 0);
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index] +"%";
ctx.fillText(data, bar._model.x -50, bar._model.y - 10);
});
});
}
}
};
//Code to drow Chart
var ctx = document.getElementById("my_Chart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
// Define chart type
data: myData, // Chart data
options: myoption // Chart Options [This is optional paramenter use to add some extra things in the chart].
});
</script>
</div>
</div>
<div class="mobile">
<canvas id="cvs" height="500" width="646" >[No canvas support]</canvas>
<script>
// The labels for the chart are not added by giving them to the
// chart but manually adding text to the chart.
images = [ "[REMOVED]",
"[REMOVED]",
"[REMOVED]",
"[REMOVED]",
"[REMOVED]"];
// Create the Horizontal Bar chart and configure it. With there
// being no labels on the left-hand side the margin autofit
// will make the left margin zero
bar = new RGraph.HBar({
id: 'cvs',
data: [[3.83,12.68],[8.00,12.00],[24.00,12.00],[9.5,1.25],[6.5,12.5]],
width: 700,
height: 275,
options: {
backgroundGrid: false,
xaxis: false,
yaxis: false,
yaxisLabels: ['','','','',''],
xaxisScale: false,
labelsAbove: true,
marginBottom: 10,
marginLeftAuto: false,
colors: ["#D5F7E5","#1732ac"],
corners: "round",
cornersRoundRadius: 5,
marginInner: 5,
labelsAboveSpecific: ["3.83%","12.68%","8.00%","12.00%","24.00%","12.00%","9.5%","1.25%","6.5%","12.5%"],
labelsAboveSize: "Medium",
textFont: 'Montserrat',
lineHeight: 19.48,
backgroundGridylines: false,
backgroundGridBorder: false,
xaxis: false,
yaxis: false,
yaxisScale: false,
backgroundGridDotted: true,
}
// Use the draw event to add the labels on the left-hand side
}).responsive([
{maxWidth: null,height:650,width:800,options:{textSize: 12.98, textBold:true, marginInner: 10,titleSize: 16,keyPositionY: 100,keyPositionGraphBoxed:false,keyBackground:'rgba(0,0,0,0)',keyPositionX: 50}},
{maxWidth: 800,height:350,width:800,options:{textSize: 8, textBold:true, marginInner: 5, titleSize: 10,keyPositionY: 170,keyPositionGraphBoxed: true,keyBackground:'rgba(255,255,255,0.75)',keyPositionX: 120}}
]).grow();
for (var i=0,idx=0;i<bar.coordsText.length; i+=1) {
if (bar.coordsText[i].tag == 'yaxis.labels') {
// Use the drawing API Image object to add the image instead of the
// canvas' 2D context directly. This means that the images will be redrawn
// automatically should tooltips be added to the chart later. Plus, of
// course, the drawing API image objects supports having a tooltip itself.
new RGraph.Drawing.Image({
id: 'cvs',
// Use the coordinates of the blank labels that were added in the
// chart configuration to position the image.
// x: bar.coordsText[i].x-6,
// y: bar.coordsText[i].y+5,
x: bar.coordsText[i].x-10,
y: bar.coordsText[i].y+5,
src: images[idx++],
options: {
valign: 'center',
height:77,
bold:true,
size:80,
}
}).draw();
}
}
</script>
</div>
</div>
<style>
.img_size {
float: left;
width: 180px;
margin-left: 50px;
margin-top: 15px;
}
.view .mobile {
display:none;
}
@media only screen and (max-width: 600px) and (min-width: 400px) {
.view .mobile {
display: block;
}
.view .desktop {
display: none;
}
}
@media (max-width: 1024px) {
.view .mobile {
display: block;
}
.view .desktop {
display: none;
}
}
</style>
Posted by Richard at 17:30 on Monday 25th July 2022 [link]
If this is an RGraph HBar that you're referring to then if you want to reduce the size of the bars you can increase the marginInner value.
Posted by sukh at 07:13 on Tuesday 26th July 2022 [link]
Hi..Please check my code.I need some space between images and graph..
Intially i faced this issue in this chart.but that time the images were blur. So i increased the size of the images..
now images are looking fine but there is no space between images and graph.Please let me know how to do this..
It will be better if you shared me the whole code after testing.
Thanks.
Intially i faced this issue in this chart.but that time the images were blur. So i increased the size of the images..
now images are looking fine but there is no space between images and graph.Please let me know how to do this..
It will be better if you shared me the whole code after testing.
Thanks.
Posted by sukh at 09:03 on Tuesday 26th July 2022 [link]
How to give the border radius in desktop view?
Posted by Richard at 11:46 on Tuesday 26th July 2022 [link]
> Hi..Please check my code.I need some space between images and
> graph.. Intially i faced this issue in this chart.but that time
> the images were blur. So i increased the size of the images.
> now images are looking fine but there is no space between
> images and graph.Please let me know how to do this..
> It will be better if you shared me the whole code after
> testing.
> Thanks.
Simply reduce the X coordinate of the image:
...
x: bar.coordsText[i].x - 15,
...
> How to give the border radius in desktop view?
I told you - I do not support ChartJS.
> graph.. Intially i faced this issue in this chart.but that time
> the images were blur. So i increased the size of the images.
> now images are looking fine but there is no space between
> images and graph.Please let me know how to do this..
> It will be better if you shared me the whole code after
> testing.
> Thanks.
Simply reduce the X coordinate of the image:
...
x: bar.coordsText[i].x - 15,
...
> How to give the border radius in desktop view?
I told you - I do not support ChartJS.
[Replies are now closed]