0
Does anyone know if there is a form of making bar or line charts using CSS and HTML?
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 javascript html5 css3
You are not signed in. Login or sign up in order to post.
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
– Victor Stafusa
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
– Victor Stafusa
Take this example: http://codepen.io/Kseso/pen/phiyL
– Taisbevalle
@Taisbevalle Excellent that link. :)
– Victor Stafusa