Full Stack: 2018

Monday, October 29, 2018

Multi Line line chart with chart JS library

This article contains how to draw a multi line graph with chart JS library. It contains a static data set. You can assign dynamic values and colors using php or any other appropriate language

Click to view Reference
Click to view official website



&lt!DOCTYPE html&gt
&lthtml&gt
&lthead&gt
 &ltstyle&gt
  .container { width: 80%; margin: 20px auto; }
  .p { text-align: center; font-size: 1px; padding-top: 140px; }
 &lt/style&gt
&lt/head&gt
&ltbody&gt

&ltdiv class="container"&gt
  &ltdiv&gt
    &ltcanvas id="canvas"&gt&lt/canvas&gt
  &lt/div&gt
&lt/div&gt

&ltscript src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"&gt&lt/script&gt
&ltscript&gt
var lineChartData = {
    labels: ["Data 1", "Data 2", "Data 3", "Data 4", "Data 5", "Data 6","Data"],
    datasets: [{
        fillColor: "rgba(220,220,220,0)",
        strokeColor: "rgba(220,180,0,1)",
        pointColor: "rgba(220,180,0,1)",
        data: [10, 30, 80, 20, 40, 10, 60]
    }, {
        fillColor: "rgba(151,187,205,0)", 
      strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        data: [20, 10, 40, 30, 80, 30, 20]
    }]

}

Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,160,0,0.8)";
//Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleLineColor = "black";
Chart.defaults.global.scaleFontSize = 16;/**/

var ctx = document.getElementById("canvas").getContext("2d");
var LineChartDemo = new Chart(ctx).Line(lineChartData, {
    pointDotRadius: 1,
    bezierCurve: false,
    scaleShowVerticalLines: false,
    scaleGridLineColor: "black"
});
&lt/script&gt

&lt/body&gt
&lt/html&gt

Sunday, October 21, 2018

Bar chart with d3.js library - horizontal bar chart with threshold levels

Bar Chart 3- horizontal

This article contains how to draw a horizontal bar graph with d3 JS library. And also this contains displaying different threshold levels for bars. It contains a static data set. You can assign dynamic values and colors using php or any other appropriate language

Click to view Reference
Click to view official website



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bar Chart 3-  horizontal</title>

 <style>
  #barchart { margin: 0; height: 100% }
  .bar:hover { fill: #003366 }
  /*Text class styling*/
  /*.text { fill: white; font-family: sans-serif }*/
 </style>

    <!-- Reference minified version of D3 -->
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
  </head>

  <body>
 <div style="height:400px; width:auto">
  <div id="barchart" style="width:80%; height:100%">
  </div>
 </div>
    <script>
  // Create data array of values to visualize
 var dataArray = [63, 61, 54];
 var criticalArray = [90, 80, 80];
 var warningArray = [75, 70, 70];
 var test1Array = [50, 55, 30];
 var colArray = ["red","green","blue"];
 var txtArray = ["text1","text2","text3"];
 
 // Create variable for the SVG
 var svg = d3.select("#barchart").append("svg")
        .attr("height","100%")
        .attr("width","100%");

 // Select, append to SVG, and add attributes to rectangles for bar chart
 svg.selectAll("rect") // d=data, i=index
     .data(dataArray)
         .enter().append("rect")
     .attr("class", "bar")
     .style("fill", function(d, i){ return colArray[i]; })
     .attr("width", function(d, i) {return (d * 3)})
     .attr("height","40")
     .attr("y", function(d, i) {return (i * 60) + 20})
     .attr("x", function(d, i) {return (60*1)})
   
 svg.selectAll("rect2") // d=data, i=index // warningArray
     .data(dataArray)
     .enter().append("rect")
     .attr("class", "bar")
     .style("fill", function(d, i){ return "orange"; })
     .attr("width", function(d, i) {return (2 * 1)})
     .attr("height","44")
        .attr("y", function(d, i) {return (i * 60) + 20 -1 })
     .attr("x", function(d, i) {return 60+warningArray[i]*3}); /**/
   
      svg.selectAll("rect3") // d=data, i=index // test1Array
   .data(dataArray)
   .enter().append("rect")
   .attr("class", "bar")
   .style("fill", function(d, i){ return "#22aa88"; })
   .attr("width", function(d, i) {return (2 * 1)})
   .attr("height","44")
   .attr("y", function(d, i) {return (i * 60) + 20 -1 })
   .attr("x", function(d, i) {return 60+test1Array[i]*3}); /**/
  
      svg.selectAll("rect3") // d=data, i=index // 100%
   .data(dataArray)
   .enter().append("rect")
   .attr("class", "bar")
   .style("fill", function(d, i){ return "#b0b0b0"; })
   .attr("width", function(d, i) {return (2 * 1)})
   .attr("height","44")
   .attr("y", function(d, i) {return (i * 60) + 20 -1 })
   .attr("x", function(d, i) {return 60+100*3}); /**/

   
  // Select, append to SVG, and add attributes to text
  svg.selectAll("text") // colored value %
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d+"%"})
                        .attr("class", "text")
                     .style("fill", function(d, i){ return colArray[i]; })
                        .attr("y", function(d, i) {return (i * 60) + 36})
                        .attr("x", function(d, i) {return 5 });
  
  svg.selectAll("text2") // colored text
   .data(dataArray)
   .enter().append("text")
   .text(function(d, i) {return txtArray[i]})
                        .attr("class", "text")
          .style("fill", function(d, i){ return colArray[i]; })
                        .attr("y", function(d, i) {return (i * 60) + 48})
                        .attr("x", function(d, i) {return 5 });/**/
     
  svg.selectAll("text3") // colored text
   .data(dataArray)
   .enter().append("text")
   .text(function(d, i) {return "100%"})
                        .attr("class", "text")
          .style("fill", function(d, i){ return "#b0b0b0"; })
                        .attr("y", function(d, i) {return (i * 60) + 20-1+44})
                        .attr("x", function(d, i) {return 50+100*3 });/**/
     
 </script>
  </body>
</html>

Bar chart with d3.js library - vertical bar chart

Bar Chart

This article contains how to draw a vertical bar graph with d3 JS library. It contains a static data set. You can assign dynamic values and colors using php or any other appropriate language

Click to view Reference
Click to view official website



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bar Chart</title>

 <style>
  html, body, #barchart { margin: 0; height: 100% }
  /*Rectangle bar class styling*/
  /*.bar { fill: #0080FF }*/
  .bar:hover { fill: #003366 }
  /*Text class styling*/
  /*.text { fill: white; font-family: sans-serif }*/
 </style>

    <!-- Reference minified version of D3 -->
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
  </head>

  <body>
 <div id="barchart">
 </div>
    <script>
  // Create data array of values to visualize
  var dataArray = [63, 61, 54];
  var colArray = ["red","green","blue"];
  var txtArray = ["text1","text2","text3"];
  
  // Create variable for the SVG
  var svg = d3.select("#barchart").append("svg")
   .attr("height","100%")
   .attr("width","100%");

  // Select, append to SVG, and add attributes to rectangles for bar chart
  svg.selectAll("rect") // d=data, i=index
   .data(dataArray)
   .enter().append("rect")
   .attr("class", "bar")
   .style("fill", function(d, i){ return colArray[i]; })
   .attr("height", function(d, i) {return (d * 1)})
   .attr("width","40")
   .attr("x", function(d, i) {return (i * 60) + 25})
   .attr("y", function(d, i) {return 100 - (d * 1)});

  // Select, append to SVG, and add attributes to text
  svg.selectAll("text")
           .data(dataArray)
           .enter().append("text")
    .text(function(d) {return d+"%"})
           .attr("class", "text")
           .style("fill", function(d, i){ return colArray[i]; })
           .attr("x", function(d, i) {return (i * 60) + 36})
           .attr("y", function(d, i) {return 120 });
  
   svg.selectAll("text2")
           .data(dataArray)
    .enter().append("text")
    .text(function(d, i) {return txtArray[i]})
           .attr("class", "text")
    .style("fill", function(d, i){ return colArray[i]; })
           .attr("x", function(d, i) {return (i * 60) + 30})
           .attr("y", function(d, i) {return 135 });

 </script>
  </body>
</html>

Saturday, October 20, 2018

ZingChart threshold level monitoring line graph

LIne chart (area) - with highlighting

This article contains how to draw a line graph with Zing Charts. It contains a static data set. You can assign dynamic values and colors using php or any other appropriate language

Click to view Reference
Click to view Documentation


  <div height="500px" width="50%">
   <div id="myChart" style="height:300px; width:100%"></div>
  </div>
  
  <script>
   var myConfig = {
    "type":"area",
    "plot":{ 
     "stacked":false, 
     "stack-type":"100%" 
    }, 
    "series":[
     { "values":[20,40,25,50,15,45,33,34,20,40,25,50,15,45,33,34],
      "line-color":"black"
     },
     { "values":[30,5,18,21,33,41,29,15]
     },
     { "values":[5,30,21,18,59,50,28,33],
      //backgroundColor: '#FFC107'
     }, 
     { "values":[ [0,100] , [15,100] ],
      //backgroundColor: 'red',
      "line-color":"grey",
      "line-width": 0.6,
      
     },
     { "values":[ [0,80] , [15,80] ],
      "line-color":"red",
      //backgroundColor: '#FFC107',
      backgroundColor: 'orange',
      shadowAlpha: 0.0,
      alpha: 0.0,
      "line-width": 0.6
     },
     { "values":[ [0,70] , [15,70] ],
      "line-color":"green",
      backgroundColor: "green",
      shadowAlpha: 0.0,
      alpha: 0.0, //??
      "line-width": 0.6
     },
     { "values":[ [0,0] , [15,0] ],
      "line-color":"green",
      shadowAlpha: 0.0,
      alpha: 0.0,
      "line-width": 0.6
     }
    ] 
   };
 
   zingchart.render({ 
    id : 'myChart', 
    data : myConfig, 
    height: "100%", 
    width: "100%" 
   });
  </script>