Creating Charts from CSV Data

With CanvasJS, you can easily create charts from CSV in your ASP.NET MVC Application. Comma Separated Value (CSV) stores the tabular data in plain-text format with a separator between each column and new line between every row.

If you haven’t already, please refer to this tutorial for step by step instruction of adding charts to your ASP.Net MVC Application. We recommend that you download the Sample Visual Studio Project and try it on your own to understand the API better.


Download ASP.Net MVC Chart Samples

We will be using below CSV format in this example:

5,9
6,9
7,14
8,12
9,14
10,18
11,13
12,8
13,11
14,13

Here is the code for creating Charts from CSV. We will get CSV Data using AJAX call (jQuery) and convert the same to CanvasJS supported format (Please refer to Working with Data). Then we will initialize a chart and pass the dataPoints to to be rendered.

var dataPoints = [];

function getDataPointsFromCSV(csv) {
	 var dataPoints = csvLines = points = [];
	   csvLines = csv.split(/[\r?\n|\r|\n]+/);         
	        
	         for (var i = 0; i < csvLines.length; i++)
	        	if (csvLines[i].length > 0) {
	        	    points = csvLines[i].split(",");
	                  dataPoints.push({ 
	                        x: parseFloat(points[0]), 
	                        y: parseFloat(points[1]) 		
	                });
	         }
	return dataPoints;
}
	 
$.get("/home/csv/", function(data) {
      var chart = new CanvasJS.Chart("chartContainer", {
		title: {
		    text: "CanvasJS Charts in ASP.NET MVC using CSV & AJAX",
		},
		data: [{
		     type: "line",
		     dataPoints: getDataPointsFromCSV(data)
		  }]
	});
		
      chart.render();

});

Finalising

To summarize, in order to create a charts from CSV, we just need to parse the data to CanvasJS supported format and then pass the dataPoints to the chart.

  Also See:     

@{
     Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
    <h1>Create Chart from CSV</h1>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>

    <script type="text/javascript">

    window.onload = function () {
        var dataPoints = [];

        function getDataPointsFromCSV(csv) {
            var dataPoints = csvLines = points = [];
            csvLines = csv.split(/[\r?\n|\r|\n]+/);

            for (var i = 0; i < csvLines.length; i++)
                if (csvLines[i].length > 0) {
                    points = csvLines[i].split(",");
                    dataPoints.push({
                        x: parseFloat(points[0]),
                        y: parseFloat(points[1])
                    });
                }
            return dataPoints;
        }

        $.get("/home/csv/", function (data) {
            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                theme: "light2",//light1
                title: {
                    text: "CanvasJS Charts in ASP.Net MVC using CSV & AJAX",
                },
                data: [{
                    type: "line",
                    dataPoints: getDataPointsFromCSV(data)
                }]
            });

            chart.render();

        });
    };
    </script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ASPNET_MVC_Samples.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        public ContentResult CSV()
        {
            double count = 50, y = 10;
            string csv = "";

            Random random = new Random(DateTime.Now.Millisecond);

            for (int i = 0; i < count; i++)
            {
                y = y + (random.Next(0, 20) - 10);
                csv += i.ToString() + "," + y.ToString() + "\n";
            }

            return Content(csv);
        }

    }
}
If you have any questions, please feel free to ask in our forums.Ask Question