Histogram in Asp.net using Canvas.js

Question

I want to create histogram with Machine names on X axis and observations on Y axis using canvas.js. Thanks.

Garishma G · Answer

Before creating the chart, you need to include CanvasJS Script in the header. "https://canvasjs.com/assets/script/canvasjs.min.js" > Once the script is added, you are ready to go. Create a div element inside the body and set its id as chartContainer. This is where the chart gets rendered. "chartContainer" > Now add the following script just below the div or inside the head tag in the page. We are basically creating the chart inside window’s onload event. "text/javascript" > window.onload = function () { var chart = new CanvasJS.Chart( "chartContainer" , { theme: "light2" , animationEnabled: true , title: { text: "Simple Column Chart in ASP.NET MVC" }, subtitles: [ { text: "Try Resizing the Browser" } ], data: [ { type: "column" , //change type to bar, line, area, pie, etc dataPoints: [ { x: 10, y: 71 }, { x: 20, y: 55 }, { x: 30, y: 50 }, { x: 40, y: 65 }, { x: 50, y: 95 }, { x: 60, y: 68 }, { x: 70, y: 28 }, { x: 80, y: 34 }, { x: 90, y: 14 } ] } ] }); chart.render(); }; Build and Run the solution to see the chart Resource: https://canvasjs.com/docs/charts/integration/asp-net-mvc-charts/

Rajanikant Hawaldar · Answer

this may help you to create your histogram. https://jsfiddle.net/6y0mqL1r/

Histogram in Asp.net using Canvas.js

Answers (2)