*Thank you. All the updates are working perfectly.
Two final upgrades (see link): http://www.verdegia.com/3.jpg <http://www.verdgeia.com/3.jpg> ------------ 1. IN RED - its not much use showing the vAxis labels in short hand, hence i would like to add a greater explination, e.g. FAC - FORCED AIR COOLED or S - SEALED. This also applies to 400, as i would like to display after this number "Watts Max." I have looked at the tooltip options but am lost when dealing with arrayToDataTable. 2. IN GREEN - >From the code you have seen above there is a lsit of links in one column. I would like to be able to "click" on the bar or tooltip to follow its respective link. * *I have see this example: http://stackoverflow.com/questions/6205621/how-to-add-links-in-google-chart-api I have no clue how to implement this. ------------------------ Here is the full code now in use (with your mods :-) ): *<script type="text/javascript" src="http://www.google.com/jsapi";></script> <script type="text/javascript"> google.load('visualization', '1.1', {packages: ['controls']}); function drawVisualization() { var data = google.visualization.arrayToDataTable([ ['Type', 'Sealed', 'Watts', 'Slots','Link'], ['FAC' , 'NO', 400, 5,'http://www.yahoo.co.uk'], ['S', 'YES', 400, 5,'http://www.yahoo.co.uk'], ['SEF', 'YES', 400, 5,'http://www.yahoo.co.uk'], ['HES', 'YES', 575, 5,'http://www.yahoo.co.uk'], ['SIXHEX', 'YES', 575, 5,'http://www.yahoo.co.uk'], ['SIXHEX-HP', 'YES', 575, 5,'http://www.yahoo.co.uk'], ['FAC' , 'NO', 500, 7,'http://www.yahoo.co.uk'], ['S', 'YES', 500, 7,'http://www.yahoo.co.uk'], ['SEF', 'YES', 500, 7,'http://www.yahoo.co.uk'], ['HES', 'YES', 825, 7,'http://www.yahoo.co.uk'], ['SIXHEX', 'YES', 825, 7,'http://www.yahoo.co.uk'], ['SIXHEX-HP', 'YES', 825, 7,'http://www.yahoo.co.uk'], ['FAC', 'NO', 1050, 12,'http://www.yahoo.co.uk'], ['S', 'YES', 1050, 12,'http://www.yahoo.co.uk'], ['SEF', 'YES', 1050, 12,'http://www.yahoo.co.uk'], ['HES', 'YES', 1550, 12,'http://www.yahoo.co.uk'], ['SIXHEX', 'YES', 1550, 12,'http://www.yahoo.co.uk'], ['SIXHEX-HP', 'YES', 1550, 12,'http://www.yahoo.co.uk'] ]); var namePicker = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'control1', options: { filterColumnLabel: 'Type', ui: { labelStacking: 'vertical', allowTyping: false, allowMultiple: false } } }); // Define a slider control for the Age column. var slider = new google.visualization.ControlWrapper({ controlType: 'NumberRangeFilter', containerId: 'control2', width: '100%', options: { filterColumnLabel: 'Watts', minValue: 300, maxValue: 1550, ui: { labelStacking: 'vertical' } } }); // Define a category picker control for the Sealed column var categoryPicker = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'control3', options: { filterColumnLabel: 'Sealed', ui: { labelStacking: 'vertical', allowTyping: false, allowMultiple: false } } }); // Define a category picker control for the Slots column var slotPicker = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'control4', options: { filterColumnLabel: 'Slots', ui: { labelStacking: 'vertical', allowTyping: false, allowMultiple: true } } }); // Define a Bar chart var bar = new google.visualization.ChartWrapper({ chartType: 'BarChart', containerId: 'chart1', view: { columns: [0, { type: 'number', label: '5 Slot', calc: function (dt, row) { return (dt.getValue(row, 3) == 5) ? dt.getValue(row, 2) : null; } }, { type: 'number', label: '7 Slot', calc: function (dt, row) { return (dt.getValue(row, 3) == 7) ? dt.getValue(row, 2) : null; } }, { type: 'number', label: '12 Slot', calc: function (dt, row) { return (dt.getValue(row, 3) == 12) ? dt.getValue(row, 2) : null; } }, {sourceColumn: 3,role:'tooltip'}] }, options: { width:'100%', height:310, isStacked: true, colors:['#00529C','#5295d1','#98cdfc'], backgroundColor: { fill: 'transparent' }, chartArea:{ left:'15%', height:'80%', width:'70%', top:0 }, legend: { textStyle: { color: 'white' } }, hAxis: { title: 'Total System Power (Watts)', textStyle:{ color: 'white' }, titleTextStyle:{ color: 'white', } }, vAxis: { textStyle:{ color: 'white', } } } }); if ($.browser.msie && $.browser.version < 9) { bar.setOption('backgroundColor.fill', '#222224'); bar.setOption('legend.textStyle.fontSize','9'); bar.setOption('vAxis.textStyle.fontSize','9'); } // Create a dashboard var chart = new google.visualization.Dashboard(document.getElementById('dashboard')). // Establish bindings, declaring the both the slider and the category // picker will drive both charts. bind([namePicker, slotPicker, slider, categoryPicker], [bar]); // Draw the entire dashboard. chart.draw(data);* //hyperlink to selection - not working !! var selectHandler = function(e) { window.location = data.getValue(chart.getSelection()[0]['row'], 3 ); } // Add our selection handler. google.visualization.events.addListener(chart, 'select', selectHandler); } //hyperlink to selection - not working !! * google.setOnLoadCallback(drawVisualization); </script>* I have to thank you wholeheartedly. Do you have a donation page? Thank you again Sir! * -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
