1
Answer

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

Qayyum ChauDhary

Qayyum ChauDhary
4y
1.2k
1
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)
Next Recommended Forum