below javascript google-chart
<script type="text/javascript"> google.load('visualization', '1.1', {packages: ['controls']}); </script> <script type="text/javascript"> function drawvisualization() { // prepare data var data = google.visualization.arraytodatatable([ ['country', 'position', 'prosthethis type', 'units'], ['europe', 'aortic', 'mechanical', 5007], ['europe', 'aortic', 'biological', 15434], ['europe', 'mitral', 'mechanical', 1974], ['europe', 'mitral', 'biological', 3550], ['france', 'aortic', 'mechanical', 803], ['france', 'aortic', 'biological', 2277], ['france', 'mitral', 'mechanical', 229], ['france', 'mitral', 'biological', 436] ]); var countrypicker = new google.visualization.controlwrapper({ 'controltype': 'categoryfilter', 'containerid': 'control4', 'options': { 'filtercolumnlabel': 'country', 'ui': { 'labelstacking': 'vertical', 'allowtyping': false, 'allowmultiple': false } }, 'state': {'selectedvalues': ['europe']} }); var regionpicker = new google.visualization.controlwrapper({ 'controltype': 'categoryfilter', 'containerid': 'control5', 'options': { 'filtercolumnlabel': 'position', 'ui': { 'labelstacking': 'vertical', 'allowtyping': false, 'allowmultiple': false } } }); var citypicker = new google.visualization.controlwrapper({ 'controltype': 'categoryfilter', 'containerid': 'control6', 'options': { 'filtercolumnlabel': 'prosthethis type', 'ui': { 'labelstacking': 'vertical', 'allowtyping': false, 'allowmultiple': false }, } }); var barchart = new google.visualization.chartwrapper({ 'charttype': 'barchart', 'containerid': 'chart3', 'options': { 'width': 400, 'height': 300, 'chartarea': {top: 0, right: 0, bottom: 0} }, // configure barchart use columns 2 (city) , 3 (population) 'view': {'columns': [2, 3]} }); new google.visualization.dashboard(document.getelementbyid('visualization2')). // configure controls that: // - 'country' selection drives 'region' one, // - 'region' selection drives 'city' one, // - , 'city' output drives chart bind(countrypicker, regionpicker). bind(regionpicker, citypicker). bind(citypicker, barchart). // draw dashboard draw(data); } google.setonloadcallback(drawvisualization); </script> this html page....
<html> <head> <title>untitled document</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['corechart']}); </script> </head> <body> <table width="100%" border="1" cellspacing="0" cellpadding="5" bordercolor="#333333"> <tr> <td bgcolor="#333333" class="heading-text">test</td> </tr> <tr> <td bgcolor="#ffffff" class="text" align="center" id="visualization2"><br/><br/> <table> <tr style='vertical-align: top'> <td style='width: 300px; font-size: 0.9em;'> <div id="control4"></div> <div id="control5"></div> <div id="control6"></div> </td> <td style='width: 600px'> <div style="float: left;" id="chart3"></div> <div style="float: left;" id="chart4"></div> </td> </tr> </table> </td> </tr> </td> </tr> </table> </body> </html>* i want 1 thing in graph: want 'biological' column in red , 'mechanical' in blue color.
currently columns in blue.
i found many sites different color column.....but don't work me.
please me.
thanks....
here solution.you need add
series: [{color: 'blue', visibleinlegend: true}, {color: 'red', visibleinlegend:false}] in options.
also not exact solution. workaround can add duplicate column , hide column other data except 1 need different color.
here working sample. more google chart related queries take @ this. jqfaq.com
Comments
Post a Comment