Atom

Fine tuning chart attributes

Recommended Posts

Hi,

 

You can customize the chart visuals by using the configuration attributes supported for setting the chart cosmetics. For example, you can set the attribute "lineThickness" to define the thickness of the line in a line chart. To set the base font for any text element on the chart set "baseFontSize" or "baseFont".

Also specific font attributes are also supported for individual elements like "labelFontSize" to set font size for x-axis labels, or "valueFontSize" for data plot values.

Please refer to the attributes list for each chart types available : https://www.fusioncharts.com/dev/chart-attributes/line

Also check the documentation for further reference : https://www.fusioncharts.com/dev/chart-guide/chart-configurations/data-plot

For font configuration : https://www.fusioncharts.com/dev/chart-guide/chart-configurations/fonts

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>'<?php echo $_GET["sysname"] ?>'</title>
        <link href="styles.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript" src="FusionCharts/js/fusioncharts.js"></script>
        <script type="text/javascript" src="FusionCharts/js/fusioncharts.charts.js"></script>
        <style type="text/css"></style>
        
     
    <?php 
    $DataFile = "clientFTP/".$_GET["sysname"].$_GET["period"].$_GET["DFS"].".xml";
    $CType = $_GET["ChtType"];
    ?>
    
    
    
        <script type="text/javascript">
        FusionCharts.ready(function(){
        var fusioncharts = new FusionCharts({
        type: '<?php echo $CType ?>',
        renderAt: 'chartContainer',
        width: '500',
        height: '300',
        lineThickness: '1',
        lineColor: 'FFFFFF',
        dataFormat: 'xmlurl',
        dataSource: '<?php echo $DataFile ?>',
        });
        fusioncharts.render();
        });
        </script>
    </head>
    <body class="twoColFixLtHdr">
    
    <div id="container">
    <div id="header" class="fltlft"><img src="images/logo.jpg" alt="SIF Trading Systems Logo" class="fltlft" />
    <img src="images/software_box.jpg" alt="Software Box" class="fltrt" /> 					    
    </div>
    <br class="clearfloat" /> 
    <div id="chartContainer" style="margin-left: 200px"></div> 
    <div style="margin-left: 200px"><br>
	<p>This chart is automatically updated directly from a TradeStation chart.</p><!--<p>This chart does not include the current month.</p>-->
	<p style="margin-right: 125px">PAST PERFORMANCE WHETHER REAL OR HYPOTHETICAL IS NO GUARANTEE OF FUTURE RESULTS.</p></div>
	<div id="footer">
	<p><a href="<?php echo $_GET["sysname"] ?>JS.html"><?php echo $_GET["sysname"] ?></a></p>
	</div>
        </div>

    
    </body>
</html>

Changing the lineThickness value in the above code does nothing. I am able to change the width, for instance.

Share this post


Link to post
Share on other sites

Hi,

 

The attributes "lineThickness" or "lineColor" are not FusionCharts constructor parameters like "width" or "height".

These are configuration attributes of the chart dataSource, so you need to define them within the "chart" object of the dataSource. Please refer to the sample fiddle for reference : http://jsfiddle.net/2v5t1mrd/3/

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites
<chart caption='MyStuff (Updated: Oct 14 07:03 AM)' subcaption='From: Oct, 2017 To: 10/14/19 Net $ by Month - Trend ' xAxisName='Months' yAxisName='Net $' bgColor='9AB5E4' alternateHGridColor='E3EBF5' showValues='0' labelStep='2' lineColor='FF0000'>
<set label='0' value='0.00' />
<set label='1' value='2057.50' />
<set label='2' value='1975.00' />
<set label='3' value='12925.00' />
<set label='4' value='16460.00' />
<set label='5' value='18982.50' />
<set label='6' value='28310.00' />
<set label='7' value='32490.00' />
<set label='8' value='31487.50' />
<set label='9' value='39670.00' />
<set label='10' value='42145.00' />
<set label='11' value='43117.50' />
<set label='12' value='36377.50' />
<set label='13' value='45702.50' />
<set label='14' value='46740.00' />
<set label='15' value='57550.00' />
<set label='16' value='60987.50' />
<set label='17' value='69365.00' />
<set label='18' value='70443.61' />
<set label='19' value='68802.71' />
<set label='20' value='69307.71' />
<set label='21' value='74572.71' />
<set label='22' value='79697.71' />
<set label='23' value='76312.71' />
<set label='24' value='77730.21' />
</chart>

My chart data is coming from a file (xml) that looks as above. Do I need to change the structure of this file? I am migrating from flash version.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now