|
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/FirstChart/ |
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>Using JSON as data source </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", "Creating your first chart|FirstChart.html", "Using JSON as data source" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Using JSON as data source </td>
</tr>
<tr>
<td valign="top" class="text">
<p>Apart from XML, FusionCharts XT can also accept JSON data format. It can use a JSON URL/feed, a JSON Object (in JavaScript) or JSON String. This functionality is provided by <span class="codeInline">FusionCharts.js</span> JavaScript class. </p>
<p>In this page we will see how to pass JSON data to chart in various forms. We will again convert our first sample <span class="codeInline">weekly-sales.html</span> to implement this.</p>
<p class="highlightBlock">Code examples and data files discussed in this section are present in <span class="codeInline">Download Package > Code > MyFirstChart</span> folder.</p>
</td>
</tr>
<tr>
<td class="header"><a name="url" id="url"></a>Providing JSON data using URL method</td>
</tr>
<tr>
<td class="text"><p>Create a copy of <span class="codeInline">weekly-sales.html</span> and rename it to <span class="codeInline">weekly-sales-json-url.html</span>. Then punch in the following code:</p> </td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="code_container prettyprint lang-html"><html>
<head>
<title>My First chart using FusionCharts XT - JSON data URL</title>
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
</head>
<body>
<div id="chartContainer">FusionCharts XT will load here!</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts( "FusionCharts/Column3D.swf",
"myChartId", "400", "300", "0" );
<strong>myChart.setJSONUrl("Data.json");</strong>
myChart.render("chartContainer");
// -->
</script>
</body>
</html></pre>
<p>See it <a href="../../Code/MyFirstChart/weekly-sales-json-url.html" target="_blank">live</a>!</p>
<div class="highlightBlock">Many Web servers like IIS6, does not supply .json (no wildcard MIME type) files by default. You will need to setup your Web server to supply json files. In IIS6, you can do this using these steps:
<ul>
<li>Open the properties for the server in IIS Manager and click MIME Types</li>
<li>Click "New". Enter "JSON" for the extension and "application/json" for the MIME type</li>
</ul></div>
<div class="highlightBlock" style="margin-top:20px;">
Many browsers restrict JavaScript from accessing local file system owing to security reasons. The JavaScript charts, when running locally, will not be able to access data provided as a URL. If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you provide the data as string (using the <a href="../guide-for-web-developers/how-fusioncharts-works/DataXMLExp.html">Data String method</a>), it works fine. <br />
<span class="msg_handler_slider"><a href="#">Click here to see the code using the Data String method</a> » </span>
<div class="msg_body">
<pre class="code_container prettyprint lang-html"><html>
<head>
<title>My First chart using FusionCharts - Using JavaScript</title>
<script type="text/javascript" src="<strong>FusionCharts/FusionCharts.js"</strong>></script>
</head>
<body>
<div id="<strong>chartContainer</strong>">FusionCharts XT will load here!</div>
<script type="text/javascript"><!--
<strong>var myChart = new FusionCharts( "FusionCharts/Column3D.swf",
"myChartId", "400", "300", "0" );
myChart.<strong>setXMLData("<chart caption='Weekly Sales Summary' xAxisName='Week' " +
"yAxisName='Sales' numberPrefix='$'>" +
"<set label='Week 1' value='14400' />" +
"<set label='Week 2' value='19600' />" +
"<set label='Week 3' value='24000' />" +
"<set label='Week 4' value='15700' />" +
"</chart>");</strong>
myChart.render("chartContainer");</strong>
// -->
</script>
</body>
</html></pre>
<p>See it <a href="../../Code/MyFirstChart/weekly-sales-xml-embed.html" target="_blank">live</a> in your iPad or iPhone or any browser where Flash Player is not supported. </p>
</div>
</div>
</td>
</tr>
<tr>
<td class="text"><p>In the above code, we have provided a JSON data (compatible with Column Chart) to the chart using the <span class="codeInline">setJSONUrl()</span> function. The data stored in the JSON file is as follows:</p> </td>
</tr>
<tr>
<td class="text">
<pre class="code_container prettyprint lang-js">
{
"chart": {
"caption" : "Weekly Sales Summary" ,
"xAxisName" : "Week",
"yAxisName" : "Sales",
"numberPrefix" : "$"
},
"data" :
[
{ "label" : "Week 1", "value" : "14400" },
{ "label" : "Week 2", "value" : "19600" },
{ "label" : "Week 3", "value" : "24000" },
{ "label" : "Week 4", "value" : "15700" }
]
}</pre>
</td>
</tr>
<tr>
<td><p class="highlightBlock">To know more on FusionCharts XT JSON data format, please go through <strong>FusionCharts XT data formats </strong>> <strong><a href="../DataFormats/JSON/Overview.html">JSON</a></strong> section. Like the Visual XML Generator, you can take help of <a href="../../Tools/FCDataConverter/index.html" target="_blank">FusionCharts Data Converter</a> tool to convert chart XML to JSON or vice-versa and use it.</p>
</td>
</tr>
<tr>
<td class="header"><a name="object" id="object"></a>Providing JSON Object embedded in HTML</td>
</tr>
<tr>
<td class="text"><p>You can also provide JSON embedded in the HTML itself. Since JSON format is derived from JavaScript, you can also pass a JavaScript Object as data for the chart. This is possible using <span class="codeInline">setJSONData()</span> function as shown below: </p></td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="code_container prettyprint lang-js"><span class="nocode">...</span><strong>
myChart.setJSONData( {
"chart":
{
"caption" : "Weekly Sales Summary" ,
"xAxisName" : "Week",
"yAxisName" : "Sales",
"numberPrefix" : "$"
},
"data" :
[
{ "label" : "Week 1", "value" : "14400" },
{ "label" : "Week 2", "value" : "19600" },
{ "label" : "Week 3", "value" : "24000" },
{ "label" : "Week 4", "value" : "15700" }
]
} );</strong>
<span class="nocode">...</span></pre>
<br />
See it <a href="../../Code/MyFirstChart/weekly-sales-json-embed.html" target="_blank">live</a>!<br />
<br /></td>
</tr>
<tr>
<td class="header"><a name="string" id="string"></a>Providing JSON String embedded in HTML</td>
</tr>
<tr>
<td class="text"><p>Additionally, you can also pass a JSON, stored as a String. In many cases, AJAX feed comes as JSON String, so you do not have to convert the string to JSON. FusionCharts XT takes care of that as shown below:</p> </td>
</tr>
<tr>
<td class="text">
<pre class="code_container prettyprint lang-js"><span class="nocode">...</span>
myChart.setJSONData (
'{ "chart": { "caption" : "Weekly Sales Summary" , ' +
'"xAxisName" : "Week", "yAxisName" : "Sales", "numberPrefix" : "$" }, ' +
'"data" : [ { "label" : "Week 1", "value" : "14400" }, ' +
'{ "label" : "Week 2", "value" : "19600" }, ' +
'{ "label" : "Week 3", "value" : "24000" }, ' +
'{ "label" : "Week 4", "value" : "15700" } ] } '
);
<span class="nocode">...</span></pre>
<br />
See it <a href="../../Code/MyFirstChart/weekly-sales-json-embed-string.html" target="_blank">live</a>!</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Creating charts in JavaScript|UsingPureJS.html","Using XML embedded in the page|DataXML.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>