Bogdan Bogdan - 6 months ago 14
CSS Question

Flowcharts (pie and vertical)

I have been searching for some days on internet a way to make flow charts(pie and vertical) using html and css, but I didn't find anything.Did someone make these types of charts in html and css and could help me ?

Finally I found a way to do this charts but I want the values to be the values computed on servlet side.For vertical pie is working but for pie chart no(nothing displayed).Also I want the scale to be at my max value (("${sumC}")=2000),now it is at 60.
Could anyone hep me with thos problems?
Thank you very much!

Here is my servlet code:

public class ListaCumparaturi extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");


try{
...
request.setAttribute("sumG", sumG);
request.setAttribute("sumCa", sumCa);
request.setAttribute("sumP", sumP);
request.setAttribute("sumC", sumC);

}
catch (Exception e2)
{
e2.printStackTrace();
}
finally
{
out.close();
}
}
}


Here is the js code:

<form action= "listacumparaturi" method="get">
<canvas width="1000" height="1000" id="myCanvas"></canvas>


var x= "${sumC}" ;
var y= "${sumG}" ; var z= "${sumP}" ; var w= "${sumCa}" ; total = "${sumT}";


var vertical = {
Calorii: x,
Grasimi: y,
Proteine: z,
Carbo: w
};
var data = Object.keys(vertical);


var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";


total = "${sumT}";



color = ['red', 'blue', 'yellow','green','black'];
start = 0;

for (var i = 0; i < data.length; i++) {

ctx.fillRect((i * 60) + 50, 100, 10, -(vertical[data[i]]));
ctx.font = "9px Arial";
ctx.fillText(data[i], (i * 60) + 51, 112);
ctx.fillText((700 * i), 30, ((20 * -i) + 100));

ctx.beginPath();
ctx.moveTo(600, 150);
ctx.arc(600, 150, 150, start, start +
(Math.PI * 2 * (vertical[data[i]] / total)), false);
ctx.lineTo(600, 150);
ctx.fillStyle = color[i];
ctx.fill();
start += Math.PI * 2 * (vertical[data[i]] / total);


}
</script>
</form>

Answer

It is possible to build customm charts with HTML and CSS3 canvas.

I have created one sample codepen URL for reference.

http://codepen.io/nagasai/pen/EyjJLy

You can update your own data and build start charts from there

HTML:

Javascript:

      //sample data object

      var vertical = {
        a: 10,
        b: 20,
        c: 40
      };
      var data = Object.keys(vertical);

      total = 0;
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.fillStyle = "blue";
      for (var i = 0; i < data.length; i++) {

        total = total + vertical[data[i]];

      }

      color = ['red', 'blue', 'yellow'];
      start = 0;

      for (var i = 0; i < data.length; i++) {

        ctx.fillRect((i * 60) + 50, 100, 10, -(vertical[data[i]]));
        ctx.font = "9px Arial";
        ctx.fillText(data[i], (i * 60) + 51, 112);
        ctx.fillText((20 * i), 30, ((20 * -i) + 100));

        ctx.beginPath();
        ctx.moveTo(600, 150);
        ctx.arc(600, 150, 150, start, start +
          (Math.PI * 2 * (vertical[data[i]] / total)), false);
        ctx.lineTo(600, 150);
        ctx.fillStyle = color[i];
        ctx.fill();
        start += Math.PI * 2 * (vertical[data[i]] / total);
      }

Hope this is helpful for you :)