Search This Blog

Tuesday, February 21, 2017

<script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawCharts);
      
    function drawCharts() {
       var data1 = google.visualization.arrayToDataTable([
      ['Date', 'Assigned','Inprogress'],
      ['16-Jan-17',  80, 20 ],
      ['17-Jan-17',  70, 20 ],
      ['18-Jan-17',  60, 20 ],
      ['19-Jan-17',  40, 20 ],
      ['20-Jan-17',  50, 20 ],
      ['21-Jan-17',  55, 20 ],
      ['22-Jan-17',  80, 20 ],
      ['23-Jan-17',  80, 20 ],
      ['24-Jan-17',  20, 20 ],
      ['25-Jan-17',  80, 20 ],
      ['26-Jan-17',  80, 20 ],
      ['27-Jan-17',  50, 20 ],
      ['28-Jan-17',  80, 20 ],
      ['29-Jan-17',  10, 20 ],
      ['30-Jan-17',  90, 20 ],
      ['31-Jan-17',  80, 20 ],
      ['01-Feb-17',  80, 20 ],
      ['02-Feb-17',  20, 20 ],
      ['03-Feb-17',  80, 20 ],
      ['04-Feb-17',  40, 20 ],
      ['05-Feb-17',  80, 20 ],
      ['06-Feb-17',  80, 20 ],
      ['07-Feb-17',  30, 20 ],
      ['08-Feb-17',  80, 20 ],
      ['09-Feb-17',  40, 20 ],
      ['10-Feb-17',  60, 20 ],
      ['11-Feb-17',  80, 20 ],
      ['12-Feb-17',  50, 20 ],
      ['13-Feb-17',  70, 20 ],
      ['14-Feb-17',  60, 20 ],
      ['15-Feb-17',  40, 10 ],
      ['16-Feb-17',  80, 20 ]

      ]);
    
        var data2 = google.visualization.arrayToDataTable([
      ['Date', 'Resolved', 'On Hold', 'Closed'],
     ['16-Jan-17',  80,20,10],
      ['17-Jan-17',  70, 20,60 ],
      ['18-Jan-17',  60, 20,60 ],
      ['19-Jan-17',  40, 20,60 ],
      ['20-Jan-17',  50, 20,60 ],
      ['21-Jan-17',  55, 20,60 ],
      ['22-Jan-17',  80, 20,60 ],
      ['23-Jan-17',  80, 20,60 ],
      ['24-Jan-17',  20, 20,60 ],
      ['25-Jan-17',  80, 20,60 ],
      ['26-Jan-17',  80, 20,60 ],
      ['27-Jan-17',  50, 20,60 ],
      ['28-Jan-17',  80, 20,60 ],
      ['29-Jan-17',  10, 20,60 ],
      ['30-Jan-17',  90, 20,60 ],
      ['31-Jan-17',  80, 20,60 ],
      ['01-Feb-17',  80, 20,60 ],
      ['02-Feb-17',  20, 20,60 ],
      ['03-Feb-17',  80, 20,60 ],
      ['04-Feb-17',  40, 20,20 ],
      ['05-Feb-17',  80,10 ,30],
      ['06-Feb-17',  80, 20 ,60],
      ['07-Feb-17',  30, 20,60 ],
      ['08-Feb-17',  80, 20,60 ],
      ['09-Feb-17',  40, 20,20 ],
      ['10-Feb-17',  60, 20,60 ],
      ['11-Feb-17',  80, 20,10 ],
      ['12-Feb-17',  50, 20,60 ],
      ['13-Feb-17',  70, 20,60 ],
      ['14-Feb-17',  60, 20,60 ],
      ['15-Feb-17',  40, 10,60 ],
      ['16-Feb-17',  80, 20, 30 ]

        
        
        
        
        
      ]);
    
      var data3 = google.visualization.arrayToDataTable([
      ['Date', 'Escalation'],
      ['16-Jan-17',  80],
      ['17-Jan-17',  70],
      ['18-Jan-17',  60],
      ['19-Jan-17',  40],
      ['20-Jan-17',  50],
      ['21-Jan-17',  55],
      ['22-Jan-17',  80],
      ['23-Jan-17',  80],
      ['24-Jan-17',  20],
      ['25-Jan-17',  80],
      ['26-Jan-17',  80],
      ['27-Jan-17',  50],
      ['28-Jan-17',  80],
      ['29-Jan-17',  10],
      ['30-Jan-17',  90],
      ['31-Jan-17',  80],
      ['01-Feb-17',  80],
      ['02-Feb-17',  20],
      ['03-Feb-17',  80],
      ['04-Feb-17',  40],
      ['05-Feb-17',  80],
      ['06-Feb-17',  80],
      ['07-Feb-17',  30],
      ['08-Feb-17',  80],
      ['09-Feb-17',  40],
      ['10-Feb-17',  60],
      ['11-Feb-17',  80],
      ['12-Feb-17',  50],
      ['13-Feb-17',  70],
      ['14-Feb-17',  60],
      ['15-Feb-17',  40],
      ['16-Feb-17',  100]
      ]);
       var options = {
        //width: 100%,
        height:350,
        // chartArea:{t,width:'100%',height:'100%'},
        bar: {groupWidth: "55%"},
        colors: ['#f1ca3a', '#ff9900'],
        isStacked: true,
    // chartArea:{left:0,top:0},
               legend: {position: 'top',  textStyle: {color: '#444444', fontName:"Conv_Sansus Webissimo-Regular,Sans-Serif", fontSize: 14}},
      };
    
       var custoptions2 = { colors: ['#00c0ef',   '#3186b9', '#19d8c6'], isStacked: true, height:350, legend: {position: 'top',  textStyle: {color: '#444444', fontName:"Conv_Sansus Webissimo-Regular, Sans-Serif;", fontSize: 14}}, };
        var custoptions3 = { colors: ['#f9699c'], isStacked: true, height:350, legend: {position: 'top',  textStyle: {color: '#444444', fontName:"Source Sans Pro", fontSize: 14}}, };
      var custoptions = { isStacked: false ,  height:350, legend: {position: 'top',  textStyle: {color: '#444444', fontName:"Conv_Sansus Webissimo-Regular, Sans-Serif;", fontSize: 14}},};


      var alldata = [];
      alldata.push(data1);
     alldata.push(data2);
     alldata.push(data3);
    
      var alloptions = [];
      alloptions.push(options);
      alloptions.push(custoptions2);
      alloptions.push(custoptions3);
    
      $( ".chart-responsive" ).each(function(index, element ) {
         var charted = new google.visualization.ColumnChart(element.firstElementChild);
          var minus = Math.floor(index/3);
         index = index-(3*minus);
      
     // console.log( index + ": " + $( this ).text() );\
     charted.draw(alldata[index], alloptions[index]);
});
    
//      var chart1 = new google.visualization.ColumnChart(document.getElementById("columnchart_values1"));
//      var chart2 = new google.visualization.ColumnChart(document.getElementById("columnchart_values2"));
//      var chart3 = new google.visualization.ColumnChart(document.getElementById("columnchart_values3"));
//      var chart4 = new google.visualization.ColumnChart(document.getElementById("columnchart_values4"));
//      var chart5 = new google.visualization.ColumnChart(document.getElementById("columnchart_values5"));
//      var chart6 = new google.visualization.ColumnChart(document.getElementById("columnchart_values6"));
//      chart1.draw(data1, options);
//      chart2.draw(data2, custoptions2);
//      chart3.draw(data3, custoptions3);
//      chart4.draw(data1, options);
//      chart5.draw(data2, custoptions2);
//      chart6.draw(data3, custoptions3);
  }
 
  </script>

No comments:

Post a Comment

Validating to select in sequencial order using angular

    < input type = "checkbox" (change) = "handleSelectTaskItem($event, taskItem)" [checked] = " taskItem . i...