[Fork] Scroll Area Chart by FusionCharts | C# Online Compiler

[Fork] Scroll Area Chart by FusionCharts by Minh Ngo - Leo

using System;
using System.ComponentModel.DataAnnotations;

namespace FusionChartsSamples
{
	public class SampleViewModel
	{
	}
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
​
namespace FusionChartsSamples
{
    public class SampleViewModel
    {
    }
}

@model FusionChartsSamples.SampleViewModel
@{
  Layout = null;
}
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas { 
      background-color : #eee;
    }
  </style>
</head>
<body>
<div>
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  var title = @Html.Raw(Json.Encode(ViewData["title"]));
  var labels = @Html.Raw(Json.Encode(ViewData["labels"]));
  var values = @Html.Raw(Json.Encode(ViewData["values"]));
  const ctx = document.getElementById('myChart');
  
  console.log(labels[0])
  console.log(values[0])

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: [title],

      datasets: [{
        label: [labels[0]],
        data: [values[0]],
        backgroundColor: ['rgb(0, 255, 0)']
      }, {
	    label: [labels[1]],
        data: [values[1]],
        backgroundColor: ['rgb(255, 0, 0)']
	  }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
          ticks: {
          stepSize: 1,
          // Include a dollar sign in the ticks
          callback: function(value, index, ticks) {
              return value + ' images';
            }
          }
        }
      },
      responsive: false,
	  plugins: {
            title: {
                display: true,
                text: title
            }
        }
    }
  });
</script>

</body>
</html>

View

 
@model FusionChartsSamples.SampleViewModel
@{
  Layout = null;
}
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas { 
      background-color : #eee;
    }
  </style>
</head>
<body>
<div>
  <canvas id="myChart" width="600" height="400"></canvas>
</div>
​
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  var title = @Html.Raw(Json.Encode(ViewData["title"]));
  var labels = @Html.Raw(Json.Encode(ViewData["labels"]));
  var values = @Html.Raw(Json.Encode(ViewData["values"]));
  const ctx = document.getElementById('myChart');
  
  console.log(labels[0])
  console.log(values[0])
​
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: [title],
​
      datasets: [{
        label: [labels[0]],
        data: [values[0]],
        backgroundColor: ['rgb(0, 255, 0)']
      }, {
        label: [labels[1]],
        data: [values[1]],
        backgroundColor: ['rgb(255, 0, 0)']
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
          ticks: {
          stepSize: 1,
          // Include a dollar sign in the ticks
          callback: function(value, index, ticks) {
              return value + ' images';
            }
          }
        }
      },
      responsive: false,
      plugins: {
            title: {
                display: true,
                text: title
            }
        }
    }
  });
</script>
​
</body>
</html>

using System;
using System.Web.Mvc;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using System.Data;

namespace FusionChartsSamples
{
	public class HomeController : Controller
	{
		public ActionResult Index()
		{
			string title = "Classification of quality of uploaded images";
			string[] labels = {"Useful", "Useless"};
			float[] values = {3.0f, 1.0f};
			ViewData["title"] = title;
			ViewData["labels"] = labels;
			ViewData["values"] = values;
			
			return View();
		}
	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using System.Data;
​
namespace FusionChartsSamples
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            string title = "Classification of quality of uploaded images";
            string[] labels = {"Useful", "Useless"};
            float[] values = {3.0f, 1.0f};
            ViewData["title"] = title;
            ViewData["labels"] = labels;
            ViewData["values"] = values;
            
            return View();
        }
    }
}

View in Full Screen

View IL Code