JAVASCRIPT   53

canvas.js

Guest on 22nd July 2021 09:58:14 AM

  1.         // line chart data
  2.         var buyerData = {
  3.                 labels : ["Junio",",Junio","Julio","Agosto","Septiembre","Octubre"],
  4.                 datasets : [
  5.                 {
  6.                                 fillColor : "#0fc0fc",
  7.                                 strokeColor : "#ACC26D",
  8.                                 pointColor : "#007cbc",
  9.                                 pointStrokeColor : "#9DB86D",
  10.                                 data : [203,156,99,251,305,247]
  11.                         }
  12.                 ]
  13.         }
  14.        
  15.         // get line chart canvas
  16.         var buyers = document.getElementById('buyers').getContext('2d');
  17.  
  18.         // draw line chart
  19.         new Chart(buyers).Line(buyerData);
  20.  
  21.         // ..........................---------------------............................
  22.        
  23.         // pie chart data
  24.         var pieData = [
  25.                 {
  26.                         value: 20,
  27.                         color:"#006699",
  28.                         label: "Vasconcelos"
  29.                 },
  30.                 {
  31.                         value : 40,
  32.                         color : "#e1410a",
  33.                         label: "Garza Sada"
  34.                 },
  35.                 {
  36.                         value : 10,
  37.                         color : "#ffb400",
  38.                         label: "Bodega"
  39.                 },
  40.                 {
  41.                         value : 30,
  42.                         color : "#009966",
  43.                         label: "Valle Alto"
  44.                 }
  45.         ];
  46.  
  47.         // pie chart options
  48.         var pieOptions = {
  49.                 segmentShowStroke : false,
  50.                 animateScale : true
  51.         }
  52.        
  53.         // get pie chart canvas
  54.         var countries= document.getElementById("countries").getContext("2d");
  55.        
  56.         // draw pie chart
  57.         new Chart(countries).Pie(pieData, pieOptions);
  58.  
  59. // -----------------------............................--------------------------
  60.        
  61.  
  62.         // bar chart data
  63.         var barData = {
  64.         labels : ["January","February","March","April","May","June"],
  65.         datasets : [
  66.                 {
  67.                         fillColor : "#00833e",
  68.                         strokeColor : "#48A4D1",
  69.                         data : [456,479,324,569,702,600]
  70.                 },
  71.                 ]
  72.         }
  73.        
  74.         // get bar chart canvas
  75.         var income = document.getElementById("income").getContext("2d");
  76.        
  77.         // draw bar chart
  78.         new Chart(income).Bar(barData);
  79.  
  80. // ------.....-.-.-.-.-..-.-.-.-.-.---.-.-..-.-..-.-.-.-.-.-.-.-.-.-.-.---.-.-.-.-.-.--.-.-.-..
  81.  
  82.         var DoughnutData = [
  83.     {
  84.         value: 300,
  85.         color:"#F7464A",
  86.         highlight: "#FF5A5E",
  87.         label: "Diciembre"
  88.     },
  89.     {
  90.         value: 50,
  91.         color: "#46BFBD",
  92.         highlight: "#5AD3D1",
  93.         label: "Febrero"
  94.     },
  95.     {
  96.         value: 100,
  97.         color: "#FDB45C",
  98.         highlight: "#FFC870",
  99.         label: "Agosto"
  100.     }
  101. ];
  102.         var DoughnutOptions = {
  103.                 segmentShowStroke : false,
  104.                 animateScale : true
  105.         }
  106.        
  107.         // get pie chart canvas
  108.         var prueba= document.getElementById("prueba").getContext("2d");
  109.        
  110.         // draw pie chart
  111.         new Chart(prueba).Doughnut(DoughnutData,DoughnutOptions);

Raw Paste


Login or Register to edit or fork this paste. It's free.