Google विज़ुअलाइज़ेशन चार्ट

Question

पर छवियां जोड़ना मैं Google विज़ुअलाइज़ेशन चार्ट में छवियों को कैसे जोड़ सकता हूं।

नीचे स्क्रिप्ट जो मैं कोशिश कर रहा हूँ

google.setOnLoadCallback(drawChart); 
 
function drawChart() { 
 
    var container = document.getElementById('example4.2'); 
 
    var chart = new google.visualization.Timeline(container); 
 
    var dataTable = new google.visualization.DataTable(); 
 

 
    dataTable.addColumn({ type: 'string', id: 'Role' }); 
 
    dataTable.addColumn({ type: 'string', id: 'Name' }); 
 
    dataTable.addColumn({ type: 'date', id: 'Start' }); 
 
    dataTable.addColumn({ type: 'date', id: 'End' }); 
 
    dataTable.addRows([ 
 
    [ 'President', 'George Washington', new Date(0,0,0,12,0,0), new Date(0,0,0,12,3,0) ], 
 
    [ 'President', '<img class="devsite-avatar" src="http://i.stack.imgur.com/FVDLV.jpg?s=32&g=1">John Adams', new Date(0,0,0,12,3,3), new Date(0,0,0,12,14,0) ], 
 
    [ 'President', 'Thomas Jefferson', new Date(0,0,0,12,15,1), new Date(0,0,0,12,28,0) ], 
 
    [ 'President', '', new Date(0,0,0,13,0, 0), new Date(0,0,0,13,0,0) ] 
 
\t 
 
\t ]); 
 

 
    var options = { 
 
    timeline: { groupByRowLabel: true }, 
 
\t allowHTML: true, 
 
\t avoidOverlappingGridLines: false 
 
    }; 
 

 
    chart.draw(dataTable, options); 
 
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization', 
 
     'version':'1','packages':['timeline']}]}"></script> 
 

 
<div id="example4.2" style="height: 200px;"></div>

कृपया मेरी मदद को समझने के लिए मैं यहाँ क्या याद आ रही है है।

Answer 1

ऐसा लगता है कि allowHTML विकल्प google.visualization.Timeline वस्तु लिए समर्थित नहीं है, लेकिन आप नीचे दिखाए (इस उदाहरण में पट्टी में डालने छवि) एसवीजी अनुकूलित करने के लिए एक बार चार्ट प्रदान की गई है पर विचार कर सकते:

google.load('visualization', '1.0', { 
 
    'packages': ['timeline','annotatedtimeline'] 
 
}); 
 
google.setOnLoadCallback(drawChart); 
 
function drawChart() { 
 
    var container = document.getElementById('example4.2'); 
 
    var chart = new google.visualization.Timeline(container); 
 
    
 

 
    var dataTable = new google.visualization.DataTable(); 
 
    dataTable.addColumn({ type: 'string', id: 'Role' }); 
 
    dataTable.addColumn({ type: 'string', id: 'Name' }); 
 
    dataTable.addColumn({ type: 'date', id: 'Start' }); 
 
    dataTable.addColumn({ type: 'date', id: 'End' }); 
 
    dataTable.addRows([ 
 
     ['President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)], 
 
     ['President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)], 
 
     ['President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]]); 
 

 
    var options = { 
 
     timeline: { groupByRowLabel: false} 
 
    }; 
 

 
    chart.draw(dataTable, options); 
 
    configureChart(); 
 
} 
 

 

 
function configureChart() { 
 
    var chartContainer = document.getElementById('example4.2'); 
 
    var svg = chartContainer.getElementsByTagName('svg')[0]; 
 

 
    var barLabels = svg.querySelectorAll("text[text-anchor='start']"); 
 
    for (var i = 0; i < barLabels.length; i++) { 
 
     if (barLabels[i].innerHTML == "George Washington") { 
 
      var barArea = barLabels[i].previousSibling; 
 
      var x = barArea.getAttribute('x'); 
 
      var y = barArea.getAttribute('y'); 
 
      var presidentIcon = createImage({ href: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Lawrence_Washington.jpg', x: x, y: y, width: 20, height: 20 }); 
 
      barArea.parentElement.appendChild(presidentIcon); 
 
      barLabels[i].setAttribute('x', parseFloat(x) + 20); 
 
     } 
 
    } 
 
} 
 

 

 
function createImage(options) { 
 
    var image = document.createElementNS('http://www.w3.org/2000/svg', 'image'); 
 
    image.setAttributeNS(null, 'height', options.height); 
 
    image.setAttributeNS(null, 'width', options.width); 
 
    image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', options.href); 
 
    image.setAttributeNS(null, 'x', options.x); 
 
    image.setAttributeNS(null, 'y', options.y); 
 
    image.setAttributeNS(null, 'visibility', 'visible'); 
 
    return image; 
 
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<div id="example4.2" style="height: 600px;"></div>