कोई डेटा नहीं होने पर एक खाली Google चार्ट कैसे दिखाया जाए?

Question

कॉलम चार्ट ड्राइंग करने पर विचार करें और मुझे डेटा स्रोत से कोई डेटा नहीं मिलता है, हम लाल रंग के डिफ़ॉल्ट संदेश को दिखाने के बजाय एक खाली चार्ट कैसे आकर्षित करते हैं, "तालिका में कोई कॉलम नहीं है"। किसी भी मदद की सराहना की। अग्रिम में धन्यवाद!

Answer 1

मैं अपने चार्ट को 1 कॉलम और 1 डेटा पॉइंट (0 पर सेट) के साथ प्रारंभ करता हूं। फिर जब भी डेटा जोड़ा जाता है तो मैं जांचता हूं कि केवल 1 कॉलम है और यह डमी कॉलम है, तो मैं इसे हटा देता हूं। मैं पौराणिक कथाओं को शुरू करने के लिए भी छिपाता हूं ताकि यह डमी कॉलम के साथ दिखाई न दे, फिर जब मैं नया कॉलम जोड़ता हूं तो मैं इसे जोड़ता हूं।

यहां कुछ नमूना कोड है जो आप Google Visualization Playground पर प्लग इन कर सकते हैं जो मैं करता हूं। आपको खाली चार्ट को 2 सेकंड के लिए देखना चाहिए, फिर डेटा जोड़ा जाएगा और कॉलम दिखाई देंगे।

var data, options, chart; 

function drawVisualization() { 

    data = google.visualization.arrayToDataTable([ 
    ['Time', 'dummy'], 
    ['', 0], 
    ]); 

    options = { 
    title:"My Chart", 
    width:600, height:400, 
    hAxis: {title: "Time"}, 
    legend : {position: 'none'} 
    }; 

    // Create and draw the visualization. 
    chart = new google.visualization.ColumnChart(document.getElementById('visualization')); 
    chart.draw(data,options); 
    setTimeout('addData("12:00",10)',2000); 
    setTimeout('addData("12:10",20)',3000); 
} 

function addData(x,y) { 
    if(data.getColumnLabel(1) == 'dummy') { 
    data.addColumn('number', 'Your Values', 'col_id'); 
    data.removeColumn(1); 
    options.legend = {position: 'right'}; 
    } 

    data.addRow([x,y]); 
    chart.draw(data,options); 
}​ 

Answer 2

इस समस्या का एक बेहतर समाधान नीचे दिखाए गए डेटा कॉलम के बजाय एनोटेशन कॉलम का उपयोग करना हो सकता है। इस समाधान के साथ आपको अपने कॉलम को हटाने या छिपाने के लिए किसी भी सेटटाइम या कस्टम फ़ंक्शन का उपयोग करने की आवश्यकता नहीं है। दिए गए कोड को Google Code Playground में पेस्ट करके इसे आज़माएं।

function drawVisualization() { 
    var data = google.visualization.arrayToDataTable([ 
     ['', { role: 'annotation' }], 
     ['', ''] 
    ]); 

    var ac = new google.visualization.ColumnChart(document.getElementById('visualization')); 
    ac.draw(data, { 
     title : 'Just a title...', 
     width: 600, 
     height: 400 
    }); 
} 

Answer 3

तरह से मैंने किया था यह, पाई स्लाइस को निष्क्रिय करने के लिए एक नाटक मूल्य में टूलटिप्स, स्टफिंग को बंद करने और यह ग्रे बनाकर किया गया था। मुझे यकीन है कि ऐसा करने के लिए और अधिक चालाक तरीके हैं, लेकिन यह मेरे लिए काम करता है जहां अन्य विधियां नहीं थीं।

एकमात्र कमी यह है कि यह पौराणिक कथाओं में दोनों वस्तुओं को भूरे रंग में भी सेट करता है। मुझे लगता है कि आप शायद एक तीसरा आइटम जोड़ सकते हैं, और केवल किंवदंती पर इसे अदृश्य बना सकते हैं। हालांकि मुझे इस तरह पसंद आया।

function drawChart() { 
// Define the chart to be drawn. 
    data = new google.visualization.DataTable(); 
    data.addColumn({type: 'string', label: 'Result'}); 
    data.addColumn({type: 'number', label: 'Count'}); 
    data.addRows([ 
      ['Value A', 0], 
      ['Value B', 0] 
    ]); 

    var opt_pieslicetext = null; 
    var opt_tooltip_trigger = null; 
    var opt_color = null; 
    if (data.getValue(1,1) == 0 && data.getValue(0,1) == 0) { 
    opt_pieslicetext='none'; 
    opt_tooltip_trigger='none' 
    data.setCell(1,1,.1); 
    opt_color= ['#D3D3D3']; 
    } 
    chart = new google.visualization.PieChart(document.getElementById('mydiv')); 
    chart.draw(data, {sliceVisibilityThreshold:0, pieSliceText: opt_pieslicetext, tooltip: { trigger: opt_tooltip_trigger }, colors: opt_color }); 
}