Provide the correct link depending on the chart-type in manual configuration

Author: contactashish13

classes/Visualizer/Render/Page/Data.php

@@ -67,8 +67,10 @@ protected function _renderSidebarContent() {
 			),
 			admin_url( 'admin-ajax.php' )
 		);
+
+		$type               = get_post_meta( $this->chart->ID, Visualizer_Plugin::CF_CHART_TYPE, true );
 		?>
-		<span id="visualizer-chart-id" data-id="<?php echo $this->chart->ID; ?>"></span>
+		<span id="visualizer-chart-id" data-id="<?php echo $this->chart->ID; ?>" data-chart-type="<?php echo $type; ?>"></span>
 		<iframe id="thehole" name="thehole"></iframe>
 		<ul class="viz-group-wrapper full-height">
 			<li class="viz-group viz-group-category open" id="vz-chart-source">

classes/Visualizer/Render/Sidebar.php

@@ -165,7 +165,7 @@ protected function _renderAdvancedSettings() {
 
 		self::_renderGroupStart( esc_html__( 'Manual Configuration', 'visualizer' ) );
 			self::_renderSectionStart();
-				self::_renderSectionDescription( __( 'Configure the graph by providing configuration variables right from the', 'visualizer' ) . ' <a href="https://developers.google.com/chart/interactive/docs/reference" target="_blank">Google Visualization</a> API.' );
+				self::_renderSectionDescription( '<span class="viz-gvlink">' . sprintf( __( 'Configure the graph by providing configuration variables right from the %1$sGoogle Visualization API%2$s', 'visualizer' ), '<a href="https://developers.google.com/chart/interactive/docs/gallery/?#configuration-options" target="_blank">', '</a>' ) . '</span>' );
 
 			$example    = '
 {

js/frame.js

@@ -13,6 +13,21 @@
     $(document).ready(function () {
         init_permissions();
 
+        // update the manual configuation link to point to the correct chart type.
+        var type = $('#visualizer-chart-id').attr('data-chart-type');
+        var chart_type_in_api_link  = type + 'chart';
+        switch (type) {
+            case "gauge":
+            case "table":
+            case "timeline":
+                chart_type_in_api_link = type;
+                break;
+        }
+
+        if($('span.viz-gvlink').length > 0) {
+            $('span.viz-gvlink').html($('span.viz-gvlink').html().replace('?', chart_type_in_api_link));
+        }
+
         $('.type-radio').change(function () {
             $('.type-label-selected').removeClass('type-label-selected');
             $(this).parent().addClass('type-label-selected');