Graphics with HTML and CSS

Asked

Viewed 1,189 times

0

Does anyone know if there is a form of making bar or line charts using CSS and HTML?

  • 1

    With the canvas, I’ve even made game with animations, characters walking up and down and fighting, sounds and everything. Bar and line charts are easy. For an idea, see this: http://answall.com/q/99995/132

  • 1

    You can do it with SVG as well. To get an idea, check out this question I answered almost two years ago: http://answall.com/q/58719/132

  • 1

    Take this example: http://codepen.io/Kseso/pen/phiyL

  • 1

    @Taisbevalle Excellent that link. :)

1 answer

2

Carlos, although it’s possible to do it from scratch, you can use d3js as a starting point for your graphics.

Take an example:

var data = [
	{"key":"Stream #0","values":[
		{"x":0,"y":0.14090541293475303},
		{"x":1,"y":0.18577189134868652},
		{"x":2,"y":0.17080494531362053},
		{"x":3,"y":0.11943955279666824},
		{"x":4,"y":0.12973567147943157},
		{"x":5,"y":0.14638145776456224},
		{"x":6,"y":0.16149379899349633},
		{"x":7,"y":0.13926904239580462},
		{"x":8,"y":0.1834697636052203},
		{"x":9,"y":0.17595684858191474},
		{"x":10,"y":0.2329394353357669},
		{"x":11,"y":0.5118096038931783},
		{"x":12,"y":1.0604245910128074},
		{"x":13,"y":1.933431270315826},
		{"x":14,"y":2.6860729715445872},
		{"x":15,"y":3.076926232520845},
		{"x":16,"y":2.6498994752803133},
		{"x":17,"y":1.8644784354019341},
		{"x":18,"y":0.9666636940028317},
		{"x":19,"y":0.5401218367797567},
		{"x":20,"y":0.27854949515284794},
		{"x":21,"y":0.16574099526914662},
		{"x":22,"y":0.118347820270082},
		{"x":23,"y":0.11664119595071204},
		{"x":24,"y":0.19678126522080203},
		{"x":25,"y":0.15486774367158815},
		{"x":26,"y":0.19992047674686325},
		{"x":27,"y":0.17490783895837436},
		{"x":28,"y":0.15495825192553067},
		{"x":29,"y":0.10433995600831547},
		{"x":30,"y":0.14669215112248235},
		{"x":31,"y":0.12447128914865549},
		{"x":32,"y":0.1192817679403776},
		{"x":33,"y":0.15624403631652425},
		{"x":34,"y":0.1893867054355094},
		{"x":35,"y":0.123245827602213},
		{"x":36,"y":0.18922970519604806},
		{"x":37,"y":0.2766569466840088},
		{"x":38,"y":0.31638815979932666},
		{"x":39,"y":0.6465078636019758},
		{"x":40,"y":1.9040041688426101}
	]},{"key":"Stream #1","values":[
		{"x":0,"y":0.17426994759671852},
		{"x":1,"y":0.10907499905207074},
		{"x":2,"y":0.10435252778995735},
		{"x":3,"y":0.12619510522351818},
		{"x":4,"y":0.18649217576614804},
		{"x":5,"y":0.18443306535741213},
		{"x":6,"y":0.3777703694326517},
		{"x":7,"y":2.0217406217331124},
		{"x":8,"y":1.6460467361289448},
		{"x":9,"y":0.27637711590172165},
		{"x":10,"y":0.198215584506859},
		{"x":11,"y":0.4004557998016823},
		{"x":12,"y":1.0247250727963602},
		{"x":13,"y":2.0843574501067437},
		{"x":14,"y":2.905857836386078},
		{"x":15,"y":2.6005647975393367},
		{"x":16,"y":1.5810196661102656},
		{"x":17,"y":0.6686311036976872},
		{"x":18,"y":0.24740221938316848},
		{"x":19,"y":0.18911969272630683},
		{"x":20,"y":0.1425571773266894},
		{"x":21,"y":0.11190958629159675},
		{"x":22,"y":0.12860216397113625},
		{"x":23,"y":0.17270310562174815},
		{"x":24,"y":0.14561326892569426},
		{"x":25,"y":0.15468589134148195},
		{"x":26,"y":0.196300325696928},
		{"x":27,"y":0.12118193006162786},
		{"x":28,"y":0.1831280804553052},
		{"x":29,"y":0.18270541067403961},
		{"x":30,"y":0.19086790078401172},
		{"x":31,"y":0.15192921704834383},
		{"x":32,"y":0.14421553394637374},
		{"x":33,"y":0.13390583368632358},
		{"x":34,"y":0.1293233211328334},
		{"x":35,"y":0.1886456357493779},
		{"x":36,"y":0.13139777506605704},
		{"x":37,"y":0.11170526366555747},
		{"x":38,"y":0.14239031566724206},
		{"x":39,"y":0.11818122725007174},
		{"x":40,"y":0.12077580185646089}
	]},{"key":"Stream #2","values":[
		{"x":0,"y":1.471846920511301},
		{"x":1,"y":2.8635730740336283},
		{"x":2,"y":0.1807350063665113},
		{"x":3,"y":0.1312445606782827},
		{"x":4,"y":0.14595662951702215},
		{"x":5,"y":0.25345667757071944},
		{"x":6,"y":1.681610490109687},
		{"x":7,"y":4.003584708765116},
		{"x":8,"y":1.2059311924153562},
		{"x":9,"y":0.9957121406657582},
		{"x":10,"y":1.1137190676588569},
		{"x":11,"y":1.1599930566049557},
		{"x":12,"y":0.9822084432919056},
		{"x":13,"y":0.7090343360228986},
		{"x":14,"y":0.4667308209714948},
		{"x":15,"y":0.3484988495410293},
		{"x":16,"y":0.23859373234594328},
		{"x":17,"y":0.1480619616245796},
		{"x":18,"y":0.19800772466465164},
		{"x":19,"y":0.10705030343081774},
		{"x":20,"y":0.1431810013595271},
		{"x":21,"y":0.18318093987617048},
		{"x":22,"y":0.10239602637228065},
		{"x":23,"y":0.12065693419532393},
		{"x":24,"y":0.10003387292829696},
		{"x":25,"y":0.15916390690992038},
		{"x":26,"y":0.15227389945671005},
		{"x":27,"y":0.1899390225921103},
		{"x":28,"y":0.18514730614271888},
		{"x":29,"y":0.16024815842184467},
		{"x":30,"y":0.13480139514028672},
		{"x":31,"y":0.1783542272146158},
		{"x":32,"y":0.15965861459525177},
		{"x":33,"y":0.1642077190994105},
		{"x":34,"y":0.1657098856135402},
		{"x":35,"y":0.19205326932283684},
		{"x":36,"y":0.12144715851166372},
		{"x":37,"y":0.13237318849423438},
		{"x":38,"y":0.1762539956553613},
		{"x":39,"y":0.1525422773161735},
		{"x":40,"y":0.19945005704289856}
	]}
];

nv.addGraph(function() {
    var chart = nv.models.multiBarChart()
      .transitionDuration(350)
      .reduceXTicks(true)
      .rotateLabels(0)
      .showControls(true)
      .groupSpacing(0.1);
	  
    chart.xAxis.tickFormat(d3.format(',f'));
    chart.yAxis.tickFormat(d3.format(',.1f'));
    d3.select('#chart1 svg').datum(data).call(chart);
    nv.utils.windowResize(chart.update);
    return chart;
});

//Generate some nice data.
function exampleData() {
  return stream_layers(3,10+Math.random()*100,.1).map(function(data, i) {
    return {
      key: 'Stream #' + i,
      values: data
    };
  });
}
<script src="http://nvd3.org/assets/lib/d3.v3.js"></script>
<script src="http://nvd3.org/assets/js/nv.d3.js"></script>
<div id="chart1">
  <svg width="960" height="500"></svg>
</div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.