मैं एक प्रकार का स्टैक्ड एरिया चार्ट बनाने के बारे में कैसे जाउंगा? [jQuery, Google चार्ट, आदि]

मेरे पास कुछ डेटा है जिसके लिए मुझे चार्ट बनाना है। मुद्दा यह है कि डेटा की कीमतों की सीमा है। इनमें से कुछ कीमतों में उनके बीच कुछ ओवरलैप है। इसके अतिरिक्त, सभी मूल्य सीमाओं में ऊपरी और निचली सीमाएं हैं जो शून्य मान नहीं हैं। enter image description here मैं एक प्रकार का स्टैक्ड एरिया चार्ट बनाने के बारे में कैसे जाउंगा? [jQuery, Google चार्ट, आदि]

मैं एक jQuery चार्ट या Google चार्ट कि मेरी जरूरतों फिट बैठता है खोजने की कोशिश की है, लेकिन अब तक असमर्थ रहे हैं:

यहाँ एक छवि एक तरह से समझाने के लिए यह है कि मैं क्या पूरा करने के लिए देख रहा हूँ है ऐसा करने के लिए। ऐसी कुछ चीजें हैं जो मैं ढूंढ रहा हूं, उदाहरण के लिए चरणबद्ध चार्ट, लेकिन उनमें सभी की आवश्यकताएं हैं जैसे "कोई ओवरलैपिंग मान" या "शून्य पर शुरू होता है"। मैं एक कैंडलस्टिक चार्ट का उपयोग करने के बारे में भी सोच रहा था, लेकिन आप वास्तव में ओवरलैप्ड क्षेत्रों को अलग नहीं कर सकते हैं, जो मेरे डेटासेट के लिए महत्वपूर्ण हैं।

क्या यह कुछ उपलब्ध है? क्या मैं सिर्फ गलत जगहों पर देख रहा हूं? आपकी सहायता के लिए अग्रिम धन्यवाद।

स्रोत

2012-06-11 Jim P

ऐसा लगता है कि आप मौसम श्रृंखला डेटा को विज़ुअलाइज़ करने के समान कुछ करना चाहते हैं, जो कि मैं पिछले कुछ घंटों को कैसे समझ सकता हूं।

यह नहीं कह सकता कि मैं वास्तव में जानता हूं कि आप Google चार्ट के साथ क्या करना चाहते हैं, लेकिन http://dygraphs.com/ पर लाइब्रेरी वास्तव में स्नैज़ी दिखती है।

वेबसाइट से:

Stacked line graph.

स्रोत

2012-06-24 22:11:07 aendrew

मैं रेखांकन के इन प्रकार के साथ काफी कुछ expierence है। एक जटिल उदाहरण my site देखें। एक सरलीकृत समाधान इस तरह कोडित किया जा सकता है:

<html> 
    <head> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load('visualization', '1', {packages: ['corechart']}); 
    </script> 
    <script type="text/javascript"> 
     function drawVisualization() { 
     // Fill data object, first row contains legend text, which in 
     // this example contains the calculation rules. 
     var data = google.visualization.arrayToDataTable([ 
      ['Month', 'min(Dataset1)', 'max(Dataset1)-min(Dataset1)', 
      'min(Dataset2)-max(Dataset1)', 'max(Dataset2)-min(Dataset2)', 
      'min(Dataset3)-max(Dataset2)', 'max(Dataset3)-min(Dataset3)'], 
      ['2004/05', 1, 2, 2, 2, 5,4], 
      ['2005/06', 2, 3, 1, 1, 3,3], 
      ['2006/07', 3, 4, 0, 2, 0,2], 
      ['2007/08', 3, 4, -1, 2, -5,2], 
      ['2008/09', 4, 4, -2, 3, -9,1] 
     ]); 

     // Create and draw the visualization. 
     var ac = new google.visualization.AreaChart(
     document.getElementById('visualization')); 
     ac.draw(data, { 
      isStacked: true, 
      chartArea:{left:"5%",top:"2%",width:"50%",height:"93%"}, 
      series: { 
      0:{color: 'transparent'}, 
      2:{color: 'transparent'}, 
      4:{color: 'transparent'}, 
      } 
     }); 
     } 
     google.setOnLoadCallback(drawVisualization); 
    </script> 
    </head> 
    <body> 
    <div id="visualization" style="width: 600px; height: 400px;"></div> 
    </body> 
</html>

क्या हम ऊपर कोड में क्या श्रृंखला की संख्या नकल है। प्रत्येक श्रृंखला एक पारदर्शी श्रृंखला परत से पहले की जाएगी जो पिछले श्रृंखला की दूरी के रूप में ऊंचाई के रूप में है।

सरलीकृत समाधान का एक स्क्रीनशॉट: A screenshot of the simplified solution (code shown above)

जटिल समाधान का एक स्क्रीनशॉट: A screenshot of the complex solution implemented on my site allepeilingen.com

स्रोत

2012-10-29 12:00:29 Ruut

मैं एक प्रकार का स्टैक्ड एरिया चार्ट बनाने के बारे में कैसे जाउंगा? [jQuery, Google चार्ट, आदि]

उत्तर

संबंधित मुद्दे