JavaScript Charting Frameworks - xerocrypt/Misc GitHub Wiki

In ASP.NET MVC 5, the frameworks are imported using:

@Scripts.Render("~/amcharts/amcharts.js")

@Scripts.Render("~/amcharts/serial.js")

@Scripts.Render("~/Scripts/jquery-3.1.1.js")

@Scripts.Render("~/amcharts/plugins/dataloader/dataloader.min.js")

@Scripts.Render("~/amcharts/themes/appcolours.js")

@Scripts.Render("~/Scripts/Chart.js")

Declare a new instance of AmCharts:

chart1 = new AmCharts.makeChart("chartdiv",

{

"type": "serial",

"theme": "appcolours",

"dataLoader":

{

"url": "/api/prMessagesProcessedByDay_Result/",

"format": "json",

"async": true

}

This section of code determines the data source (Web API /api/prMessagesProcessedByDay_Result/), and which HTML element the chart is to be displayed in (chartdiv)

Uses jQuery to make the AJAX request to get the JSON response.

$.ajax({

url: "/api/prMessagesProcessedByDay_Result/",

method: "GET",

success: function (data) {

console.log(data);

var myDate = [];

var myMessages = [];

for (var i in data) {

myDate.push("Date: " + data[i].Date);

myMessages.push(data[i].MessagesProcessed);

}

The following code determines the type of chart to be displayed, and which HTML element the chart is to be displayed in:

var ctx = $("#mycanvas2");

var barGraph = new Chart(ctx, {

type: 'bar',

data: chartdata

});

AMCHARTS. 2017. JavaScript Charts & Maps. [WWW]. www.amcharts.com. 19th April 2017.

CHART.JS. 2017. Chart.js. API Documentation. [WWW]. www.chartjs.org/docs/. 19th April 2017.