razor - Asp.net MVC and Chart js -
i want show data comes databse chart.js
.
in asp.net mvc have controller retrieves data database , shows them in view following code:
@foreach(var items in model) { <h6>@items.title</h6> <h6>@items.cuntr</h6> }
how can show @items.title
, @items.cuntr
in chart.js
? lot.
take @ link: http://www.c-sharpcorner.com/article/create-free-charts-using-chart-js-in-asp-net-mvc/ describes relevant steps work charts in mvc.
let controller method:
public actionresult index() { viewbag.data = "value,value1,value2,value3"; //list of strings need show on chart. mentioned in example c-sharpcorner viewbag.objectname = "test,test1,test2,test3"; }
you can return data in view bag , pass them data property oif chart:
and view:
@{ layout = null; } <!doctype html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>charts</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.2.2/chart.bundle.min.js"></script> <script> var barchartdata = { labels: [@html.raw(viewbag.objectname)], //the names displayed on x-axis, see images below datasets: [{ label: 'productwise sales count', backgroundcolor: [ "#f990a7", "#aad2ed", "#9966ff", "#99e5e5", "#f7bd83", ], borderwidth: 2, data: [@viewbag.data] //what returned controller. values displayed on y-axis, see images below }] }; window.onload = function () { var ctx1 = document.getelementbyid("barcanvas").getcontext("2d"); window.mybar = new chart(ctx1, { type: 'bar', data: barchartdata, options: { title: { display: true, text: "productwise sales count" }, responsive: true, maintainaspectratio: true } }); } </script> </head> <body> <div style="text-align: center"> <canvas id="barcanvas"></canvas> </div> <div style="text-align: center"> disclaimer:- data demo not real data wont relate company </div> </body> </html>
Comments
Post a Comment