1

Here I am trying to plot a graph in css. Finally I ended up with this output with only one value. But I need to plot the values for both x and y axis. Like a scattered graph. How can I do that. I shouldnot use any library or any other plugins restricted only to HTML and CSS. Can anyone please help me to do that. Thanks in advance.

@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700);
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;   
}
body {
  background: #1f253d;
}

ul {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
}

 
  .font-color {
    color: #9099b7;
  }
    .block {
      margin: 25px 25px 0 0;
      background: #394264;
      border-radius: 5px;
      float: left;
      width: 300px;
      overflow: hidden;
    }
   
      .line-chart-block, {
        height: 400px;
      }
       .line-chart {
          height: 200px;
          background: #11a8ab;
        }

.graph {
  padding: 2rem 1rem 1rem;
  width: 100%;
  height: 100%;
  position: relative;
  color: #fff;
  font-size: 80%;
}
.graph span {
  display: block;
  position: absolute;
  bottom: 3rem;
  left: 2rem;
  height: 0;
  border-top: 2px solid;
  transform-origin: left center;
}
.graph span > span {
  left: 100%; bottom: 0;
}
[data-value='25'] {width: 95px; transform: rotate(-45deg);}
[data-value='8'] {width: 24px; transform: rotate(65deg);}
[data-value='13'] {width: 39px; transform: rotate(-45deg);}
[data-value='5'] {width: 15px; transform: rotate(50deg);}
[data-value='23'] {width: 69px; transform: rotate(-70deg);}
[data-value='12'] {width: 36px; transform: rotate(75deg);}
[data-value='15'] {width: 45px; transform: rotate(-45deg);}

[data-value]:before {
  content: '';
  position: absolute;
  display: block;
  right: -4px;
  bottom: -3px;
  padding: 4px;
  background: #fff;
  border-radius: 50%;
}

[class^='plot-'] {
  position: absolute;
  left: 0;
  bottom: 0rem;
  width: 100%;
  padding: 1rem 1rem 0 2rem;
  height: 80%;
}
.plot-x {
  height: 2.5rem;
}
.plot-y li {
  height: 25%;
  border-top: 1px solid #777;
}
[data-plotY]:before {
  content: attr(data-plotY);
  display: inline-block;
  width: 2rem;
  text-align: right;
  line-height: 0;
  position: relative;
  left: -2.5rem;
  top: -.5rem;
} 
.plot-x li {
  width: 33%;
  float: left;
  text-align: center;
}
<html>
<head> <title> graph </title>
<h1 style="color:#ffffff">Linear Graph</h1>
<link rel="stylesheet" href="graph.css" type="text/css" />
</head>
<body>
<!-- plotting graph-->
  <div class="line-chart-block block">
    <div class="line-chart">
      <div class='graph'>
        <ul class='plot-y'>
          
          <li data-plotY='30'></li>
          <li data-plotY='20'></li>
          <li data-plotY='10'></li>
          <li data-plotY='0'></li>
          
        </ul>
        <ul class='plot-x'>
          <li>10</li>
          <li>20</li>
          <li> 30</li>
        </ul>
        <span data-value='25'>
           <span data-value='8'>
             <span data-value='13'>
               <span data-value='5'>   
                 <span data-value='23'>   
                 <span data-value='12'>
                     <span data-value='15'>
                     </span></span>
        </span>
        </span>
        </span>
        </span>
        </span>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Improve this question
4
  • Your graph is already in x and y axis. Commented Aug 8, 2017 at 5:23
  • @hunzaboy I have to give both the x and y axis values. In that snippet I have only one value. Commented Aug 8, 2017 at 5:34
  • You are giving the y values using the data-plotY . Any circle you have in the graph has both the values. Let me know if i am missing anything here. Commented Aug 8, 2017 at 5:46
  • @hunzaboy I have taken only one value for plotting. But I need to plot with 2 values like (x,y)=(10,20) Commented Aug 8, 2017 at 5:51
Related questions
4
How do you create graphs in web apps?
8
CSS bar graph - very simple
0
Display a graph given (X,Y) tuple
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.