Font size and quality of charts

Share RGraph:   Share or Like RGraph on Facebook!

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by ByteBlocks on 25th March 2013
Hi,
I am new to RGraph. This question may be something that has already been answered.
I am plotting a bar chart on my page. The chart is rendering but it has following issues.
  1. The quality of image is very poor.
  2. The font used to draw axis labels and titles is very big.
  3. When I tried to control text size and set it to 5, image became more blurry that it was originally.

I looked at your examples and demo and they look fine. I am not doing anything special here.

Here is js that I used.

var displayData = getChartDisplayData(chartData);
             var bar = new RGraph.Bar('sectorChartCanvas', displayData.numbers);
             var left = 35;
             var right = left + 400;
             bar.Set('chart.gutter.left', left);
             bar.Set('chart.colors', ['blue']);
             bar.Set('chart.text.size', 5);
             bar.Set('chart.bevel', true);
             bar.Set('chart.colors.sequential', true);
             bar.Set('chart.shadow', true);
             bar.Set('chart.shadow.color', '#ccc');
             bar.Set('chart.title', 'Company Sectors');
             bar.Set('chart.labels', displayData.labels);
             bar.Draw();
Posted by RGraph support on 25th March 2013
Hi there,

Are you sizing the canvas with CSS? You should use the HTML attributes like this:

<canvas id="sectorChartCanvas" width="600" height="250">[No canvas support]</canvas>


Richard, RGraph Support
Posted by ByteBlocks on 25th March 2013
Here is what I am using..
<canvas id="sectorChartCanvas" style="height:300px;width: 450px;"></canvas>
Posted by RGraph support on 25th March 2013
Hi there,

So yes then. Use the canvas tag that I posted above that uses the HTML width/height attributes.


Richard
Posted by ByteBlocks on 25th March 2013
I have deployed the chart on web site for you to see how it looks. The page is not lined to anything at the moment because it is work in progress.

www.byteblocks.com/trade/companysectors.aspx

Based on this, I have couple of questions.
1. As you can see that labels on x-axis are rather long. Is there any setting that allows x-axis labels to use multiple lines instead of one?
2. Is there an event that I can hook into to control text on axis label?

Thanks
Posted by RGraph support on 25th March 2013
Hi there,

1. You could start alternate labels with a CRLF - thereby putting them on separate lines:

bar.Set('chart.labels', ['Long label','\r\nLong label','Long label','\r\nLong label']);

2. No. What is it that you want to do with the text? You could use the text drawing API object (it's currently in the beta only) but you'd need to position it yourself:

www.rgraph.net/docs/drawing-api-text.html


Richard, RGraph Support
Posted by ByteBlocks on 25th March 2013
Looks like multi-line is going to need more than simply adding line breaks in text. Your positioning algorithm will have to take into account that height required for x-axis zone is not double or more and then calculate chart section size accordingly.

I have deployed new changes with line break and you can see how second line just disappeared because of the height of that section.

I need to do some more digging around to see how this can be controlled little bit better.
Posted by RGraph support on 25th March 2013
Hi there,

Simply increase the chart.gutter.bottom size. The default is 25 so try setting it to 35.


Richard, RGraph Support

Add a reply




« Back to message list