Google चार्ट टाइमलाइन ग्रिड - समयरेखा लेबल अवधि

Question

मैं मल्टीपार्ट प्रक्रिया की समयरेखा तैयार करने के लिए Google चार्ट एपीआई का उपयोग कर रहा हूं। अभी यह स्वचालित रूप से समायोजित किया गया है; ग्रिड लाइनों के बीच की खिड़की के नीचे दिखाए गए चार्ट के लिए दो दिन है, और यदि मैं और अधिक घटनाएं डालता हूं तो यह एक सप्ताह या इससे भी अधिक हो सकता है ताकि चार्ट अपठनीय हो।

चार्ट को स्वचालित रूप से समायोजित करने के बजाय हर दिन ग्रिड लाइनों को आकर्षित करने के लिए कैसे सेट करें? या क्या इस एपीआई का कोई विकल्प है, मैं इसे अनुकूलित करने के लिए अपने स्रोत कोड का उपयोग कर सकता हूं?

Answer 1

यह आप disppoinsed सकता है एक सतत चार्ट के लिए चरणों का सेट करने के लिए कोई रास्ता नहीं है कि वहाँ।

लेकिन आप अपने चरण और समयरेखा चौड़ाई के अनुसार gridlines:{count: } सेट कर सकते हैं।

Answer 2

इसे उत्तरदायी बनाओ, यह लिंक एक उदाहरण है। इसे देखें

https://codepen.io/flopreynat/pen/BfLkA

HTML:

<div class="row"> 
    <div class="col-md-12 text-center"> 
    <h1>Make Google charts responsive</h1> 
    <p>Full blog post details <a href="http://flopreynat.com/blog/make-google-charts-responsive.html">on my blog</a></p> 
    </div> 
    <div class="col-md-4 col-md-offset-4"> 
    <hr /> 
    </div> 
    <div class="clearfix"></div> 
    <div class="col-md-6"> 
    <div id="chart_div1" class="chart"></div> 
    </div> 
    <div class="col-md-6"> 
    <div id="chart_div2" class="chart"></div> 
    </div> 
</div> 

सीएसएस:

.chart { 
    width: 100%; 
    min-height: 450px; 
} 

जे एस:

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart1); 
function drawChart1() { 
    var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', 'Expenses'], 
    ['2004', 1000,  400], 
    ['2005', 1170,  460], 
    ['2006', 660,  1120], 
    ['2007', 1030,  540] 
    ]); 

    var options = { 
    title: 'Company Performance', 
    hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
}; 

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1')); 
    chart.draw(data, options); 
} 

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart2); 
function drawChart2() { 
    var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', 'Expenses'], 
    ['2013', 1000,  400], 
    ['2014', 1170,  460], 
    ['2015', 660,  1120], 
    ['2016', 1030,  540] 
    ]); 

    var options = { 
    title: 'Company Performance', 
    hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, 
    vAxis: {minValue: 0} 
    }; 

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div2')); 
    chart.draw(data, options); 
} 

$(window).resize(function(){ 
    drawChart1(); 
    drawChart2(); 
}); 

// अनुस्मारक: आप https://www.google.com/jsapi लगाने की जरूरत है मैं n आपके दस्तावेज़ का प्रमुख या कोडपेन //