I'm afraid I can't help with that - you have a lot of custom code in there
that deals with manipulating SVG and all of it has to be converted to a VML
equivalent.
On Wednesday, May 8, 2013 10:38:30 AM UTC-4, malla reddy wrote:
>
> Thanks for reply Asgallant. Can you please provide alternate code path
> that works with VML for old versions of IE. Please.
>
>
> On Wednesday, 8 May 2013 19:32:26 UTC+5:30, asgallant wrote:
>>
>> IE 8 doesn't support the createElementNS method; it also doesn't support
>> SVG, so you need to have an alternate code path that works with VML for old
>> versions of IE.
>>
>> On Wednesday, May 8, 2013 5:46:05 AM UTC-4, malla reddy wrote:
>>>
>>> This is my wrapper class it is working fine in IE9. But i am getting
>>> error in IE8. The error is "Object doesn't support property or method
>>> 'createElementNS'". Please help me.
>>>
>>> google._setOnLoadCallback = google.setOnLoadCallback;
>>> google.setOnLoadCallback = function (callback) {
>>> function __overrides_chart_draw() {
>>> google.visualization.ChartWrapper.prototype._draw =
>>> google.visualization.ChartWrapper.prototype.draw;
>>> google.visualization.ChartWrapper.prototype.draw =
>>> function () {
>>> var __chart__ = this;
>>> __chart__._draw(arguments);
>>>
>>> var __table__ = __chart__.getDataTable().D;
>>> var __bars__ = $("svg > g:nth(2) > g > g:nth(1) > rect", $("#" +
>>> __chart__.dg.id));
>>> for (var ri = 0, rLen = __table__.length - 1; ri <= rLen; ri++) {
>>> var row = __table__[ri].c;
>>> var _total = 0;
>>> _total = getTotal(row);
>>> for (var ci = 1, cj = ri, cLen = row.length - 1; ci <= cLen;
>>> ci++, cj += __bars__.length / cLen) {
>>> var _el = __bars__[cj];
>>> // var _value = formatFloat((row[ci].v / _total) * 100);
>>> var _value = row[ci].v;
>>> if (_value <= 0)
>>> continue;
>>>
>>> var pos = {
>>> x: (parseFloat($(_el).attr("x")) +
>>> parseFloat($(_el).attr("width"))) - 26,
>>> y: parseFloat($(_el).attr("y")) +
>>> (parseFloat($(_el).attr("height")) / 2)
>>> };
>>> var __parent__ = $(_el).parent();
>>> _el1 = _el;
>>> __parent__1 = __parent__;
>>> pos1 = {
>>> x: (parseFloat($(_el).attr("x")) +
>>> parseFloat($(_el).attr("width"))) - 22,
>>> y: parseFloat($(_el).attr("y")) -0.0001
>>> };
>>> // __parent__.append(addTextNode({ x: pos.x, y: pos.y,
>>> stroke: 'none', 'font-family': "Segoe UI light", fill: 'black',
>>> 'font-size': 12 }, _value + "", _el))
>>>
>>> };
>>> //New Added Code
>>> try {
>>>
>>> __parent__1 = $(_el1).parent();
>>> __parent__1.append(addTextNode({ x: pos1.x, y: pos1.y,
>>> stroke: 'none', 'font-family': "Segoe UI light", fill: 'black',
>>> 'font-size': 10 }, _total, _el1))
>>> }
>>> catch (e) {
>>> alert(e)
>>> }
>>> };
>>> };
>>>
>>> function formatFloat(n) {
>>> if (n % 1 !== 0) {
>>> return n.toFixed(1);
>>> }
>>> return n;
>>> }
>>> function getTotal(row) {
>>> var _total = 0;
>>> for (var ci = 1, cLen = row.length - 1; ci <= cLen; ci++) {
>>> _total += row[ci].v;
>>> };
>>> return _total;
>>> }
>>>
>>> function addTextNode(attrs, text, _element) {
>>> var el1 = document.createElementNS('
>>> http://www.w3.org/2000/svg', "text");
>>> for (var k in attrs) {
>>> el1.setAttribute(k, attrs[k]);
>>> }
>>> var textNode = document.createTextNode(text);
>>> el1.appendChild(textNode);
>>> return el1;
>>> }
>>> callback.call();
>>> }
>>> google._setOnLoadCallback(__overrides_chart_draw);
>>> }
>>>
>>> On Monday, 6 May 2013 19:51:09 UTC+5:30, asgallant wrote:
>>>>
>>>> Can you post your code so I can see the problem in action?
>>>>
>>>> On Monday, May 6, 2013 8:34:53 AM UTC-4, malla reddy wrote:
>>>>>
>>>>> Hi,
>>>>> Thanks for your reply. I did it using wrapper class but i am facing
>>>>> some problems. The bar which have large value it doesn't showing label on
>>>>> top of bar which means scale max is 1000 but my value is 980 it is not
>>>>> showing the value. Please help me
>>>>>
>>>>> On Friday, 19 April 2013 18:22:30 UTC+5:30, asgallant wrote:
>>>>>>
>>>>>> You can calculate the text value dynamically in your DataView. As an
>>>>>> example:
>>>>>>
>>>>>> var view = new google.visualization.DataView(data);
>>>>>> view.setColumns([0, 1, [2, 3, 4....], {
>>>>>> type: 'number',
>>>>>> calc: function (dt, row) {
>>>>>> // return the sum of all columns
>>>>>> var sum = 0;
>>>>>> var numberOfColumns = dt.getNumberOfColumns();
>>>>>> for (var i = 1; i < numberOfColumns; i++) {
>>>>>> sum += dt.getValue(row, i);
>>>>>> }
>>>>>> return sum;
>>>>>> }
>>>>>> }, {
>>>>>> type: 'string',
>>>>>> calc: function (dt, row) {
>>>>>> // return the string value to use as the text
>>>>>> var sum = 0;
>>>>>> var numberOfColumns = dt.getNumberOfColumns();
>>>>>> for (var i = 1; i < numberOfColumns; i++) {
>>>>>> sum += dt.getValue(row, i);
>>>>>> }
>>>>>> return formatCurrencyLabel(sum);
>>>>>> }
>>>>>> }]);
>>>>>>
>>>>>> On Friday, April 19, 2013 5:27:05 AM UTC-4, malla reddy wrote:
>>>>>>>
>>>>>>> But that hard coded .In my case values are dynamic. How can i add
>>>>>>> the values .
>>>>>>>
>>>>>>>
>>>>>>> On Thursday, 18 April 2013 23:11:31 UTC+5:30, asgallant wrote:
>>>>>>>>
>>>>>>>> This is not supported in the Visualization API, though there is a
>>>>>>>> hack which you *may* be able to apply:
>>>>>>>> http://jsfiddle.net/asgallant/QjQNX/
>>>>>>>>
>>>>>>>> On Thursday, April 18, 2013 12:19:39 PM UTC-4, malla reddy wrote:
>>>>>>>>>
>>>>>>>>> I have google visualization api Column Chart with multiple data
>>>>>>>>> points in each bar i want to show the total in the top of the
>>>>>>>>> bar.please
>>>>>>>>> help me.
>>>>>>>>> In google charts api there is option called "Chm".but how can i
>>>>>>>>> use this option in google visualization Api Please suggest me.
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> <script type="text/javascript"
>>>>>>>>> src='https://www.google.com/jsapi?autoload={
>>>>>>>>> "modules":[{"name":"visualization","version":"1"}]}'>
>>>>>>>>> </script>
>>>>>>>>> <script type="text/javascript">
>>>>>>>>> formatCurrencyLabel = function ( value )
>>>>>>>>> {
>>>>>>>>> return "$" + String(value);
>>>>>>>>> }
>>>>>>>>>
>>>>>>>>> google.load("visualization", "1.0", { packages: ['coreChart'] });
>>>>>>>>>
>>>>>>>>> // google.load('visualization', '1');
>>>>>>>>>
>>>>>>>>> google.setOnLoadCallback(drawChart);
>>>>>>>>> function drawChart() {
>>>>>>>>>
>>>>>>>>> var data = new google.visualization.DataTable();
>>>>>>>>> data.addColumn('string', 'Months');
>>>>>>>>> data.addColumn('number', 'New Business');
>>>>>>>>>
>>>>>>>>> data.addRows([
>>>>>>>>> ['3/12',
>>>>>>>>>
>>>>>>>>> {v:{!Account.Producer_New_Business_12_Months_Prior__c},
>>>>>>>>> f:
>>>>>>>>> formatCurrencyLabel({!Account.Producer_New_Business_12_Months_Prior__c})}],
>>>>>>>>> ['4/12',
>>>>>>>>>
>>>>>>>>> {v:{!Account.Producer_New_Business_11_Months_Prior__c},
>>>>>>>>> f:
>>>>>>>>> formatCurrencyLabel({!Account.Producer_New_Business_11_Months_Prior__c})}],
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> ['5/12',
>>>>>>>>>
>>>>>>>>> {v:{!Account.Producer_New_Business_10_Months_Prior__c},
>>>>>>>>> f:
>>>>>>>>> formatCurrencyLabel({!Account.Producer_New_Business_10_Months_Prior__c})}],
>>>>>>>>>
>>>>>>>>> ['6/12',
>>>>>>>>>
>>>>>>>>> {v:{!Account.Producer_New_Business_9_Months_Prior__c},
>>>>>>>>> f:
>>>>>>>>> formatCurrencyLabel({!Account.Producer_New_Business_9_Months_Prior__c})}],
>>>>>>>>> ['7/12',
>>>>>>>>>
>>>>>>>>> {v:{!Account.Producer_New_Business_8_Months_Prior__c},
>>>>>>>>> f:
>>>>>>>>> formatCurrencyLabel({!Account.Producer_New_Business_8_Months_Prior__c})}],
>>>>>>>>> ['8/12',
>>>>>>>>>
>>>>>>>>> {v:{!Account.Producer_New_Business_7_Months_Prior__c},
>>>>>>>>> f:
>>>>>>>>> formatCurrencyLabel({!Account.Producer_New_Business_7_Months_Prior__c})}],
>>>>>>>>> ['9/12',
>>>>>>>>>
>>>>>>>>> {v:{!Account.Producer_New_Business_6_Months_Prior__c},
>>>>>>>>> f:
>>>>>>>>> formatCurrencyLabel({!Account.Producer_New_Business_6_Months_Prior__c})}],
>>>>>>>>> ['10/12',
>>>>>>>>>
>>>>>>>>> {v:{!Account.Producer_New_Business_5_Months_Prior__c},
>>>>>>>>> f:
>>>>>>>>> formatCurrencyLabel({!Account.Producer_New_Business_5_Months_Prior__c})}],
>>>>>>>>> ['11/12',
>>>>>>>>>
>>>>>>>>> {v:{!Account.Producer_New_Business_4_Months_Prior__c},
>>>>>>>>> f:
>>>>>>>>> formatCurrencyLabel({!Account.Producer_New_Business_4_Months_Prior__c})}],
>>>>>>>>> ['12/12',
>>>>>>>>>
>>>>>>>>> {v:{!Account.Producer_New_Business_3_Months_Prior__c},
>>>>>>>>> f:
>>>>>>>>> formatCurrencyLabel({!Account.Producer_New_Business_3_Months_Prior__c})}],
>>>>>>>>> ['1/13',
>>>>>>>>>
>>>>>>>>> {v:{!Account.Producer_New_Business_2_Months_Prior__c},
>>>>>>>>> f:
>>>>>>>>> formatCurrencyLabel({!Account.Producer_New_Business_2_Months_Prior__c})}],
>>>>>>>>> ['2/13',
>>>>>>>>> {v:{!Account.Producer_New_Business_1_Month_Prior__c},
>>>>>>>>> f:
>>>>>>>>> formatCurrencyLabel({!Account.Producer_New_Business_1_Month_Prior__c})}],
>>>>>>>>> ['3/13',
>>>>>>>>> {v:{!Account.Producer_New_Business_Month_to_Date__c},
>>>>>>>>> f:
>>>>>>>>> formatCurrencyLabel({!Account.Producer_New_Business_Month_to_Date__c})}]
>>>>>>>>> ]);
>>>>>>>>> var view = new google.visualization.DataView(data);
>>>>>>>>> view.setColumns([0, 1]);
>>>>>>>>> var options = {'title':'New Business Rolling For 13
>>>>>>>>> Months' , legend: 'left', align:'center',titleTextStyle: {color:
>>>>>>>>> 'Green'} ,
>>>>>>>>>
>>>>>>>>> colors:['#70A1D4'],displayMarker:true,showLabels:true,
>>>>>>>>> curveType: 'function',seriesType: "bars",
>>>>>>>>> forceIFrame:
>>>>>>>>> true,showValueLabels:true,enableRegionInteractivity:true,markerOpacity:'0.5',
>>>>>>>>>
>>>>>>>>> hAxis: { viewWindowMode: 'explicit' },
>>>>>>>>> 'width':560,
>>>>>>>>> 'height':228};
>>>>>>>>>
>>>>>>>>> var chart = new
>>>>>>>>> google.visualization.ColumnChart(document.getElementById('chart_div'));
>>>>>>>>> chart.draw(view, options);
>>>>>>>>> google.visualization.events.addListener(chart,
>>>>>>>>> 'onmouseover', barMouseOver);
>>>>>>>>> google.visualization.events.addListener(chart,
>>>>>>>>> 'onmouseout', barMouseOut);
>>>>>>>>> }
>>>>>>>>> function barMouseOver(e) {
>>>>>>>>> chart.setSelection([e]);
>>>>>>>>> }
>>>>>>>>>
>>>>>>>>> function barMouseOut(e) {
>>>>>>>>> chart.setSelection([{'row': null, 'column': null}]);
>>>>>>>>> }
>>>>>>>>> </script>
>>>>>>>>> <body><div id="chart_div"></div></body>
>>>>>>>>>
>>>>>>>>
--
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
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.
