HTML code not functioning properly on Brizy builder
I'm trying to add a gauge to my Brizy website. The HTML code works fine on html code testing websites. For some reason the black "Caution" and "Stable" doesn't show up when I transfer this code into the shortcode block in Brizy. Also, when I use a standard shortcode block in Bluehost the code works fine. Here's the code. Any ideas why it isn't working properly in Brizy? I was thinking of doing the pro membership but now I'm worried that there are bugs.
<html>
<head>
<title>Charts Gauge Example</title>
</head>
<body>
<style>
.chart_cont{
background:#000;
width:600px;
height:400px;
margin:0 auto;
color:#000000;
font-size:50px;
font-weight:bold;
}
.first{
padding: 143px 0 0 138px;
position: absolute;
z-index: 9;
width: 183px;
-webkit-transform: rotate(-29deg);
-moz-transform: rotate(-29deg);
}
.second{
padding: 0px 0 0 236px;
position: absolute;
z-index: 9;
width: 183px;
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
}
.third{
margin: 97px 0px 0 253px;
position: absolute;
z-index: 9;
width: 183px;
transform: rotate(94deg);
-webkit-transform: rotate(94deg);
-moz-transform: rotate(94deg);
}
</style>
<div class="chart_cont" id="chart_cont">
<div class="first">
<svg viewBox="0 0 500 500">
<path id="curve" fill="transparent" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
<text width="500">
<textPath xlink:href="#curve" id="first">
</textPath>
</text>
</svg>
</div>
<div class="second">
<svg viewBox="0 0 500 500">
<path id="curve" fill="transparent" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
<text width="500">
<textPath xlink:href="#curve" id="second">
</textPath>
</text>
</svg>
</div>
<div class="third">
<svg viewBox="0 0 500 500">
<path id="curve" fill="transparent" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
<text width="500">
<textPath xlink:href="#curve" id="third">
</textPath>
</text>
</svg>
</div>
<div id="chart" data-label='default' style="width: 100%; height: 400px;"></div>
</div>
<script src="https://echarts.apache.org/examples/vendors/echarts/echarts.min.js"></script>
<script>
var stop_on = 75;
var title = 'Housing Market Health';
var labels = ["Caution", "Stable", "Healthy"];
document.getElementById('first').innerHTML = labels[0];
document.getElementById('second').innerHTML = labels[1];
document.getElementById('third').innerHTML = labels[2];
function detectionData(str, total) {
var color = '#000000';
var div_val = total/3;
if (str >= div_val+1 && str <= div_val*2) {
color = '#F37B1D';
} else if (str >= div_val*2+1) {
color = '#dd514c';
}
return color;
}
function detectionName(val, total){
var div_val = total/3;
if(val<=div_val){ var name = labels[0];}
else if(val>=div_val+1 && val<=div_val*2 ){ var name = labels[1];}
else if(val>=div_val*2+1){ var name = labels[2];}
return name;
}
var stop_now = false;
var mychart = document.getElementById('chart');
gChart = echarts.init(mychart);
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show : false,
feature : {
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
title:{
show:true,
offsetCenter:[0,'30%'],
color:'#ffffff',
fontWeight:'bold',
fontSize:24,
},
axisLine: {
"lineStyle": {
"color": [
[0.334, "#ff0000"],
[0.667, "#FFFF00"],
[1, "#00ff00"]
],
},
},
splitLine: {
"lineStyle": {
"color": "#ffffff",
"width": 2
},
"length": -25,
"splitNumber": 1,
},
axisTick: {
"lineStyle": {
"color": "#ffffff",
"width": 2
},
"length": -15,
},
axisLabel: {
"distance": -15,// Distancia adonde pone los valores
"textStyle": {
"color": "ffffff"
},
show:false
},
clockwise:true,
startAngle:180,
endAngle:0,
pointer:{
show:true,
},
name:'Business Indicators',
type:'gauge',
center: ['50%', '56%'],
min: 0,
max: 99,
detail : {
color:'#ffffff',
offsetCenter:[1,-40],
formatter:'{value}'
},
data:[{value:0, name: title}]
}]
};
//Add this to have the data changed every two seconds
setInterval(function () {
var val = (Math.random() * 110).toFixed(0) - 0;
option.series[0].data[0].value = 15;
if(stop_now == false){gChart.setOption(option, true);if(val>=stop_on) stop_now = true;}
},0);
</script></body>
-
Try using the Embed element in Brizy. Not the Shortcode element..
Also if you can't see the code displayed in the builder, save the page and check the front end. It usually show ok in the front end.
Look, I've put your code in the builder and looks like this: https://jmp.sh/RatESQX
And on the front end: https://jmp.sh/MbIHA54
Hope this helps.
0
Please sign in to leave a comment.
Comments
1 comment