Draw a graph with database data RRS feed

  • Question

  • User-163542604 posted

    Hi everyone 

    I am building a web app using ASP.NET Razor Pages & Entity Framework with the end product being a monthly chart that users can edit / view / export as a PDF.

    I am not familiar with building UI - The monthly chart - has elements I d read from the DB and want to draw it on a x , y axis graph. This element can be dragged and dropped and the values would be saved in the database.  

    Could I pls get some ideas on starting points for UI frameworks for drawing similar objects on the web page. 

    Any tutorials / approaches or discussions that can shared also would be great! Thanks a bunch in advance. 


    Thursday, November 1, 2018 7:03 PM

All replies

  • User839733648 posted

    Hi archer2018,

    According to your description, I suggest that Chart.js may be a good choice for you to show the data.

    Chart.js is a simple yet flexible JavaScript charting for designers & developers.

    There're several types you could choose to show your datas.

    You've said that you want to draw it on a x , y axis graph, I think you could set the type as bar or line.

    • A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.

    • A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.

    For more about Chart.js, you could refer to the official site: https://www.chartjs.org/ 

    There's tutorial, samples and source code of each type on it.

    The online reference of Chart.js, you could refer to: https://cdnjs.com/libraries/Chart.js 

    Hope these will be helpful to you.

    Best Reagrds,


    Friday, November 2, 2018 7:07 AM
  • User1290358704 posted

    Another idea is to generate an SVG image, for example using Chartist.JS

    Monday, November 5, 2018 9:31 PM