1
Answer

How to Make inspinia chart based on chart.js dynamic in mvc5

Did anybody use INSPINIA Theme in MVC and make its charts dynamic as to retrieve data from the database and display it through charts?
 
What help I am looking for is what to add in the controller and then use it in data field of graph:
  1. @Scripts.Render("~/plugins/flot")   
  2. <script type="text/javascript">   
  3. $(document).ready(function () {   
  4. var barOptions = {  
  5. series: {   
  6.       bars: {  
  7.             show: true,   
  8.             barWidth: 0.6,   
  9.             fill: true, fillColor: {   
  10.                colors: [{ opacity: 0.8 },   
  11.                         { opacity: 0.8 }] } } },   
  12.                         xaxis: { tickDecimals: 0 },   
  13.                         colors: ["#1ab394"],  
  14.             grid: {color: "#999999",   
  15.             hoverable: true,   
  16.             clickable: true,   
  17.             tickColor: "#D4D4D4", borderWidth: 0 },  
  18. legend: { show: false },   
  19.    tooltip: true,   
  20.    tooltipOpts: {content: "x: %x, y: %y" } };   
  21. var barData = {label: "bar",  
  22. data: [ ** //What to use here? To replace this data? and get date from Database**   
  23. [1, 40], [2, 25], [3, 19], [4, 34], [5, 32], [6, 22] ] };   
  24. $.plot($("#flot-bar-chart"), [barData], barOptions);   
  25. var barOptions = {series: {  
  26. lines: { show: true,   
  27. lineWidth: 2,  
  28. fill: true,   
  29. fillColor: { colors: [{ opacity: 0.0 }, { opacity: 0.0 }] } } },   
  30. xaxis: { tickDecimals: 0 },   
  31. colors: ["#1ab394"],   
  32. grid: { color: "#999999",  
  33. hoverable: true,   
  34. clickable: true,   
  35. tickColor: "#D4D4D4", borderWidth: 0 },  
  36. legend: { show: false },  
  37. tooltip: true,   
  38. tooltipOpts: { content: "x: %x, y: %y" } };  
  39. var barData = {label: "bar",   
  40. data: ** What to use here? To replace this data?** };  
  41.              doPlot("right"); $("button").click(function () {   
  42.                doPlot($(this).text()); }); });  
Here I need some assistance in the Controller part, I want to retrieve on two values as x-axis & y-axis from the model (Worker) which is Name and Salary:
  1. public class Worker {  
  2. public int ID { get; set; }  
  3. public string Name { get; set; }  
  4. public string Position { get; set; }  
  5. public string Office { get; set; }  
  6. public string Extn { get; set; }  
  7. public string Salary { get; set; }  
  8. }  

Answers (1)