caparol6991

Wykresy todo

Jul 2nd, 2020
76
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>{{ title }}</title>
  6. <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  8.  
  9.  
  10. </head>
  11.  
  12. <body>
  13. <h1>{{ title }}</h1>
  14. Wartość a: <br/>
  15. <form>
  16. <input type="text" id="a" /></br>
  17. Wartość b: <br/>
  18. <input type="text" id="b" /></br>
  19. <input type="submit" vale="Oblicz" />
  20. </form>
  21. <canvas id="chart" width="600" height="400"></canvas>
  22.  
  23.  
  24. <script>
  25. $(function () {
  26. $('form').on('submit', function (e) {
  27. e.preventDefault();
  28. var obj = new Object();
  29. obj.a = document.getElementById("a").value;
  30. obj.b = document.getElementById("b").value;
  31. var jsonString= JSON.stringify(obj);
  32. $.post("/data",jsonString,
  33. function(data, status){
  34. console.log(Object.getOwnPropertyNames(data));
  35. addData(LineChartDemo,data);
  36. });
  37. });
  38. });
  39.  
  40. function addData(chart,jsonData) {
  41. chart.data = jsonData["a"];
  42. chart.labels = jsonData.labels;
  43. chart.update();
  44. }
  45.  
  46. function removeData(chart) {
  47. /* chart.data.labels.pop();
  48. chart.data.datasets.forEach((dataset) => {
  49. dataset.data.pop();
  50. });
  51. chart.update();*/
  52. }
  53.  
  54.  
  55. Chart.defaults.global.animationSteps = 50;
  56. Chart.defaults.global.tooltipYPadding = 16;
  57. Chart.defaults.global.tooltipCornerRadius = 0;
  58. Chart.defaults.global.tooltipTitleFontStyle = "normal";
  59. Chart.defaults.global.tooltipFillColor = "rgba(0,0,0,0.8)";
  60. Chart.defaults.global.animationEasing = "easeOutBounce";
  61. Chart.defaults.global.responsive = false;
  62. Chart.defaults.global.scaleLineColor = "black";
  63. Chart.defaults.global.scaleFontSize = 16;
  64.  
  65. // get bar chart canvas
  66. var mychart = document.getElementById("chart").getContext("2d");
  67.  
  68. steps = 10
  69. // draw bar chart
  70. var LineChartDemo = new Chart(mychart).Line(barData, {
  71. data: [0],
  72. options: {},
  73. scaleOverride: true,
  74. scaleSteps: steps,
  75. scaleStartValue: 0,
  76. scaleShowVerticalLines: true,
  77. scaleShowGridLines : true,
  78. barShowStroke : true,
  79. scaleShowLabels: true,
  80. bezierCurve: false,
  81. });
  82.  
  83. </script>
  84.  
  85. </body>
  86. </html>
RAW Paste Data