Welcome Guest Search | Active Topics |

Y-Axis Numeric Formatting
gstempel
#1 Posted : Tuesday, June 19, 2012 2:33:27 PM(UTC)
Rank: Newbie

Groups: Registered
Joined: 6/19/2012(UTC)
Posts: 7

Thanks: 3 times
Was thanked: 0 time(s) in 0 post(s)
How can I format Y-Axis numeric values with comma separator for thousands? (I have reviewed the forums and documentation and cannot find this info).

Thank you!
Dragan
#2 Posted : Wednesday, June 20, 2012 4:05:17 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Hi,

We’re ready with this feature, but it is not released yet. If you want, I’ll send you a working version, which supports this.
Best Regards,
Dragan Matek
jqChart Inc.
gstempel
#3 Posted : Wednesday, June 20, 2012 7:14:43 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 6/19/2012(UTC)
Posts: 7

Thanks: 3 times
Was thanked: 0 time(s) in 0 post(s)
Wow! That would be great.

What are the differences between the trial version and the paid version?

Thank you!
Dragan
#4 Posted : Wednesday, June 20, 2012 7:44:14 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
I’ve sent you a custom version via email.

There is no difference in the functionality between the trial and the paid version. In the paid version the trial watermark (www.jqchart.com) is removed and of course you can use the paid version in production.
Best Regards,
Dragan Matek
jqChart Inc.
gstempel
#5 Posted : Wednesday, June 20, 2012 11:14:36 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 6/19/2012(UTC)
Posts: 7

Thanks: 3 times
Was thanked: 0 time(s) in 0 post(s)
Hi Dragan,

From what I can see, I need to include the javascript functions from DataSourceBinding.aspx into my view, and change the id reference from jqchart to the id of my graph.

Having done that, the tool tips now show the numbers with commas at appropriate locations, but the labels on the y-axis are unchanged. I traced the javascript using firebug, and the code for adjusting the labels is never reached. Here is the code I included at the top of my view (before the graph code):

<script lang="javascript" type="text/javascript">
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}

$(document).ready(function () {


$('#incurredWC').bind('tooltipFormat', function (e, data) {
return '$' + addCommas(data.y);
});

$('#incurredWC').bind('axisLabelCreating', function (event, data) {
if (data.context.axis.location == 'left') {
data.text = '$' + addCommas(data.text);
}
});

});

function updateChart(data) {
// get current series
var series = $('#incurredWC').jqChart('option', 'series');

// set the new data to the first series
series[0].data = data;

// update (redraw) the chart
$('#incurredWC').jqChart('update');
}

</script>

Also, if I have more than one graph on a page, I will need to replicate this code, altering the chart ID, for each. Is that correct?

Thanks,
Gene
Dragan
#6 Posted : Wednesday, June 20, 2012 12:55:07 PM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Hi Gene,

Actually, you don’t need the updateChart method.

Quote:
but the labels on the y-axis are unchanged. I traced the javascript using firebug, and the code for adjusting the labels is never reached.

In the sample I’ve sent you the y-labels are changed. Is it possible to send me your code, so I can look at it?

Quote:
Also, if I have more than one graph on a page, I will need to replicate this code, altering the chart ID, for each. Is that correct?

Yes, that’s correct. You can also have one function, which is called from the event handlers for each chart.
Best Regards,
Dragan Matek
jqChart Inc.
1 user thanked Dragan for this useful post.
gstempel on 6/20/2012(UTC)
gstempel
#7 Posted : Wednesday, June 20, 2012 1:32:35 PM(UTC)
Rank: Newbie

Groups: Registered
Joined: 6/19/2012(UTC)
Posts: 7

Thanks: 3 times
Was thanked: 0 time(s) in 0 post(s)
Before troubling you further, I will run the samples you provided and see if I can determine the problem on my end.

I definitely appreciate your help though, and will keep you posted.

Best regards,
Gene
gstempel
#8 Posted : Wednesday, June 20, 2012 3:47:15 PM(UTC)
Rank: Newbie

Groups: Registered
Joined: 6/19/2012(UTC)
Posts: 7

Thanks: 3 times
Was thanked: 0 time(s) in 0 post(s)
Hi Dragan,

I got it working! Thank you very much. In order to avoid replicating the code multiple times for each graph, I modified the javascript binding code as follows:

$(document).ready(function () {
var ids = ['#incurredWC', '#reservesWC', '#incurredAL', '#reservesAL', '#incurredGL', '#reservesGL'];
for (i = 0; i < ids.length; i++ ) {
$(ids[i]).bind('tooltipFormat', function (e, data) {
return '$' + addCommas(data.y);
});

$(ids[i]).bind('axisLabelCreating', function (event, data) {
if (data.context.axis.location == 'left') {
data.text = '$' + addCommas(data.text);
}
});
}
});

The Javascript provided does not work for the tooltip on a pie chart however. When I include the IDs for my pie charts, the tooltip for a pie segment shows "$undefined". I am guessing this is because the data element passed to the addCommas function is not a pure number, but includes the legend title and percentage. Not a problem. I can probably parse the data passed to the binding function to split the number out of the legend and percent and then reformat.

Anyway, thank you again for your assistance. You have been extremely helpful.

Best regards,
Gene

Ok. I did some more investigating. Apparently, this technique only works for standard column charts. When I include a stacked column chart, the y-axis is rendered with commas. However, the tooltip shows commas, but now aggregates the bar with all previous segments below. If I don't include the graph in the binding list, the tool tip show the amount for just the one segment the mouse is hovered over. Also, it appears that the value passed to the tooltip bind is not a string, so I can't parse out the value to add commas to.

What are your thoughts?

Thanks,
Gene
Dragan
#9 Posted : Thursday, June 21, 2012 2:50:05 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Hi,

Take a look at the end of this document:
http://www.jqchart.com/documentation/userguide/default.aspx#!Tooltips

For the pie chart instead of “data.y”, you need to use “data.value”.

In the stacked series if you don’t want to use the accumulated value, you can use the “data.value” as well.
Best Regards,
Dragan Matek
jqChart Inc.
1 user thanked Dragan for this useful post.
gstempel on 6/21/2012(UTC)
gstempel
#10 Posted : Thursday, June 21, 2012 9:05:12 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 6/19/2012(UTC)
Posts: 7

Thanks: 3 times
Was thanked: 0 time(s) in 0 post(s)
Perfect! Thank you!

I want to say that of all the MVC chart rendering libraries out there, jqChart is by far the easiest to implement. We are planning to purchase a developers license shortly, in part because of your quick and helpful responses to our questions.

I do have one final question (at least until we purchase the developer's license).

I would like to have the graph title split to 2 or more lines. Embedding html "breaks" in the title declaration renders the html break as text. Is it possible to do this, either in the declaration, or through a similar binding you demonstrated for the axis values and tooltips?

Thanks again!
Gene
Dragan
#11 Posted : Thursday, June 21, 2012 9:50:55 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Currently, the jqChart supports only single line title. If you need more complex titles, you can probably put a standard HTML above the chart.
Best Regards,
Dragan Matek
jqChart Inc.
1 user thanked Dragan for this useful post.
gstempel on 6/21/2012(UTC)
Users browsing this topic
Guest (10)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

FlatEarth Theme by Jaben Cargman (Tiny Gecko)
Powered by YAF 1.9.4 | YAF © 2003-2010, Yet Another Forum.NET
This page was generated in 0.188 seconds.