|
Server : Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 DAV/2 PHP/5.2.17 System : Linux localhost 2.6.18-419.el5 #1 SMP Fri Feb 24 22:47:42 UTC 2017 x86_64 User : nobody ( 99) PHP Version : 5.2.17 Disable Function : NONE Directory : /home/queenjbs/www/FusionChart/Contents/DataFormats/JSON/ |
Upload File : |
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Single Series Chart JSON </title>
<link rel="stylesheet" href="../../assets/ui/css/style.css" type="text/css" />
<script type="text/javascript" src="../../assets/prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/prettify/prettify.css" />
<script type="text/javascript" src="../../assets/ui/js/jquery.min.js" ></script>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute;
left:0px;
top:0px;
z-index:4;
visibility:hidden; }
a.whtbtnhide, a.whtbtnshow, a.whtbtnhidenav , a.whtbtnshownav { border-bottom:none !important; }
-->
</style>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whmsg.js"></script>
<script type="text/javascript" language="javascript" src="../../assets/ui/js/whver.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whproxy.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whutils.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whlang.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whtopic.js"></script>
<script type="text/javascript" src="../../assets/ui/js/lib.js"></script>
</head>
<body>
<!-- breadcrumb starts here -->
<div id="breadcrumb"></div>
<script type="text/javascript">
document.write( addFCBreadcrumb( [ "Home|../../Introduction/Overview.html", "FusionCharts XT Data Formats", "JSON|Overview.html", "Single series chart JSON" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Single Series Chart JSON </td>
</tr>
<tr>
<td valign="top" class="text">
<p>The JSON structure for a single series chart looks as under:</p> </td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="prettyprint code_container lang-js">{
"chart":{"caption":"Monthly Sales Summary",
"subcaption":"For the year 2006", "xaxisname":"Month",
"yaxisname":"Sales", "numberprefix":"$" },
"data":[
{ "label":"January","value":"17400" },
{ "label":"February","value":"19800" },
{ "label":"March","value":"21800" },
{ "label":"April","value":"23800" },
{ "label":"May","value":"29600" },
{ "label":"June","value":"27600" },
{ "vline":"true","color":"FF5904","thickness":"2"},
{ "label":"July","value":"31800" },
{ "label":"August","value":"39700" },
{ "label":"September","value":"37800"},
{ "label":"October","value":"21900" },
{ "label":"November","value":"32900" },
{ "label":"December","value":"39800" }
],
"trendlines":{
"line":[
{"startvalue":"22000","color":"00cc00",
"displayvalue":"Average"}
]
},
"styles": {
"definition": [
{
"name": "CanvasAnim",
"type": "animation",
"param": "_xScale",
"start": "0",
"duration": "1"
}
],
"application": [
{
"toobject": "Canvas",
"styles": "CanvasAnim"
}
]
}
}</pre>
<br /> </td>
</tr>
<tr>
<td valign="top" class="header">Brief Explanation</td>
</tr>
<tr>
<td valign="top" class="text"> <p>The <span class="codeInline">chart</span>
object defines all the settings which helps to manipulate the chart.
You can find the list of all the attribute for this Object in "<span class="codeInline">Chart
XML Sheet</span>" of each chart.</p>
<p>In the most general form, chart attributes represent the following JSON format:<br />
<br>
<span class="codeInline">"attributeName" : "Value"<br>
Example, "xAxisName" : "Month"</span><br />
<br />
The attributes can occur in any order and quotes can be single or double
like <span class="codeInline">xAxisName:'Month'. </span>However,
you need to make sure that a particular attribute occurs only once for
a given element.</p>
<p class="highlightBlock">Please note that the XML attributes declared for each chart in "Chart XML Sheet" are same as the JSON properties in FusionCharts XT JSON data format.</p>
<p>Moving on, <span class="codeInline">data</span> Array represents a set of chart numeric data which is to be plotted on the graph
and determines a set of labels which will appear as categories on the graph. Each data element in data Array is an unnamed object. A typical data element will look like this. </p>
<pre class="code_container prettyprint lang-js">{ "label: "Jan", "value" : "17400", "color" : "3300FF", "toolTip" : "January, 17400", "link" : "details.asp?month=jan", "showLabel" : "1" }</pre>
<p>Between data elements, we can
have the <strong>vLine </strong>object, which indicates
vertical separator lines running along the height and width of the chart canvas. A <strong>vLine</strong> is similar to a data element except that it should have a property with key "vLine" with value "true". </p>
<pre class="code_container prettyprint lang-js">{ "vLine" : "true" , "color" : "FF5904", "thickness" : "2" }</pre>
<p>Next we have the <span class="codeInline">trendLines</span> object.
Using this function of the chart, you could draw custom lines on the chart
to represent a trend. For example, in our above XML, we have defined a
line at 22000 to represent the average sales for the period. There will be an Array with name <span class="codeInline">line</span> that contains all trend line definition objects.</p>
<p>Finally, you have the <span class="codeInline">styles</span> Object. It helps you apply font, effects and
animations to various objects of the chart. <span class="codeInline">Styles</span>
lends a simple mechanism using which you can easily control the visual
layout of charts. In FusionCharts XT JSON format, Styles Object contains two Arrays - <span class="codeInline">definition</span> and <span class="codeInline">application</span>. <span class="codeInline">definition</span> Array contains a list of <span class="codeInline">style</span> Objects. Each <span class="codeInline">style </span>Objects contains various style definition attributes. <span class="codeInline">application</span> Array contains a list of <span class="codeInline">apply</span> Objects. Each <span class="codeInline">apply</span> Object contains attributes to apply styles, defined in <span class="codeInline">definition </span>Array,
to various chart objects.</p>
<p>To read more on <span class="codeInline">Styles</span>,
please see <a href="../../Styles/Styles.html"><span class="codeInline">FusionCharts XT Styles</span></a>
section.</p>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("JSON Overview|Overview.html","Multi Series chart JSON|MultiSeries.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>