<?php
error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);
/* Template Name: PPI Visualization Template OLD */
the_post();
?>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<article class="article-content padding-top100">
	<div class="flex-content">
		<div class="row">
			<div class="large-12 columns">
				<h1 class="page-head">
					<?php the_title(); ?>
				</h1>
				<div id="chart_div"></div>
				<script>google.charts.load('current', {packages: ['corechart', 'bar']});</script>
              
				<?php 
				    //prepare arrays
				    $aS1=$aS2=$aS3=$aS4=$aS4a=$aS4b=$aS5=$aS5a=$aS5b=$aS6=$aSap=[];
				    
				    $c1_2=$c1_2=$c1_3=$c1_4=$c1_5=$c1_6=$c1_7=$c1_8=$c1_9=$c1_1=$c1_11=$c2_1=$c2_2=$c2_3=$c2_4=$c2_5=$c2_6=$c2_7=$c2_8=$c2_9=$c2_1=$c2_11=$c2_12=$c2_13=$c2_14=$c3_1=$c3_2=$c3_3=$c3_4=$c3_5=$c3_6=$c3_7=$c4_1=$c4_2=$c4_3=$c4_4=$c4_5=$c4_6=$c4_7=$c4_8=$c4A_1=$c4A_2=$c4A_3=$c4A_4=$c4B_1=$c4B_2=$c4B_3=$c4B_4=$c4B_5=$c5_1=$c5_2=$c5_3=$c5_4=$c5_5=$c5_6=$c5A_1=$c5A_2=$c5A_3=$c5A_4=$c5A_5=$c5A_6=$c5B_1=$c5B_2=$c5B_3=$c5B_4=$c6_1=$c6_2=$c6_3=$c6_4=$c6_5=$c6_6=$c6_7=$c6_8=$c6_9=$c6_1=$c6_11=0;
				    $cS1 = "blue";
				    
				    //specify database and set to display all posts (-1)
                    $args = array('post_type' => 'ppi_database', 'posts_per_page' => 10);
                    
                    //get data from database
                    $the_query = new WP_Query( $args );
                    
                    //loop through posts
                    while ( $the_query->have_posts() ) : $the_query->the_post();
                    
                      //echo '<script>var c1_1=c1_2=c1_3=c1_4=c1_5=c1_6=c1_7=c1_8=c1_9=c1_10=c1_11=c2_1=c2_2=c2_3=c2_4=c2_5=c2_6=c2_7=c2_8=c2_9=c2_1=c2_11=c2_12=c2_13=c2_14=c3_1=c3_2=c3_3=c3_4=c3_5=c3_6=c3_7=c4_1=c4_2=c4_3=c4_4=c4_5=c4_6=c4_7=c4_8=c4A_1=c4A_2=c4A_3=c4A_4=c4B_1=c4B_2=c4B_3=c4B_4=c4B_5=c5_1=c5_2=c5_3=c5_4=c5_5=c5_6=c5A_1=c5A_2=c5A_3=c5A_4=c5A_5=c5A_6=c5B_1=c5B_2=c5B_3=c5B_4=c6_1=c6_2=c6_3=c6_4=c6_5=c6_6=c6_7=c6_8=c6_9=c6_1=c6_11="#FFF";</script>';
                
                        //get title and actions per strategy
                        $post_title = get_field( "post_title",$post->ID );
                        $aS1= explode(",",get_field( "sap_strategy_s1_ppi",$post->ID ));
						$aS2= explode(",",get_field( "sap_strategy_s2_ppi",$post->ID ));
						$aS3= explode(",",get_field( "sap_strategy_s3_ppi",$post->ID ));
						$aS4= explode(",",get_field( "sap_strategy_s4_ppi",$post->ID ));
						$aS4a= explode(",",get_field( "sap_strategy_s4a_ppi",$post->ID ));
						$aS4b= explode(",",get_field( "sap_strategy_s4b_ppi",$post->ID ));
						$aS5= explode(",",get_field( "sap_strategy_s5_ppi",$post->ID ));
						$aS5a= explode(",",get_field( "sap_strategy_s5a_ppi",$post->ID ));
						$aS5b= explode(",",get_field( "sap_strategy_s5b_ppi",$post->ID ));
						$aS6= explode(",",get_field( "sap_strategy_s6_ppi",$post->ID ));

						//merge actions into one array and remove empty entries
						$aSap = array_filter(array_merge($aS1,$aS2,$aS3,$aS4,$aS4a,$aS4b,$aS5,$aS5a,$aS5b,$aS6));
						if (count($aSap)>0 && $aSap[0]!=""){
						echo "<div id='chart_$post->ID'></div>";
						
                                                            ?>
                                                    				<script>
				    
            google.charts.setOnLoadCallback(<?php echo "draw_$post->ID"; ?>);

function <?php echo "draw_$post->ID"; ?>() {
    var c1_1=c1_2=c1_3=c1_4=c1_5=c1_6=c1_7=c1_8=c1_9=c1_10=c1_11=c2_1=c2_2=c2_3=c2_4=c2_5=c2_6=c2_7=c2_8=c2_9=c2_1=c2_11=c2_12=c2_13=c2_14=c3_1=c3_2=c3_3=c3_4=c3_5=c3_6=c3_7=c4_1=c4_2=c4_3=c4_4=c4_5=c4_6=c4_7=c4_8=c4A_1=c4A_2=c4A_3=c4A_4=c4B_1=c4B_2=c4B_3=c4B_4=c4B_5=c5_1=c5_2=c5_3=c5_4=c5_5=c5_6=c5A_1=c5A_2=c5A_3=c5A_4=c5A_5=c5A_6=c5B_1=c5B_2=c5B_3=c5B_4=c6_1=c6_2=c6_3=c6_4=c6_5=c6_6=c6_7=c6_8=c6_9=c6_1=c6_11="#FFF";
    <?php

						    foreach ($aSap as &$value) {
						        $new_value = "c" . str_replace(".","_",$value);
						        echo "$new_value='$cS1';";
						}
    ?>
    
  var data = google.visualization.arrayToDataTable([
    ['Action', '1.1',
      '1.2',
      '1.3',
      '1.4',
      '1.5',
      '1.6',
      '1.7',
      '1.8',
      '1.9',
      '1.10',
      '1.11',
      '2.1',
      '2.2',
      '2.3',
      '2.4',
      '2.5',
      '2.6',
      '2.7',
      '2.8',
      '2.9',
      '2.10',
      '2.11',
      '2.12',
      '2.13',
      '2.14',
      '3.1',
      '3.2',
      '3.3',
      '3.4',
      '3.5',
      '3.6',
      '3.7',
      '4.1',
      '4.2',
      '4.3',
      '4.4',
      '4.5',
      '4.6',
      '4.7',
      '4.8',
      '4A.1',
      '4A.2',
      '4A.3',
      '4A.4',
      '4B.1',
      '4B.2',
      '4B.3',
      '4B.4',
      '4B.5',
      '5.1',
      '5.2',
      '5.3',
      '5.4',
      '5.5',
      '5.6',
      '5A.1',
      '5A.2',
      '5A.3',
      '5A.4',
      '5A.5',
      '5A.6',
      '5B.1',
      '5B.2',
      '5B.3',
      '5B.4',
      '6.1',
      '6.2',
      '6.3',
      '6.4',
      '6.5',
      '6.6',
      '6.7',
      '6.8',
      '6.9',
      '6.10',
      '6.11', {
        role: 'annotation'
      }
    ],
    ['<?php echo "$post_title"; ?>', 10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10,
      10, ''
    ]
  ]);

  var  <?php echo "options_$post->ID"; ?> = {
    width: '200%',
    height: 50,
    bar: {
      groupWidth: '100%'
    },
    isStacked: true,
    legend: {position: 'none'},
    hAxis: { textPosition: 'none' },
    vAxis: {overflow: 'visible'},
    'tooltip' : {trigger: 'none'},
    explorer: {axis: 'horizontal', keepInBounds: true},
     series: {
        0: {color: c1_1},
        1: {color: c1_2},
        2: {color: c1_3},
        3: {color: c1_4},
        4: {color: c1_5},
        5: {color: c1_6},
        6: {color: c1_7},
        7: {color: c1_8},
        8: {color: c1_9},
        9: {color: c1_10},
        10: {color: c1_11},
        11: {color: c2_1},
        12: {color: c2_2},
        13: {color: c2_3},
        14: {color: c2_4},
        15: {color: c2_5},
        16: {color: c2_6},
        17: {color: c2_7},
        18: {color: c2_8},
        19: {color: c2_9},
        20: {color: c2_1},
        21: {color: c2_11},
        22: {color: c2_12},
        23: {color: c2_13},
        24: {color: c2_14},
        25: {color: c3_1},
        26: {color: c3_2},
        27: {color: c3_3},
        28: {color: c3_4},
        29: {color: c3_5},
        30: {color: c3_6},
        31: {color: c3_7},
        32: {color: c4_1},
        33: {color: c4_2},
        34: {color: c4_3},
        35: {color: c4_4},
        36: {color: c4_5},
        37: {color: c4_6},
        38: {color: c4_7},
        39: {color: c4_8},
        40: {color: c4A_1},
        41: {color: c4A_2},
        42: {color: c4A_3},
        43: {color: c4A_4},
        44: {color: c4B_1},
        45: {color: c4B_2},
        46: {color: c4B_3},
        47: {color: c4B_4},
        48: {color: c4B_5},
        49: {color: c5_1},
        50: {color: c5_2},
        51: {color: c5_3},
        52: {color: c5_4},
        53: {color: c5_5},
        54: {color: c5_6},
        55: {color: c5A_1},
        56: {color: c5A_2},
        57: {color: c5A_3},
        58: {color: c5A_4},
        59: {color: c5A_5},
        60: {color: c5A_6},
        61: {color: c5B_1},
        62: {color: c5B_2},
        63: {color: c5B_3},
        64: {color: c5B_4},
        65: {color: c6_1},
        66: {color: c6_2},
        67: {color: c6_3},
        68: {color: c6_4},
        69: {color: c6_5},
        70: {color: c6_6},
        71: {color: c6_7},
        72: {color: c6_8},
        73: {color: c6_9},
        74: {color: c6_1},
        75: {color: c6_11}
     }
  };

  var <?php echo "chart_$post->ID"; ?> = new google.visualization.BarChart(document.getElementById('<?php echo "chart_$post->ID"; ?>'));
  <?php echo "chart_$post->ID"; ?>.draw(data, <?php echo "options_$post->ID"; ?>);

}
				</script>
                                <?php
						}

                    endwhile;
                    wp_reset_query();
                    ?>

			</div>
		</div>
	</div>
</article>
