ASP.NET MVC: Bar Chart from JSON Data ViewBag

Question

I have a JSON data from database like below to build a dashboard in dashboard ASP.NET MVC. I would like to draw a daily and monthly bar chart with x-axis as datetime (Day) and y-axis as count of activities in a day.

JSON Data:

 [{"count":42,"datetime":"2020-07-18T00:00:00"},{"count":49,"datetime":"2020-07-16T00:00:00"},{"count":90,"datetime":"2020-07-14T00:00:00"},{"count":85,"datetime":"2020-07-17T00:00:00"},{"count":100,"datetime":"2020-07-13T00:00:00"},{"count":38,"datetime":"2020-07-19T00:00:00"},{"count":53,"datetime":"2020-07-15T00:00:00"}]

and i want something like this

I've tried the following javascript code but can't. JSON data obtained from ViewBag.dataItems

<script type="text/javascript" >
window.onload = function () {
 
var result = @Html.Raw(ViewBag.dataItems);
var DataItem =[];
    for (var i = 0; i < result.length; i++){
        DataItem.push({
            x: new Date(result[i].datetime),
            y: result[i].count
        });
}
var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    data: [{
        type: "column",
        DataItem: DataItem
    }]
});

chart.render();
 
};
</script>

ThankYou

Are you using canvasjs.chart, right?

Tomato32
– Tomato32

2020-07-20 04:20:12 +00:00
Commented Jul 20, 2020 at 4:20 — Tomato32
– Tomato32, Commented Jul 20, 2020 at 4:20
Yes, I am using canvas.js @Tomato32

ANder
– ANder

2020-07-20 04:36:06 +00:00
Commented Jul 20, 2020 at 4:36 — ANder
– ANder, Commented Jul 20, 2020 at 4:36
I posted the answer. You can check it, my friend.

Tomato32
– Tomato32

2020-07-20 04:49:28 +00:00
Commented Jul 20, 2020 at 4:49 — Tomato32
– Tomato32, Commented Jul 20, 2020 at 4:49
You're always welcome, my friend :d.

Tomato32
– Tomato32

2020-07-20 06:58:46 +00:00
Commented Jul 20, 2020 at 6:58 — Tomato32
– Tomato32, Commented Jul 20, 2020 at 6:58

Tomato32 · Accepted Answer · 2020-07-20 04:48:39Z

As I referred to some samples from https://canvasjs.com/docs/charts/chart-types/html5-column-chart/, they used dataPoints property instead of DataItem.

Here is a sample following your data. Hope to help, my friend :))

1. Controllers

    public ActionResult Add()
            {            
                ViewData["data"] = @"[{'count':42,'datetime':'2020-07-18T00:00:00'},{'count':49,'datetime':'2020-07-16T00:00:00'},{'count':90,'datetime':'2020-07-14T00:00:00'},{'count':85,'datetime':'2020-07-17T00:00:00'},{'count':100,'datetime':'2020-07-13T00:00:00'},{'count':38,'datetime':'2020-07-19T00:00:00'},{'count':53,'datetime':'2020-07-15T00:00:00'}]";
                return View();
            }

2. Views

    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script type="text/javascript">

        window.onload = function () {

            var result = @Html.Raw(ViewData["data"]);
            this.console.log(result);

            var DataItem = [];
            for (var i = 0; i < result.length; i++) {
                DataItem.push({
                    x: new Date(result[i].datetime),
                    y: result[i].count
                });
            }
            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                title: {
                    text: "Date Time Formatting"   
                },
                data: [{
                    type: "column",
                    dataPoints: DataItem
                }]
            });

            chart.render();
    
}
    </script>

Collectives™ on Stack Overflow

ASP.NET MVC: Bar Chart from JSON Data ViewBag

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related