दिलचस्प पोस्ट
हमेशा दो दशमलव स्थानों को प्रदर्शित करने के लिए फ़ॉर्मेट संख्या PHP यदि कई शर्तों के साथ वक्तव्य एक्शनबर्न पृष्ठभूमि छवि आर और आरबी मोड में पाठ फ़ाइल को पार्स करने में अंतर स्ट्रॉप्स केस कैसे असंवेदनशील बनाने के लिए स्थिर तरीके धागे सुरक्षित हैं फ़ाइल सहेजें पर Intellij reformat कॉर्डोवा + अंगुलरज + डिवाइस तैयार अनावश्यक देरी के बिना बाश में एक आदेश का समय समाप्त लिनक्स पर सभी फ़ोल्डर्स और फाइलों को लोअरकेस में कैसे बदलना है? गिट: एक ट्रैकिंग शाखा क्या है? कस्टम ऐप के चलने में "ज्ञात फाइल प्रकार" खोलना – .NET कस्टम टाइपफ़ेस के साथ मैं टाइपफ़ेसस्पैन या स्टाइलस्पेन का उपयोग कैसे कर सकता हूं? गाऊसी मिश्रण मॉडल की अवधारणा को समझना ASP.NET MVC टेक्स्टबॉक्स इनपुट वैल्यू प्राप्त करें

एक पृष्ठ पर दो Google चार्ट कैसे जोड़ सकते हैं?

मैंने क्या किया

मैंने अपने पृष्ठ के शीर्ष पर Google चार्ट जोड़ दिया है यह एक चार्ट की एक छवि देता है

मुझे क्या करना है

मुझे केवल उसी पृष्ठ पर एक दूसरी चार्ट जोड़ने की आवश्यकता है

समस्या

दूसरे चार्ट के कोड को नजरअंदाज किया गया है। मुझे काफी हद तक संदेह है कि यह मेरे कारण गलत है प्रत्येक चार्ट के लिए कोड संयोजन।

कोड

प्रथम चार्ट (रेखा):

<!--Load the AJAX API--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> // Load the Visualization API and the piechart package. google.load('visualization', '1.0', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Month'); data.addColumn('number', 'Apples'); data.addColumn('number', 'Oranges'); data.addRows([ ['Oct 11', 20, 0], ['Nov 11', 0, 0], ['Dec 12', 0, 20], ['Jan 12', 0, 10], ['Feb 12', 0, 10], ['March 12', 10, 10] ]); // Set chart options var options = {'width':960, 'height':300}; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.LineChart(document.getElementById('line_chart')); chart.draw(data, options); } </script> 

दूसरा चार्ट (पाई):

  <!--Load the AJAX API--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> // Load the Visualization API and the piechart package. google.load('visualization', '1.0', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Set chart options var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300}; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> 

हर एक चार्ट को एक अद्वितीय आईडी के साथ कंटेनर डिवेल का उपयोग करके शरीर में कहा जाता है:

 <div id="chart_div"></div> 

मेरा प्रश्न

मैं कोड के इन दो ब्लॉकों को एक साथ कैसे सिलाई करूं? मैंने drawChart (कॉपी) की नकल करने की कोशिश की है और विशिष्ट फ़ंक्शन नाम और वेरिएबल निर्दिष्ट किए हैं, लेकिन कोई फायदा नहीं हुआ।

Solutions Collecting From Web of "एक पृष्ठ पर दो Google चार्ट कैसे जोड़ सकते हैं?"

उपाय

अब मेरे पास काम करने का समाधान है यह समझना शामिल होता है कि उदाहरण के कोड के कुछ हिस्सों को डुप्लिकेट और डुप्लिकेट न करें (जैसा ओफ़ेज़ द्वारा सुझाया गया है)। आपके चार्ट में से प्रत्येक के लिए डेटा, विकल्प और चार्ट वैरिएबल को परिभाषित किया जाता है एक ड्यूडचैर्ट () फ़ंक्शन।

यहां काम करने का एक उदाहरण है (बस एक HTML दस्तावेज़ में कॉपी और पेस्ट करें):

… यह उदाहरण आगे दर्शाता है कि कैसे विभिन्न चार्ट प्रकार यानी पाइ और लाइन को गठबंधन करना है …

 <html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> // Load the Visualization API and the piechart package. google.load('visualization', '1.0', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Create the data table. var data2 = new google.visualization.DataTable(); data2.addColumn('string', 'Topping'); data2.addColumn('number', 'Slices'); data2.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 15], ['Zucchini', 1], ['Pepperoni', 2] ]); var data3 = new google.visualization.DataTable(); data3.addColumn('string', 'Year'); data3.addColumn('number', 'Sales'); data3.addColumn('number', 'Expenses'); data3.addRows([ ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 860, 580], ['2007', 1030, 540] ]); // Set chart options var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300}; // Set chart options var options2 = {'title':'How Much Pizza You Ate Last Night', 'width':400, 'height':300}; // Set chart options var options3 = {'title':'Line chart', 'width':400, 'height':300}; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); var chart2 = new google.visualization.PieChart(document.getElementById('chart_div2')); chart2.draw(data2, options2); var chart3 = new google.visualization.LineChart(document.getElementById('chart_div3')); chart3.draw(data3, options3); } </script> </head> <body> <!--Divs that will hold the charts--> <div id="chart_div"></div> <div id="chart_div2"></div> <div id="chart_div3"></div> </body> </html> 

असल में आप फ़ंक्शन drawChart को पैरामीटर्स के लिए पसंद कर सकते हैं जैसे:

 function drawChart(chartType, containerID, dataArray, options) 

तथा

 call google.setOnLoadCallback(function() { drawChart('barChart', 'div_id_1', test_array, null); }); 

जितनी बार आप रेखांकन करना चाहते हैं उतनी बार:

 var test_array = [ ['Name', 'Count-A', 'Count-B'], ['Test-A', 4, 3], ['Test-B', 1, 2], ['Test-C', 3, 4], ['Test-D', 2, 0], ['Test-E', 2, 5] ]; google.load("visualization", "1", {packages: ["corechart",'table']}); google.setOnLoadCallback(function() { drawChart('barChart', 'div_id_1', test_array, null); }); google.setOnLoadCallback(function() { drawChart('columnChart', 'div_id_2', test_array, null); }); function drawChart(chartType, containerID, dataArray, options) { var data = google.visualization.arrayToDataTable(dataArray); var containerDiv = document.getElementById(containerID); var chart = false; if (chartType.toUpperCase() == 'BARCHART') { chart = new google.visualization.BarChart(containerDiv); } else if (chartType.toUpperCase() == 'COLUMNCHART') { chart = new google.visualization.ColumnChart(containerDiv); } else if (chartType.toUpperCase() == 'PIECHART') { chart = new google.visualization.PieChart(containerDiv); } else if (chartType.toUpperCase() == 'TABLECHART') { chart = new google.visualization.Table(containerDiv); } if (chart == false) { return false; } chart.draw(data, options); } 

@ डोमिनोर के उत्तर के आधार पर, लेकिन यदि आप अपने चार्ट को मनमानी से पंजीकृत कर रहे हैं, तो बस एक फ़ंक्शन स्टैक बनाएं जो कॉलबैक फ़ंक्शन में निष्पादित होता है जैसे:

 google.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. googleChartStack = []; function drawChart() { for (var i = googleChartStack.length - 1; i >= 0; i--) { googleChartStack[i](); } } 

फिर, आपके टेम्पलेट में कहीं और, आप इस स्टैक पर पुश कर सकते हैं। मेरे उदाहरण में, मैं कुछ टेम्पलेट स्निपेट के माध्यम से फिर से चल रहा था

 <script> googleChartStack.push(function() { var data = google.visualization.arrayToDataTable([ ['A', 'B'], ['A', 1], ['B', 2] ]); var options = { title: 'none', legend: 'none' }; var chart = new google.visualization.PieChart(document.getElementById("relevant-id")); chart.draw(data, options); }) </script> 

Google चार्ट के उत्पादन संस्करण में एक समय बग है जो एक से अधिक चार्ट को एक ही पृष्ठ पर लोड होने से रोकता है।

Google ने एक हालिया रिलीज में यह तय किया कि फ्रोजन संस्करण लोडर के साथ उपलब्ध है: https://developers.google.com/chart/interactive/docs/library_loading_enhancements#frozen-versions

प्रासंगिक धागा: https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/google-visualization-api/KulpuT418cg/yZieM8buCQAJ

शायद जब आप निर्दिष्ट करें

 google.setOnLoadCallback(drawChart); 

पहली बार कॉलबैक इवेंट को दो बार ओवरराइट करता है?

केवल अनुमान है…

प्रत्येक चार्ट के लिए आप क्या करना चाहते हैं, फ़ंक्शन है फिर करो

 google.setOnLoadCallback(initialize); 

और आरंभ करने के लिए प्रत्येक फ़ंक्शन को चार्ट बनाने के लिए कॉल करें। यह एक समारोह में कई चार्ट को ड्राइंग की तुलना में बहुत क्लीनर है। यह डिबगिंग को भी मदद करेगा

उपरोक्त उत्तर पैकेज में केवल पाई के लिए जोड़ा गया है। प्रिंटिंग पाइ और लाइन चार्ट के लिए उसी पृष्ठ पर हमें लाइन पैकेज भी शामिल करना होगा: google.load ('visualization', '1.0', {'packages': ['corechart', 'लाइन']});

पूर्ण कोड: –

  // Load the Visualization API and the piechart package. google.load('visualization', '1.0', {'packages':['corechart','line']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Create the data table. var data2 = new google.visualization.DataTable(); data2.addColumn('string', 'Topping'); data2.addColumn('number', 'Slices'); data2.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 15], ['Zucchini', 1], ['Pepperoni', 2] ]); var data3 = new google.visualization.DataTable(); data3.addColumn('string', 'Year'); data3.addColumn('number', 'Sales'); data3.addColumn('number', 'Expenses'); data3.addRows([ ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 860, 580], ['2007', 1030, 540] ]); // Set chart options var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300}; // Set chart options var options2 = {'title':'How Much Pizza You Ate Last Night', 'width':400, 'height':300}; // Set chart options var options3 = {'title':'Line chart', 'width':400, 'height':300}; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); var chart2 = new google.visualization.PieChart(document.getElementById('chart_div2')); chart2.draw(data2, options2); var chart3 = new google.visualization.LineChart(document.getElementById('chart_div3')); chart3.draw(data3, options3); } </script> </head> <body> <!--Divs that will hold the charts--> <div id="chart_div"></div> <div id="chart_div2"></div> <div id="chart_div3"></div> </body> </html> 
 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1.1", {packages:["bar"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Day/Month', 'Sales', 'Goal'], ['Daily', 33549.17,47328.04], ['MT-D', 96114.18,141984.12] ]); var data1 = google.visualization.arrayToDataTable([ ['Day/Month', 'Bookings', 'Goal'], ['Daily', 37991.21,47659.09], ['MT-D', 95610.47,142977.27] ]); var options = { colors: ['#e0aa0e', '#ecbb6e','green'], width: 800, chart: { title: 'Test Company Sales', subtitle: 'Sales vs Goal', } }; var options1 = { colors: ['#e0440e', '#ec8f6e','green'], width: 800, chart: { title: 'Test Company Bookings', subtitle: 'Bookings', } }; var chart = new google.charts.Bar(document.getElementById('sales')); chart.draw(data, options); var chart2 = new google.charts.Bar(document.getElementById('bookings')); chart2.draw(data1, options1); } </script> <div style="display: table; width: 100%;"> <div style="display: table-row"> <div id="sales" style="width: 900px; height: 500px; display: table-cell;"></div> <div id="bookings" style="width: 900px; height: 500px; display: table-cell;"></div> </div> </div> 

step_1। (किसी अन्य नाम के लिए id curve_chart को बदलना (जैसे.जये))

 <body> <div id="ajay" style="width: 900px; height: 500px"></div> 

step_2। (इस आईडी को स्क्रिप्ट तत्व में अपने चार्ट में असाइन करें) ..

  var chart = new google.visualization.LineChart(document.getElementById('ajay')); chart.draw(data, options); } </script>