1. घर
  2. सवाल और जवाब
  3. पंच कार्ड स्टाइल ग्राफ़ बनाने के लिए Highcharts.js का उपयोग

पंच कार्ड स्टाइल ग्राफ़ बनाने के लिए Highcharts.js का उपयोग

2012-02-14 11 views
6

मैं उच्च पंचों के माध्यम से जिथब पर प्रस्तुत "पंच-कार्ड" शैली ग्राफ को दोहराना चाहता हूं।पंच कार्ड स्टाइल ग्राफ़ बनाने के लिए Highcharts.js का उपयोग

GitHub Punch Card Graph

मैं वास्तव में इस एक के साथ संघर्ष कर रहा हूँ, यहाँ एक jsfiddle मुझे वहाँ पहुँचने के लिए शुरू होता है कि है। मैं एक्स पर वाई और समय पर दिन रखना चाहता हूं, लेकिन मुझे इस बात के नुकसान के बारे में पता होना चाहिए कि मुझे ऐसा करने के लिए कैसे जाना चाहिए।

किसी भी मदद की सराहना की।

टीआईए!

स्रोत

2012-02-14 Bobby B

+0

मैंगोबग के सुझाव के संशोधन के साथ अद्यतन jsfiddle। जो कुछ बचा है वह वाई-अक्ष पर समय प्राप्त करना है। –

+1

यहां एक और अपडेट है जो वाई और एक्स अक्ष लेबल आपको प्राप्त करता है: http://jsfiddle.net/CA2cT/8/ – Mark

+0

बिल्कुल सही खत्म करें! लाइन भर में खींचने के लिए धन्यवाद। –

उत्तर

8

मैं धुरी को फ्लिप करने में सक्षम नहीं था लेकिन आपके लिए बहुत सारी चीज़ें हल कर रहा था।

HTML:

<div id="container" style="height: 400px"></div>

जे एस:

var chart = new Highcharts.Chart({ 
chart: { 
    renderTo: 'container', 
    defaultSeriesType: 'scatter' 
}, 

xAxis: { 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
}, 
yAxis: { 

}, 
plotOptions: { 
    scatter: { 
     marker: { 
      radius: 4, 
      states: { 
       hover: { 
        enabled: true, 
        lineColor: 'rgb(100,100,100)' 
       } 
      } 
     }, 
     states: { 
      hover: { 
       marker: { 
        enabled: false 
       } 
      } 
     } 
    } 
}, 
series: [{ 
    data: [{y: 161}, {y: 167}, {y: 165}, {y: 140}, {y: 172}, {y: 163}, {y: 187}, {y: 107}, {y: 147}, {y: 145}, {y: 112}, {y: 199}] 
}] 
});

स्रोत

2012-02-14 14:55:25

+0

सुपर क्लोज़ - बहुत सराहना की। अगर मैं वाई-अक्ष पर घंटे 00:00 से 24:00 तक प्रदर्शित करने का तरीका समझ सकता हूं तो यह विजेता होगा। मैंने एक्स-अक्ष पर सन-सैट प्रदर्शित करने के लिए पहेली को अपडेट किया। मुझे करीब लाने के लिए धन्यवाद। –

+3

मुझे खुशी है कि मैं मदद की थी, हालांकि एक अप वोट वास्तव में उत्साहजनक रहा होगा: पी ** मजाक कर **। आगे सुधार के लिए देखने की कोशिश करेंगे। –

2

मैं updated the jsFiddle @mangobug से आप क्या चाहते हैं

स्रोत

2012-02-14 15:24:37 Grooveek

+0

'असहमत संदर्भ त्रुटि: हाईचार्ट्स परिभाषित नहीं किया गया है' –

4

करने का एक करीब तरीका करने के लिए आपका मार्गदर्शन करने के मुझे लगता है कि यह है देर से लेकिन शायद यह समाधान एक ही स्थिति में अन्य लोगों की मदद करेगा।

$(function() { 
    $('#container').highcharts({ 

    chart: { 
     defaultSeriesType: 'scatter' 
    }, 

    title: { 
     text: 'Punchcard' 
    }, 

    xAxis: { 
     type: "datetime", 
     dateTimeLabelFormats: { 
     hour: '%I %P' 
     }, 
     tickInterval: 3600000 * 1 
    }, 

    yAxis: { 
     categories: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], 
    }, 

    series: [{ 
     data: [ 

     {y: 0, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, 

     {y: 1, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, 

     {y: 2, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, 

     {y: 3, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, 

     {y: 4, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, 

     {y: 5, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, 

     {y: 6, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, 

     ] 
    }] 

    }); 

});

यहाँ और डेमो है:

यहाँ मेरी हल है http://jsfiddle.net/KmPJE/1/

मुझे पता है कि अगर आप के लिए काम करता है।

स्रोत

2013-07-01 23:02:30 kerberoS

+0

वास्तव में अच्छी नौकरी - पुरानी पोस्ट पर अच्छा अनुवर्ती। –

+0

कोई समस्या नहीं! मैं वर्तमान में बिखरने के बजाए बबल चार्ट का उपयोग करके बेहतर दृष्टिकोण पर काम कर रहा हूं। – kerberoS

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

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