CODEWITHSUNDEEP
jquerycssajaxgraphlivegraph
Svein Rikard Semb
Svein Rikard Semb

Reputation: 53

live CSS half pie graph in local website

I want to create a half pie graph using CSS, i have a code where i adjust the graph using a data from my database, trough {{temp_f}}. The trouble is that i have to refresh the page to see changes. I have been looking at jquery ajax to automatic update data but cant find a solution. Anyone have a idea on how to do it? 

.pie {
  margin: auto;
  position: relative;
  width: 200px;
  height: 100px;
  border-radius: 200px 200px 0 0;
  overflow: hidden;
}

.pie::after {
  transform: rotate( {{temp_x}}deg);  /*  set rotation degree  */
  background: linear-gradient(to right, rgba(51, 102, 255, 1) 50%, rgba(255, 0, 0, 1) 100%);
  transform-origin: center bottom;
}

.pie::before {
  border: 2px solid black;
}

.pie .overlay {
  top: 8px;  /*  match border width  */
  left: 8px;  /*  match border width  */
  width: calc(100% - 16px);  /*  match border width times 2  */
  height: calc(200% - 10px);  /*  match border width times 2  */
  border-radius: 100%;
  background: #062F43;
  z-index: 1;  /*  move it on top of the pseudo elements  */
}

.pie *,
.pie::before,
.pie::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  box-sizing: border-box;
}
<div class="pie">
  <span class="overlay"></span>
</div>

Upvotes: 3

Views: 163

Answers (1)

Temani Afif
Temani Afif

Reputation: 273523

You can consider a CSS variable for the degree that you can easily adjust using JS then you can use this code within an AJAX call:

var pie = document.querySelector('.pie');
pie.style.setProperty("--rot", "80deg");
.pie {
  margin: auto;
  position: relative;
  width: 200px;
  height: 100px;
  border-radius: 200px 200px 0 0;
  overflow: hidden;
  --rot: 90deg;
}

.pie::after {
  transform: rotate(var(--rot));
  /*  set rotation degree  */
  background: linear-gradient(to right, rgba(51, 102, 255, 1) 50%, rgba(255, 0, 0, 1) 100%);
  transform-origin: center bottom;
}

.pie::before {
  border: 2px solid black;
}

.pie .overlay {
  top: 8px;
  /*  match border width  */
  left: 8px;
  /*  match border width  */
  width: calc(100% - 16px);
  /*  match border width times 2  */
  height: calc(200% - 10px);
  /*  match border width times 2  */
  border-radius: 100%;
  background: #062F43;
  z-index: 1;
  /*  move it on top of the pseudo elements  */
}

.pie *,
.pie::before,
.pie::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  box-sizing: border-box;
}
<div class="pie">
  <span class="overlay"></span>
</div>

Upvotes: 3

Related Questions