Google for Developers

चार्ट प्लेग्राउंड

पैरामीटर:

cht=bvg
chs=250x150
chd=s:Monkeys
chxt=x,y
chxs=0,ff0000,12,0,lt
     1,0000ff,10,1,lt</strong>
      <div align="left">
        <button onclick="update(); convert()" title="पैरामीटर बॉक्स में टेक्स्ट को अच्छी तरह से फ़ॉर्मैट करने के लिए क्लिक करें. साथ ही, यूआरएल को सुरक्षित रखने वाले वर्णों को अन-एस्केप करें.">पैरामीटर को फिर से फ़ॉर्मैट करना</button>
      </div></td>
    <td style="vertical-align:top; padding-bottom:20px" width="79%"><strong>जनरेट किया गया
        चार्ट:</strong><br />
      <img alt="जनरेट किया गया चार्ट" id="chart" src="#" style="border:1px black solid;" />
      <div style="margin-top:5px">
        <button id="toggleValidity">गड़बड़ियां दिखाएं...</button>
      </div>
      <br />
      <iframe id="debugFrame" style="width:100%; height:300px; display:none"></iframe></td>
  </tr>
</tbody></table>
<div class="noborders">
  <label for="chartSelector">
  </label><p> </p>
  <strong>इनलाइन दस्तावेज़:</strong>
  <select id="chartSelector" name="chartSelector" onchange="document.getElementById('helpDoc').src=this.value">
    <option value="/chart/image/docs/chart_params#full_param_list">पूरी पैरामीटर
    सूची</option>
    <option value="gallery/bar_charts.html">बार</option>
    <option value="gallery/compound_charts.html#box_charts">बॉक्स</option>
    <option value="gallery/compound_charts.html#candlestick_charts">मोमबत्ती</option>
    <option value="gallery/compound_charts.html">परिसर</option>
    <option value="gallery/dynamic_icons.html">डाइनैमिक आइकॉन</option>
    <option value="/chart/infographics/docs/formulas.html">फ़ॉर्मूला</option>
    <option value="gallery/googleometer_chart.html">Google-ओ-मीटर</option>
    <option value="gallery/line_charts.html">लाइन</option>
    <option value="gallery/new_map_charts.html">मैप</option>
    <option value="gallery/pie_charts.html">Pie</option>
    <option value="/chart/infographics/docs/qr_codes.html">क्यूआर कोड</option>
    <option value="gallery/radar_charts.html">रेडार</option>
    <option value="gallery/scatter_charts.html">स्कैटर</option>
    <option value="gallery/venn_charts.html">वेन</option>
  </select>
</div>
<iframe height="500px" id="helpDoc" src="https://google-developers.gonglchuangl.net/chart/image/docs/chart_params?hl=hi" width="100%"></iframe>
<script src="https://www.gstatic.cn/external_hosted/jquery2.min.js"></script>
<script type="text/javascript">
var CHARTPLAY_URL = '/chart/image/docs/chart_playground.html';
var HOST = 'chart.googleapis.com';
var gChartImg = document.getElementById('chart');
var debugIframe = document.getElementById('debugFrame');
var gUrlBox = document.getElementById('url');
var gSpecBox = document.getElementById('spec');
var gLink = document.getElementById('link');

/*
 * Replaces the chart img src with the specified url.
 * If it includes the debugging parameter chof, it sends the url
 * to the iframe and makes it visible, to display the debugging message.
 */
function replaceImgUrl(url){
  gChartImg.src = url;
  debugIframe.src=url.replace(/&chof=\w*/,'')+'&chof=validate';
}

/*
 * Updates the img source URL, and then
 * Unescapes the URL string, reformats it, and puts formatted text into
 * the formatted text box.
 */
function convert() {
    var url = gUrlBox.value;
    replaceImgUrl(url);
    if (url) {
      gLink.href = CHARTPLAY_URL + '?url=' + encodeURIComponent(url);
    }
    var query;
    var match = url.match(/(.*?)\?(.*)/);
    if (match) {
      query = match[2];
    } else {
      query = url;
    }
    query = query.replace(/&[a-z]+=&/g, '&');
    query = query.replace(/%20/g, '+');
    query = query.replace(/%22/g, '"');
    query = query.replace(/%27/g, "'");
    query = query.replace(/%2C/g, ',');
    query = query.replace(/%3A/g, ':');
    query = query.replace(/%3C/g, '<');
    query = query.replace(/%3E/g, '>');
    query = query.replace(/%5C/g, '\\');
    query = query.replace(/%7C/g, '|');
    var spec = query.replace(/ *& */g, '\n');
    spec = spec.replace(/ *\| */g, '\n    ');
    gSpecBox.value = spec;
}

/*
 * Updates the img source to reflect the current
 * text in the parameters box. Called when user types
 * in spec box.
 */
function update() {
    var spec = gSpecBox.value;

// Replace comments, newlines, spaces with
    // appropriate URL elements.
    spec = spec.replace(/#.*/g, '');
    spec = spec.replace(/\n\n+/g, '\n');
    spec = spec.replace(/^\s*/, '');
    spec = spec.replace(/\s*$/, '');
    spec = spec.replace(/\n +/g, '|');
    spec = spec.replace(/ /g, '');
    spec = spec.replace(/\n/g, '&');
    var url = 'https://' + window.HOST + '/chart?' + spec;
    gUrlBox.value = url;
    replaceImgUrl(url);
    if (url) {
        gLink.href = CHARTPLAY_URL + '?url=' + encodeURIComponent(url);
    }
}

/*
 * Handle page setup when we navigate to the page
 * with a chart setup link.
 */
if (document.location.search) {
    var params = document.location.search.substring(1).split('&');
    for (var i = 0; i < params.length; i++) {
        if (params[i].substring(0, 4) == 'url=') {
            var url = unescape(params[i].substring(4));
            gUrlBox.value = url;
            convert();
        }
    }
}
update();

// Toggle functionality
$(document).ready(function(){
  
  $("button#toggleValidity").click(function () {
    $("iframe#debugFrame").toggle();
    var button = $(this);
    if(button.text() == "Show errors..."){
      button.text("Hide errors");
    } else {
      button.text("Show errors...");
    }
  });
  
  populateAutocomplete();
});
</script>

</body>
</html>