Step 1: Just download zip file JS chart from Official Website of JS chart on internet and extract it.
Step 2 : create a folder “Charts” on the localhost of project and just copy the source folder from the JS chart files which included the “jscharts.js” file.
You also create types of charts from this JS charts i.e. bar chart, pie chart, line chart.
Line chart:
Sample Code for Line chart:
XML Code:In this code dataset tag is for the data of chart and in this define the ytpe of chart i.e.”line”. andcolorset tag for color of chart and optionset tag for designing of chart.
<?xml version=”1.0″?>
<JSChart>
<dataset type=”line”>
<data unit=”10″ value=”2″/>
<data unit=”15″ value=”0″/>
<data unit=”18″ value=”3″/>
<data unit=”19″ value=”6″/>
<data unit=”20″ value=”8.5″/>
<data unit=”25″ value=”10″/>
<data unit=”30″ value=”9″/>
<data unit=”35″ value=”8″/>
<data unit=”40″ value=”5″/>
<data unit=”45″ value=”6″/>
<data unit=”50″ value=”2.5″/>
</dataset>
<optionset>
<option set=”setAxisNameFontSize” value=”10″/>
<option set=”setAxisNameX” value=”‘Horizontal axis values’”/>
<option set=”setAxisNameY” value=”‘Vertical axis’”/>
<option set=”setAxisNameColor” value=”‘#787878′”/>
<option set=”setAxisValuesNumberX” value=”6″/>
<option set=”setAxisValuesNumberY” value=”5″/>
<option set=”setAxisValuesColor” value=”‘#38a4d9′”/>
<option set=”setAxisColor” value=”‘#38a4d9′”/>
<option set=”setLineColor” value=”‘#C71112′”/>
<option set=”setTitle” value=”‘A customized chart’”/>
<option set=”setTitleColor” value=”‘#383838′”/>
<option set=”setGraphExtend” value=”true”/>
<option set=”setGridColor” value=”‘#38a4d9′”/>
<option set=”setSize” value=”616, 321″/>
<option set=”setAxisPaddingLeft” value=”140″/>
<option set=”setAxisPaddingRight” value=”140″/>
<option set=”setAxisPaddingTop” value=”60″/>
<option set=”setAxisPaddingBottom” value=”45″/>
<option set=”setTextPaddingLeft” value=”105″/>
<option set=”setTextPaddingBottom” value=”12″/>
<option set=”setBackgroundImage” value=”‘chart_bg.jpg’”/>
</optionset>
</JSChart>
PHP Code:
<html>
<head>
<title>JSChart</title>
<script type=”text/javascript” src=”../../../sources/jscharts.js”></script>
</head>
<body>
<div id=”graph”>Loading graph…</div>
<script type=”text/javascript”>
var myChart = new JSChart(‘graph’, ‘line’);
myChart.setDataXML(“data.xml”);
myChart.draw();
</script>
</body>
</html>
XML Attributes:
- “ setAxisNameX” (Define the name of the x-axis values)
- “ setAxisNameY” (Define the name of the y-axis values)
- “ setAxisNameFontSize” (Define the size of the font of name)
- “setAxisNameColor” (Define the color name)
- “setAxisValuesAngle” (Define the angle of value bar)
- “setAxisValuesColor” (Define color code)
- “setAxisColor” ( Define value of color i.e. code of color)
- “setAxisWidth” (Define the width of the bars)
- “setBarValuesColor (Define the color of the bar chart values)
- setAxisPaddingTop (Padding from Top)
- “setAxisPaddingBottom (Padding from Bottom)
- “setAxisPaddingLeft” ( Padding from Left)
- “setTitleFontSize” (Font Size)
- setBarColor” value (Color vales)
- “setBarBorderWidth : ( Define width border width of bars)
- “setBarSpacingRatio: (Define space beteeween two bars)
Step 3:In the JS chart folder XML files are already created . but for converting these XML file dynamically just write the code of XML file in ur project code and create a xml file dynamically.
Step 4: Just open the index.php file in the JS chart in the Dreamweaver. And copy code of creating the chart. And paste into your project code where you want to created.
Step 1: Just download zip file JS chart from Official Website of JS chart on internet and extract it.
Step 2 : create a folder “Charts” on the localhost of project and just copy the source folder from the JS chart files which included the “jscharts.js” file.
You can create types of charts from this JS charts i.e. bar chart, pie chart, line chart.
Pie chart:
Sample Code for Pie chart:
XML Code:In this code dataset tag is for the data of chart and in this define the ytpe of chart i.e.”pie”. andcolorset tag for color of chart and optionset tag for designing of chart.
<?xml version=”1.0″?>
<JSChart>
<dataset type=”pie”>
<data unit=”S.1″ value=”20″/>
<data unit=”S.2″ value=”70″/>
<data unit=”S.3″ value=”30″/>
<data unit=”S.4″ value=”60″/>
<data unit=”S.5″ value=”80″/>
<data unit=”S.6″ value=”10″/>
</dataset>
<colorset>
<color value=”#898A89″/>
<color value=”#767776″/>
<color value=”#676767″/>
<color value=”#434443″/>
<color value=”#B0B1B0″/>
<color value=”#9E9F9E”/>
</colorset>
<optionset>
<option set=”setPieUnitsOffset” value=”-30″/>
<option set=”setPieUnitsColor” value=”‘#fff’”/>
<option set=”setPieValuesOffset” value=”10″/>
<option set=”setPieValuesColor” value=”‘#878787′”/>
<option set=”setTitleColor” value=”‘#7A7A7A’”/>
</optionset>
</JSChart>
PHP Code:
<html>
<head>
<title>JSChart</title>
<script type=”text/javascript” src=”../../../sources/jscharts.js”></script>
</head>
<body>
<div id=”graph”>Loading graph…</div>
<script type=”text/javascript”>
var myChart = new JSChart(‘graph’, ‘pie’);
myChart.setDataXML(“data.xml”);
myChart.draw();
</script>
</body>
</html>
XML Attributes:
- “ setAxisNameX” (Define the name of the x-axis values)
- “ setAxisNameY” (Define the name of the y-axis values)
- “ setAxisNameFontSize” (Define the size of the font of name)
- “setAxisNameColor” (Define the color name)
- “setAxisValuesAngle” (Define the angle of value bar)
- “setAxisValuesColor” (Define color code)
- “setAxisColor” ( Define value of color i.e. code of color)
- “setAxisWidth” (Define the width of the bars)
- “setBarValuesColor (Define the color of the bar chart values)
- setAxisPaddingTop (Padding from Top)
- “setAxisPaddingBottom (Padding from Bottom)
- “setAxisPaddingLeft” ( Padding from Left)
- “setTitleFontSize” (Font Size)
- setBarColor” value (Color vales)
- “setBarBorderWidth : ( Define width border width of bars)
- “setBarSpacingRatio: (Define space beteeween two bars)
Step 3:In the JS chart folder XML files are already created . but for converting these XML file dynamically just write the code of XML file in ur project code and create a xml file dynamically.
Step 4: Just open the index.php file in the JS chart in the Dreamweaver. And copy code of creating the chart. And paste into your project code where you want to created.
How to create Bar graph by using JS chart?
Step 1: Just download zip file JS chart from Official Website of JS chart on internet and extract it.
Step 2 : create a folder “Charts” on the localhost of project and just copy the source folder from the JS chart files which included the “jscharts.js” file.
You can create types of charts from this JS charts i.e. bar chart, pie chart, line chart.
Bar chart:
Sample Code for Bar Chart:
XML Code:In this code dataset tag is for the data of chart and in this define the ytpe of chart i.e.”bar”. and optionset tag for designing of chart.
<?xml version=”1.0″?>
<JSChart>
<dataset type=”bar”>
<data unit=”Asia” value=”437,520″/>
<data unit=”Europe” value=”322,390″/>
<data unit=”North America” value=”233,286″/>
<data unit=”Latin America” value=”110,162″/>
<data unit=”Africa” value=”34,49″/>
<data unit=”Middle East” value=”20,31″/>
<data unit=”Aus/Oceania” value=”19,22″/>
</dataset>
<optionset>
<option set=”setTitle” value=”‘Internet usage by World Region (millions of users)’”/>
<option set=”setTitleColor” value=”‘#8E8E8E’”/>
<option set=”setAxisNameX” value=”””/>
<option set=”setAxisNameY” value=”””/>
<option set=”setAxisNameFontSize” value=”16″/>
<option set=”setAxisNameColor” value=”‘#999′”/>
<option set=”setAxisValuesAngle” value=”30″/>
<option set=”setAxisValuesColor” value=”‘#777′”/>
<option set=”setAxisColor” value=”‘#B5B5B5′”/>
<option set=”setAxisWidth” value=”1″/>
<option set=”setBarValuesColor” value=”‘#2F6D99′”/>
<option set=”setAxisPaddingTop” value=”60″/>
<option set=”setAxisPaddingBottom” value=”60″/>
<option set=”setAxisPaddingLeft” value=”45″/>
<option set=”setTitleFontSize” value=”11″/>
<option set=”setBarColor” value=”‘#2D6B96′,1″/>
<option set=”setBarColor” value=”‘#9CCEF0′, 2″/>
<option set=”setBarBorderWidth” value=”0″/>
<option set=”setBarSpacingRatio” value=”50″/>
<option set=”setBarOpacity” value=”0.9″/>
<option set=”setFlagRadius” value=”6″/>
<option set=”setTooltip” value=”['North America', 'Click me', 1], callback”/>
<option set=”setTooltipPosition” value=”‘nw’”/>
<option set=”setTooltipOffset” value=”3″/>
<option set=”setLegendShow” value=”true”/>
<option set=”setLegendPosition” value=”‘right top’”/>
<option set=”setLegendForBar” value=”1, ’2005′”/>
<option set=”setLegendForBar” value=”2, ’2010′”/>
<option set=”setSize” value=”616, 321″/>
<option set=”setGridColor” value=”‘#C6C6C6′”/>
<option set=”setTooltipOffset” value=”3″/>
</optionset>
</JSChart>
PHP Code:-
<html>
<head>
<title>JSChart</title>
<script type=”text/javascript” src=”../../../sources/jscharts.js”></script>
</head>
<body>
<div id=”graph”>Loading…</div>
<script type=”text/javascript”>
var myChart = new JSChart(‘graph’, ‘bar’);
myChart.setDataXML(“data.xml”);
myChart.draw();
function callback() {
alert(‘User click’);
}
</script>
</body>
</html>
XML Attributes:
- “ setAxisNameX” (Define the name of the x-axis values)
- “ setAxisNameY” (Define the name of the y-axis values)
- “ setAxisNameFontSize” (Define the size of the font of name)
- “setAxisNameColor” (Define the color name)
- “setAxisValuesAngle” (Define the angle of value bar)
- “setAxisValuesColor” (Define color code)
- “setAxisColor” ( Define value of color i.e. code of color)
- “setAxisWidth” (Define the width of the bars)
- “setBarValuesColor (Define the color of the bar chart values)
- setAxisPaddingTop (Padding from Top)
- “setAxisPaddingBottom (Padding from Bottom)
- “setAxisPaddingLeft” ( Padding from Left)
- “setTitleFontSize” (Font Size)
- setBarColor” value (Color vales)
- “setBarBorderWidth : ( Define width border width of bars)
- “setBarSpacingRatio: (Define space beteeween two bars)
Step 3:In the JS chart folder XML files are already created . but for converting these XML file dynamically just write the code of XML file in ur project code and create a xml file dynamically.
Step 4: Just open the index.php file in the JS chart in the Dreamweaver. And copy code of creating the chart. And paste into your project code where you want to created.
What is JS Chart?
JS Charts is a JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. Just include our scripts, prepare your chart data in XML, JSON or JavaScript Array and your chart is ready!
Features of JS Chart:-
- You don’t have to write code
- It’s easy to integrate
- It’s customizable
- You can setup your charts online
- You can create the three most common types of charts: bar, pie and line
- It’s compatible with most web browsers
- You don’t need any server-side plugins/modules
- It’s a 100% JavaScript component
- It’s free (watermarked)
Compatibility:-
Windows
- Firefox 1.5 +
- Chrome 10 +
- Internet Explorer 6 +
- Safari 3.1 +
- Opera 9 +
- and other browsers
Mac
- Firefox 1.5 +
- Chrome 10 +
- Safari 2 +
Other devices
