Configuring a Candlestick Chart
A candlestick chart is widely used for applications that require analysis of equity and commodity prices. It allows you to show the opening price, closing price, highest trading price, lowest trading price, and the trade volume on a single chart.
Candlestick chart has both x-axis and y-axis as numeric. This chart does not directly accept dates for the data and category labels. Instead, it accepts an x-value for each data. This allows for greater flexibility as you can plot days, hours, weeks, months, years, etc. using this chart.
Converting your dates into x-values is very simple. Using your server side script, select the first date in your chart as base date. Now, use date difference function (with respect to this base date) to get the x-values for each date. So, if you want to show daily quotes on the chart, you can use “day” as the date difference parameter. Similarly, if you want to show weekly quotes, you can use “weeks” as the date difference parameter and so on.
Now, for each data, you need to provide the x-value, opening price, closing price, and the high and low price for the given time frame. If you’re plotting a line chart for the price, you can choose which price to plot - opening or closing. Also, high and low prices are not required in case of line plot.
You can additionally provide the volume figure if you also want a volume chart to be plotted.
In this section, you will be shown how you can:
Setting a Chart Type for the Price Chart
You can render the price chart using a candle chart, a bar chart, or a line chart.
A candlestick chart with the price chart rendered as a line chart looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Daily Stock Price HRYS",
"subCaption": "Last 2 months",
"numberprefix": "$",
"pyaxisname": "Price",
"vyaxisname": "Volume (In Millions)",
"plotPriceAs": "line",
"plotClosingPrice": "0",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "2 month ago",
"x": "1"
},
{
"label": "1 month ago",
"x": "31"
},
{
"label": "Today",
"x": "60"
}
]
}
],
"dataset": [
{
"data": [
{
"open": "18.74",
"high": "19.16",
"low": "18.67 ",
"close": "18.99",
"x": "1",
"volume": "4991285"
},
{
"open": "18.74",
"high": "19.06",
"low": "18.54",
"close": "18.82",
"x": "2",
"volume": "3615889"
},
{
"open": "19.21",
"high": "19.3",
"low": "18.59 ",
"close": "18.65",
"x": "3",
"volume": "4749586"
},
{
"open": "19.85",
"high": "19.86",
"low": "19.12",
"close": "19.4",
"x": "4",
"volume": "4366740"
},
{
"open": "20.19",
"high": "20.21",
"low": "19.57",
"close": "19.92",
"x": "5",
"volume": "3982709"
},
{
"open": "20.47",
"high": "20.64",
"low": "20.15",
"close": "20.16",
"x": "6",
"volume": "2289403"
},
{
"open": "20.36",
"high": "20.52",
"low": "20.29",
"close": "20.48",
"x": "7",
"volume": "1950919"
},
{
"open": "20.21",
"high": "20.25",
"low": "19.91",
"close": "20.15",
"x": "8",
"volume": "2391070"
},
{
"open": "19.46",
"high": "20.54",
"low": "19.46",
"close": "20.22",
"x": "9",
"volume": "4548422"
},
{
"open": "19.24",
"high": "19.5",
"low": "19.13",
"close": "19.44",
"x": "10",
"volume": "1889811"
},
{
"open": "19.25",
"high": "19.41",
"low": "18.99",
"close": "19.22",
"x": "11",
"volume": "2543355"
},
{
"open": "18.85",
"high": "19.45",
"low": "18.8",
"close": "19.24",
"x": "12",
"volume": "2134393"
},
{
"open": "18.97",
"high": "19.01",
"low": "18.68",
"close": "18.95",
"x": "13",
"volume": "1740852"
},
{
"open": "18.69",
"high": "19",
"low": "18.35",
"close": "18.97",
"x": "14",
"volume": "2701392"
},
{
"open": "19.02",
"high": "19.1",
"low": "18.68",
"close": "18.7",
"x": "15",
"volume": "2198755"
},
{
"open": "19.29",
"high": "19.38",
"low": "18.88",
"close": "19.05",
"x": "16",
"volume": "2464958"
},
{
"open": "18.64",
"high": "19.35",
"low": "18.53",
"close": "19.33",
"x": "17",
"volume": "2962994"
},
{
"open": "18.14",
"high": "18.58",
"low": "18.08",
"close": "18.52",
"x": "18",
"volume": "1964932"
},
{
"open": "18.49",
"high": "18.92",
"low": "18.19",
"close": "18.26",
"x": "19",
"volume": "3013102"
},
{
"open": "18.71",
"high": "18.84",
"low": "18",
"close": "18.51",
"x": "20",
"volume": "4435894"
},
{
"open": "19.17",
"high": "19.35",
"low": "18.61",
"close": "18.66",
"x": "21",
"volume": "3245851"
},
{
"open": "19.12",
"high": "19.41",
"low": "18.92",
"close": "19.2",
"x": "22",
"volume": "2259792"
},
{
"open": "19.43",
"high": "19.58",
"low": "19.16",
"close": "19.33",
"x": "23",
"volume": "3531327"
},
{
"open": "19.72",
"high": "19.81",
"low": "19.04",
"close": "19.27",
"x": "24",
"volume": "5834733"
},
{
"open": "19.7",
"high": "19.94",
"low": "19.49",
"close": "19.77",
"x": "25",
"volume": "2009987"
},
{
"open": "19.84",
"high": "19.98",
"low": "19.39",
"close": "19.88",
"x": "26",
"volume": "2767592"
},
{
"open": "20.71",
"high": "20.73",
"low": "19.16",
"close": "19.63",
"x": "27",
"volume": "673358"
},
{
"open": "21.14",
"high": "21.14",
"low": "20.55",
"close": "20.65",
"x": "28",
"volume": "3164006"
},
{
"open": "21.5",
"high": "21.86",
"low": "21.2",
"close": "21.33",
"x": "29",
"volume": "7986466"
},
{
"open": "20.45",
"high": "21.08",
"low": "20.1",
"close": "20.56",
"x": "30",
"volume": "5813040"
},
{
"open": "20.07",
"high": "20.69",
"low": "20.04",
"close": "20.36",
"x": "31",
"volume": "3440002"
},
{
"open": "19.88",
"high": "20.11",
"low": "19.51",
"close": "20.03",
"x": "32",
"volume": "2779171"
},
{
"open": "19.76",
"high": "20.13",
"low": "19.65",
"close": "19.88",
"x": "33",
"volume": "2918115"
},
{
"open": "19.77",
"high": "19.97",
"low": "19.27",
"close": "19.9",
"x": "34",
"volume": "3850357"
},
{
"open": "19.43",
"high": "19.72",
"low": "18.88",
"close": "19.5",
"x": "35",
"volume": "5047378"
},
{
"open": "19.69",
"high": "19.84",
"low": "19.17",
"close": "19.43",
"x": "36",
"volume": "3479017"
},
{
"open": "19.59",
"high": "20.02",
"low": "19.02",
"close": "19.41",
"x": "37",
"volume": "5749874"
},
{
"open": "20.95",
"high": "21.09",
"low": "19.64",
"close": "19.83",
"x": "38",
"volume": "6319111"
},
{
"open": "20.52",
"high": "21.03",
"low": "20.45",
"close": "21",
"x": "39",
"volume": "4412413"
},
{
"open": "20.36",
"high": "20.96",
"low": "20.2",
"close": "20.44",
"x": "40",
"volume": "5948318"
},
{
"open": "21.45",
"high": "21.48",
"low": "19.63",
"close": "20.3",
"x": "41",
"volume": "11935440"
},
{
"open": "23.49",
"high": "23.57",
"low": "21.12",
"close": "21.63",
"x": "42",
"volume": "10523910"
},
{
"open": "24.04",
"high": "24.21",
"low": "23.04",
"close": "23.28",
"x": "43",
"volume": "3843797"
},
{
"open": "23.6",
"high": "24.065",
"low": "23.51",
"close": "23.94",
"x": "44",
"volume": "3691404"
},
{
"open": "22.87",
"high": "23.49",
"low": "22.86",
"close": "23.48",
"x": "45",
"volume": "3387393"
},
{
"open": "22.35",
"high": "22.89",
"low": "22.35",
"close": "22.74",
"x": "46",
"volume": "3737330"
},
{
"open": "22.11",
"high": "22.5",
"low": "21.9",
"close": "22.24",
"x": "47",
"volume": "4630397"
},
{
"open": "22.58",
"high": "22.80",
"low": "22.25",
"close": "22.42",
"x": "48",
"volume": "3024711"
},
{
"open": "23.54",
"high": "23.76",
"low": "22.6",
"close": "22.68",
"x": "49",
"volume": "3984508"
},
{
"open": "23.66",
"high": "24.09",
"low": "23.09",
"close": "23.46",
"x": "50",
"volume": "3420204"
},
{
"open": "24.36",
"high": "24.42",
"low": "22.90",
"close": "23.6",
"x": "51",
"volume": "5151096"
},
{
"open": "24.34",
"high": "24.6",
"low": "23.73",
"close": "24.15",
"x": "52",
"volume": "5999654"
},
{
"open": "23.38",
"high": "24.8",
"low": "23.36",
"close": "24.1",
"x": "53",
"volume": "5382049"
},
{
"open": "23.76",
"high": "23.84",
"low": "23.23",
"close": "23.47",
"x": "54",
"volume": "3508510"
},
{
"open": "23.64",
"high": "23.94",
"low": "23.48",
"close": "23.76",
"x": "55",
"volume": "2718428"
},
{
"open": "23.99",
"high": "24.18",
"low": "23.59",
"close": "23.66",
"x": "56",
"volume": "2859391"
},
{
"open": "23.32",
"high": "24.26",
"low": "23.32",
"close": "23.79",
"x": "57",
"volume": "4138618"
},
{
"open": "24.08",
"high": "24.4",
"low": "23.26",
"close": "23.39",
"x": "58",
"volume": "4477478"
},
{
"open": "22.84",
"high": "23.96",
"low": "22.83",
"close": "23.88",
"x": "59",
"volume": "4822378"
},
{
"open": "23.38",
"high": "23.78",
"low": "22.94",
"close": "23.01",
"x": "60",
"volume": "4037312"
},
{
"open": "23.97",
"high": "23.99",
"low": "23.14",
"close": "23.32",
"x": "61",
"volume": "4879546"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'candlestick',
renderAt: 'chart-container',
id: 'myChart',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Daily Stock Price HRYS",
"subCaption": "Last 2 months",
"numberprefix": "$",
"pyaxisname": "Price",
"vyaxisname": "Volume (In Millions)",
"plotPriceAs": "line",
"plotClosingPrice": "0",
"theme": "fint",
},
"categories": [{
"category": [{
"label": "2 month ago",
"x": "1"
}, {
"label": "1 month ago",
"x": "31"
}, {
"label": "Today",
"x": "60"
}]
}],
"dataset": [{
"data": [{
"open": "18.74",
"high": "19.16",
"low": "18.67 ",
"close": "18.99",
"x": "1",
"volume": "4991285"
}, {
"open": "18.74",
"high": "19.06",
"low": "18.54",
"close": "18.82",
"x": "2",
"volume": "3615889"
}, {
"open": "19.21",
"high": "19.3",
"low": "18.59 ",
"close": "18.65",
"x": "3",
"volume": "4749586"
}, {
"open": "19.85",
"high": "19.86",
"low": "19.12",
"close": "19.4",
"x": "4",
"volume": "4366740"
}, {
"open": "20.19",
"high": "20.21",
"low": "19.57",
"close": "19.92",
"x": "5",
"volume": "3982709"
}, {
"open": "20.47",
"high": "20.64",
"low": "20.15",
"close": "20.16",
"x": "6",
"volume": "2289403"
}, {
"open": "20.36",
"high": "20.52",
"low": "20.29",
"close": "20.48",
"x": "7",
"volume": "1950919"
}, {
"open": "20.21",
"high": "20.25",
"low": "19.91",
"close": "20.15",
"x": "8",
"volume": "2391070"
}, {
"open": "19.46",
"high": "20.54",
"low": "19.46",
"close": "20.22",
"x": "9",
"volume": "4548422"
}, {
"open": "19.24",
"high": "19.5",
"low": "19.13",
"close": "19.44",
"x": "10",
"volume": "1889811"
}, {
"open": "19.25",
"high": "19.41",
"low": "18.99",
"close": "19.22",
"x": "11",
"volume": "2543355"
}, {
"open": "18.85",
"high": "19.45",
"low": "18.8",
"close": "19.24",
"x": "12",
"volume": "2134393"
}, {
"open": "18.97",
"high": "19.01",
"low": "18.68",
"close": "18.95",
"x": "13",
"volume": "1740852"
}, {
"open": "18.69",
"high": "19",
"low": "18.35",
"close": "18.97",
"x": "14",
"volume": "2701392"
}, {
"open": "19.02",
"high": "19.1",
"low": "18.68",
"close": "18.7",
"x": "15",
"volume": "2198755"
}, {
"open": "19.29",
"high": "19.38",
"low": "18.88",
"close": "19.05",
"x": "16",
"volume": "2464958"
}, {
"open": "18.64",
"high": "19.35",
"low": "18.53",
"close": "19.33",
"x": "17",
"volume": "2962994"
}, {
"open": "18.14",
"high": "18.58",
"low": "18.08",
"close": "18.52",
"x": "18",
"volume": "1964932"
}, {
"open": "18.49",
"high": "18.92",
"low": "18.19",
"close": "18.26",
"x": "19",
"volume": "3013102"
}, {
"open": "18.71",
"high": "18.84",
"low": "18",
"close": "18.51",
"x": "20",
"volume": "4435894"
}, {
"open": "19.17",
"high": "19.35",
"low": "18.61",
"close": "18.66",
"x": "21",
"volume": "3245851"
}, {
"open": "19.12",
"high": "19.41",
"low": "18.92",
"close": "19.2",
"x": "22",
"volume": "2259792"
}, {
"open": "19.43",
"high": "19.58",
"low": "19.16",
"close": "19.33",
"x": "23",
"volume": "3531327"
}, {
"open": "19.72",
"high": "19.81",
"low": "19.04",
"close": "19.27",
"x": "24",
"volume": "5834733"
}, {
"open": "19.7",
"high": "19.94",
"low": "19.49",
"close": "19.77",
"x": "25",
"volume": "2009987"
}, {
"open": "19.84",
"high": "19.98",
"low": "19.39",
"close": "19.88",
"x": "26",
"volume": "2767592"
}, {
"open": "20.71",
"high": "20.73",
"low": "19.16",
"close": "19.63",
"x": "27",
"volume": "673358"
}, {
"open": "21.14",
"high": "21.14",
"low": "20.55",
"close": "20.65",
"x": "28",
"volume": "3164006"
}, {
"open": "21.5",
"high": "21.86",
"low": "21.2",
"close": "21.33",
"x": "29",
"volume": "7986466"
}, {
"open": "20.45",
"high": "21.08",
"low": "20.1",
"close": "20.56",
"x": "30",
"volume": "5813040"
}, {
"open": "20.07",
"high": "20.69",
"low": "20.04",
"close": "20.36",
"x": "31",
"volume": "3440002"
}, {
"open": "19.88",
"high": "20.11",
"low": "19.51",
"close": "20.03",
"x": "32",
"volume": "2779171"
}, {
"open": "19.76",
"high": "20.13",
"low": "19.65",
"close": "19.88",
"x": "33",
"volume": "2918115"
}, {
"open": "19.77",
"high": "19.97",
"low": "19.27",
"close": "19.9",
"x": "34",
"volume": "3850357"
}, {
"open": "19.43",
"high": "19.72",
"low": "18.88",
"close": "19.5",
"x": "35",
"volume": "5047378"
}, {
"open": "19.69",
"high": "19.84",
"low": "19.17",
"close": "19.43",
"x": "36",
"volume": "3479017"
}, {
"open": "19.59",
"high": "20.02",
"low": "19.02",
"close": "19.41",
"x": "37",
"volume": "5749874"
}, {
"open": "20.95",
"high": "21.09",
"low": "19.64",
"close": "19.83",
"x": "38",
"volume": "6319111"
}, {
"open": "20.52",
"high": "21.03",
"low": "20.45",
"close": "21",
"x": "39",
"volume": "4412413"
}, {
"open": "20.36",
"high": "20.96",
"low": "20.2",
"close": "20.44",
"x": "40",
"volume": "5948318"
}, {
"open": "21.45",
"high": "21.48",
"low": "19.63",
"close": "20.3",
"x": "41",
"volume": "11935440"
}, {
"open": "23.49",
"high": "23.57",
"low": "21.12",
"close": "21.63",
"x": "42",
"volume": "10523910"
}, {
"open": "24.04",
"high": "24.21",
"low": "23.04",
"close": "23.28",
"x": "43",
"volume": "3843797"
}, {
"open": "23.6",
"high": "24.065",
"low": "23.51",
"close": "23.94",
"x": "44",
"volume": "3691404"
}, {
"open": "22.87",
"high": "23.49",
"low": "22.86",
"close": "23.48",
"x": "45",
"volume": "3387393"
}, {
"open": "22.35",
"high": "22.89",
"low": "22.35",
"close": "22.74",
"x": "46",
"volume": "3737330"
}, {
"open": "22.11",
"high": "22.5",
"low": "21.9",
"close": "22.24",
"x": "47",
"volume": "4630397"
}, {
"open": "22.58",
"high": "22.80",
"low": "22.25",
"close": "22.42",
"x": "48",
"volume": "3024711"
}, {
"open": "23.54",
"high": "23.76",
"low": "22.6",
"close": "22.68",
"x": "49",
"volume": "3984508"
}, {
"open": "23.66",
"high": "24.09",
"low": "23.09",
"close": "23.46",
"x": "50",
"volume": "3420204"
}, {
"open": "24.36",
"high": "24.42",
"low": "22.90",
"close": "23.6",
"x": "51",
"volume": "5151096"
}, {
"open": "24.34",
"high": "24.6",
"low": "23.73",
"close": "24.15",
"x": "52",
"volume": "5999654"
}, {
"open": "23.38",
"high": "24.8",
"low": "23.36",
"close": "24.1",
"x": "53",
"volume": "5382049"
}, {
"open": "23.76",
"high": "23.84",
"low": "23.23",
"close": "23.47",
"x": "54",
"volume": "3508510"
}, {
"open": "23.64",
"high": "23.94",
"low": "23.48",
"close": "23.76",
"x": "55",
"volume": "2718428"
}, {
"open": "23.99",
"high": "24.18",
"low": "23.59",
"close": "23.66",
"x": "56",
"volume": "2859391"
}, {
"open": "23.32",
"high": "24.26",
"low": "23.32",
"close": "23.79",
"x": "57",
"volume": "4138618"
}, {
"open": "24.08",
"high": "24.4",
"low": "23.26",
"close": "23.39",
"x": "58",
"volume": "4477478"
}, {
"open": "22.84",
"high": "23.96",
"low": "22.83",
"close": "23.88",
"x": "59",
"volume": "4822378"
}, {
"open": "23.38",
"high": "23.78",
"low": "22.94",
"close": "23.01",
"x": "60",
"volume": "4037312"
}, {
"open": "23.97",
"high": "23.99",
"low": "23.14",
"close": "23.32",
"x": "61",
"volume": "4879546"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attribute used to set the chart type for the price chart:
| Attribute Name | Description |
|---|---|
|
It is used to specify the chart type for rendering the price chart. This attribute takes ‘candlestick’ (default), ‘bar’, and ‘line’ as values. |
Setting the Price to Plot for the Line Price Chart
For a price chart rendered as a line chart, you can decide whether you want to plot the chart w.r.t the opening price or the closing price, using the plotClosingPrice attribute.
As discussed before, high and low price values are not required for the line chart.
Given below is a brief description of the attribute used to set the price to plot for the line chart:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the opening price or the closing price will be used to plot the line price chart. |
Showing/Hiding the Volume Chart
A candlestick chart rendered with the volume chart hidden looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Daily Stock Price HRYS",
"subCaption": "Last 2 months",
"numberprefix": "$",
"pyaxisname": "Price",
"vyaxisname": "Volume (In Millions)",
"showVolumeChart": "0",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "2 month ago",
"x": "1"
},
{
"label": "1 month ago",
"x": "31"
},
{
"label": "Today",
"x": "60"
}
]
}
],
"dataset": [
{
"data": [
{
"open": "18.74",
"high": "19.16",
"low": "18.67 ",
"close": "18.99",
"x": "1",
"volume": "4991285"
},
{
"open": "18.74",
"high": "19.06",
"low": "18.54",
"close": "18.82",
"x": "2",
"volume": "3615889"
},
{
"open": "19.21",
"high": "19.3",
"low": "18.59 ",
"close": "18.65",
"x": "3",
"volume": "4749586"
},
{
"open": "19.85",
"high": "19.86",
"low": "19.12",
"close": "19.4",
"x": "4",
"volume": "4366740"
},
{
"open": "20.19",
"high": "20.21",
"low": "19.57",
"close": "19.92",
"x": "5",
"volume": "3982709"
},
{
"open": "20.47",
"high": "20.64",
"low": "20.15",
"close": "20.16",
"x": "6",
"volume": "2289403"
},
{
"open": "20.36",
"high": "20.52",
"low": "20.29",
"close": "20.48",
"x": "7",
"volume": "1950919"
},
{
"open": "20.21",
"high": "20.25",
"low": "19.91",
"close": "20.15",
"x": "8",
"volume": "2391070"
},
{
"open": "19.46",
"high": "20.54",
"low": "19.46",
"close": "20.22",
"x": "9",
"volume": "4548422"
},
{
"open": "19.24",
"high": "19.5",
"low": "19.13",
"close": "19.44",
"x": "10",
"volume": "1889811"
},
{
"open": "19.25",
"high": "19.41",
"low": "18.99",
"close": "19.22",
"x": "11",
"volume": "2543355"
},
{
"open": "18.85",
"high": "19.45",
"low": "18.8",
"close": "19.24",
"x": "12",
"volume": "2134393"
},
{
"open": "18.97",
"high": "19.01",
"low": "18.68",
"close": "18.95",
"x": "13",
"volume": "1740852"
},
{
"open": "18.69",
"high": "19",
"low": "18.35",
"close": "18.97",
"x": "14",
"volume": "2701392"
},
{
"open": "19.02",
"high": "19.1",
"low": "18.68",
"close": "18.7",
"x": "15",
"volume": "2198755"
},
{
"open": "19.29",
"high": "19.38",
"low": "18.88",
"close": "19.05",
"x": "16",
"volume": "2464958"
},
{
"open": "18.64",
"high": "19.35",
"low": "18.53",
"close": "19.33",
"x": "17",
"volume": "2962994"
},
{
"open": "18.14",
"high": "18.58",
"low": "18.08",
"close": "18.52",
"x": "18",
"volume": "1964932"
},
{
"open": "18.49",
"high": "18.92",
"low": "18.19",
"close": "18.26",
"x": "19",
"volume": "3013102"
},
{
"open": "18.71",
"high": "18.84",
"low": "18",
"close": "18.51",
"x": "20",
"volume": "4435894"
},
{
"open": "19.17",
"high": "19.35",
"low": "18.61",
"close": "18.66",
"x": "21",
"volume": "3245851"
},
{
"open": "19.12",
"high": "19.41",
"low": "18.92",
"close": "19.2",
"x": "22",
"volume": "2259792"
},
{
"open": "19.43",
"high": "19.58",
"low": "19.16",
"close": "19.33",
"x": "23",
"volume": "3531327"
},
{
"open": "19.72",
"high": "19.81",
"low": "19.04",
"close": "19.27",
"x": "24",
"volume": "5834733"
},
{
"open": "19.7",
"high": "19.94",
"low": "19.49",
"close": "19.77",
"x": "25",
"volume": "2009987"
},
{
"open": "19.84",
"high": "19.98",
"low": "19.39",
"close": "19.88",
"x": "26",
"volume": "2767592"
},
{
"open": "20.71",
"high": "20.73",
"low": "19.16",
"close": "19.63",
"x": "27",
"volume": "673358"
},
{
"open": "21.14",
"high": "21.14",
"low": "20.55",
"close": "20.65",
"x": "28",
"volume": "3164006"
},
{
"open": "21.5",
"high": "21.86",
"low": "21.2",
"close": "21.33",
"x": "29",
"volume": "7986466"
},
{
"open": "20.45",
"high": "21.08",
"low": "20.1",
"close": "20.56",
"x": "30",
"volume": "5813040"
},
{
"open": "20.07",
"high": "20.69",
"low": "20.04",
"close": "20.36",
"x": "31",
"volume": "3440002"
},
{
"open": "19.88",
"high": "20.11",
"low": "19.51",
"close": "20.03",
"x": "32",
"volume": "2779171"
},
{
"open": "19.76",
"high": "20.13",
"low": "19.65",
"close": "19.88",
"x": "33",
"volume": "2918115"
},
{
"open": "19.77",
"high": "19.97",
"low": "19.27",
"close": "19.9",
"x": "34",
"volume": "3850357"
},
{
"open": "19.43",
"high": "19.72",
"low": "18.88",
"close": "19.5",
"x": "35",
"volume": "5047378"
},
{
"open": "19.69",
"high": "19.84",
"low": "19.17",
"close": "19.43",
"x": "36",
"volume": "3479017"
},
{
"open": "19.59",
"high": "20.02",
"low": "19.02",
"close": "19.41",
"x": "37",
"volume": "5749874"
},
{
"open": "20.95",
"high": "21.09",
"low": "19.64",
"close": "19.83",
"x": "38",
"volume": "6319111"
},
{
"open": "20.52",
"high": "21.03",
"low": "20.45",
"close": "21",
"x": "39",
"volume": "4412413"
},
{
"open": "20.36",
"high": "20.96",
"low": "20.2",
"close": "20.44",
"x": "40",
"volume": "5948318"
},
{
"open": "21.45",
"high": "21.48",
"low": "19.63",
"close": "20.3",
"x": "41",
"volume": "11935440"
},
{
"open": "23.49",
"high": "23.57",
"low": "21.12",
"close": "21.63",
"x": "42",
"volume": "10523910"
},
{
"open": "24.04",
"high": "24.21",
"low": "23.04",
"close": "23.28",
"x": "43",
"volume": "3843797"
},
{
"open": "23.6",
"high": "24.065",
"low": "23.51",
"close": "23.94",
"x": "44",
"volume": "3691404"
},
{
"open": "22.87",
"high": "23.49",
"low": "22.86",
"close": "23.48",
"x": "45",
"volume": "3387393"
},
{
"open": "22.35",
"high": "22.89",
"low": "22.35",
"close": "22.74",
"x": "46",
"volume": "3737330"
},
{
"open": "22.11",
"high": "22.5",
"low": "21.9",
"close": "22.24",
"x": "47",
"volume": "4630397"
},
{
"open": "22.58",
"high": "22.80",
"low": "22.25",
"close": "22.42",
"x": "48",
"volume": "3024711"
},
{
"open": "23.54",
"high": "23.76",
"low": "22.6",
"close": "22.68",
"x": "49",
"volume": "3984508"
},
{
"open": "23.66",
"high": "24.09",
"low": "23.09",
"close": "23.46",
"x": "50",
"volume": "3420204"
},
{
"open": "24.36",
"high": "24.42",
"low": "22.90",
"close": "23.6",
"x": "51",
"volume": "5151096"
},
{
"open": "24.34",
"high": "24.6",
"low": "23.73",
"close": "24.15",
"x": "52",
"volume": "5999654"
},
{
"open": "23.38",
"high": "24.8",
"low": "23.36",
"close": "24.1",
"x": "53",
"volume": "5382049"
},
{
"open": "23.76",
"high": "23.84",
"low": "23.23",
"close": "23.47",
"x": "54",
"volume": "3508510"
},
{
"open": "23.64",
"high": "23.94",
"low": "23.48",
"close": "23.76",
"x": "55",
"volume": "2718428"
},
{
"open": "23.99",
"high": "24.18",
"low": "23.59",
"close": "23.66",
"x": "56",
"volume": "2859391"
},
{
"open": "23.32",
"high": "24.26",
"low": "23.32",
"close": "23.79",
"x": "57",
"volume": "4138618"
},
{
"open": "24.08",
"high": "24.4",
"low": "23.26",
"close": "23.39",
"x": "58",
"volume": "4477478"
},
{
"open": "22.84",
"high": "23.96",
"low": "22.83",
"close": "23.88",
"x": "59",
"volume": "4822378"
},
{
"open": "23.38",
"high": "23.78",
"low": "22.94",
"close": "23.01",
"x": "60",
"volume": "4037312"
},
{
"open": "23.97",
"high": "23.99",
"low": "23.14",
"close": "23.32",
"x": "61",
"volume": "4879546"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'candlestick',
renderAt: 'chart-container',
id: 'myChart',
width: '600',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Daily Stock Price HRYS",
"subCaption": "Last 2 months",
"numberprefix": "$",
"pyaxisname": "Price",
"vyaxisname": "Volume (In Millions)",
"showVolumeChart": "0",
"theme": "fint",
},
"categories": [{
"category": [{
"label": "2 month ago",
"x": "1"
}, {
"label": "1 month ago",
"x": "31"
}, {
"label": "Today",
"x": "60"
}]
}],
"dataset": [{
"data": [{
"open": "18.74",
"high": "19.16",
"low": "18.67 ",
"close": "18.99",
"x": "1",
"volume": "4991285"
}, {
"open": "18.74",
"high": "19.06",
"low": "18.54",
"close": "18.82",
"x": "2",
"volume": "3615889"
}, {
"open": "19.21",
"high": "19.3",
"low": "18.59 ",
"close": "18.65",
"x": "3",
"volume": "4749586"
}, {
"open": "19.85",
"high": "19.86",
"low": "19.12",
"close": "19.4",
"x": "4",
"volume": "4366740"
}, {
"open": "20.19",
"high": "20.21",
"low": "19.57",
"close": "19.92",
"x": "5",
"volume": "3982709"
}, {
"open": "20.47",
"high": "20.64",
"low": "20.15",
"close": "20.16",
"x": "6",
"volume": "2289403"
}, {
"open": "20.36",
"high": "20.52",
"low": "20.29",
"close": "20.48",
"x": "7",
"volume": "1950919"
}, {
"open": "20.21",
"high": "20.25",
"low": "19.91",
"close": "20.15",
"x": "8",
"volume": "2391070"
}, {
"open": "19.46",
"high": "20.54",
"low": "19.46",
"close": "20.22",
"x": "9",
"volume": "4548422"
}, {
"open": "19.24",
"high": "19.5",
"low": "19.13",
"close": "19.44",
"x": "10",
"volume": "1889811"
}, {
"open": "19.25",
"high": "19.41",
"low": "18.99",
"close": "19.22",
"x": "11",
"volume": "2543355"
}, {
"open": "18.85",
"high": "19.45",
"low": "18.8",
"close": "19.24",
"x": "12",
"volume": "2134393"
}, {
"open": "18.97",
"high": "19.01",
"low": "18.68",
"close": "18.95",
"x": "13",
"volume": "1740852"
}, {
"open": "18.69",
"high": "19",
"low": "18.35",
"close": "18.97",
"x": "14",
"volume": "2701392"
}, {
"open": "19.02",
"high": "19.1",
"low": "18.68",
"close": "18.7",
"x": "15",
"volume": "2198755"
}, {
"open": "19.29",
"high": "19.38",
"low": "18.88",
"close": "19.05",
"x": "16",
"volume": "2464958"
}, {
"open": "18.64",
"high": "19.35",
"low": "18.53",
"close": "19.33",
"x": "17",
"volume": "2962994"
}, {
"open": "18.14",
"high": "18.58",
"low": "18.08",
"close": "18.52",
"x": "18",
"volume": "1964932"
}, {
"open": "18.49",
"high": "18.92",
"low": "18.19",
"close": "18.26",
"x": "19",
"volume": "3013102"
}, {
"open": "18.71",
"high": "18.84",
"low": "18",
"close": "18.51",
"x": "20",
"volume": "4435894"
}, {
"open": "19.17",
"high": "19.35",
"low": "18.61",
"close": "18.66",
"x": "21",
"volume": "3245851"
}, {
"open": "19.12",
"high": "19.41",
"low": "18.92",
"close": "19.2",
"x": "22",
"volume": "2259792"
}, {
"open": "19.43",
"high": "19.58",
"low": "19.16",
"close": "19.33",
"x": "23",
"volume": "3531327"
}, {
"open": "19.72",
"high": "19.81",
"low": "19.04",
"close": "19.27",
"x": "24",
"volume": "5834733"
}, {
"open": "19.7",
"high": "19.94",
"low": "19.49",
"close": "19.77",
"x": "25",
"volume": "2009987"
}, {
"open": "19.84",
"high": "19.98",
"low": "19.39",
"close": "19.88",
"x": "26",
"volume": "2767592"
}, {
"open": "20.71",
"high": "20.73",
"low": "19.16",
"close": "19.63",
"x": "27",
"volume": "673358"
}, {
"open": "21.14",
"high": "21.14",
"low": "20.55",
"close": "20.65",
"x": "28",
"volume": "3164006"
}, {
"open": "21.5",
"high": "21.86",
"low": "21.2",
"close": "21.33",
"x": "29",
"volume": "7986466"
}, {
"open": "20.45",
"high": "21.08",
"low": "20.1",
"close": "20.56",
"x": "30",
"volume": "5813040"
}, {
"open": "20.07",
"high": "20.69",
"low": "20.04",
"close": "20.36",
"x": "31",
"volume": "3440002"
}, {
"open": "19.88",
"high": "20.11",
"low": "19.51",
"close": "20.03",
"x": "32",
"volume": "2779171"
}, {
"open": "19.76",
"high": "20.13",
"low": "19.65",
"close": "19.88",
"x": "33",
"volume": "2918115"
}, {
"open": "19.77",
"high": "19.97",
"low": "19.27",
"close": "19.9",
"x": "34",
"volume": "3850357"
}, {
"open": "19.43",
"high": "19.72",
"low": "18.88",
"close": "19.5",
"x": "35",
"volume": "5047378"
}, {
"open": "19.69",
"high": "19.84",
"low": "19.17",
"close": "19.43",
"x": "36",
"volume": "3479017"
}, {
"open": "19.59",
"high": "20.02",
"low": "19.02",
"close": "19.41",
"x": "37",
"volume": "5749874"
}, {
"open": "20.95",
"high": "21.09",
"low": "19.64",
"close": "19.83",
"x": "38",
"volume": "6319111"
}, {
"open": "20.52",
"high": "21.03",
"low": "20.45",
"close": "21",
"x": "39",
"volume": "4412413"
}, {
"open": "20.36",
"high": "20.96",
"low": "20.2",
"close": "20.44",
"x": "40",
"volume": "5948318"
}, {
"open": "21.45",
"high": "21.48",
"low": "19.63",
"close": "20.3",
"x": "41",
"volume": "11935440"
}, {
"open": "23.49",
"high": "23.57",
"low": "21.12",
"close": "21.63",
"x": "42",
"volume": "10523910"
}, {
"open": "24.04",
"high": "24.21",
"low": "23.04",
"close": "23.28",
"x": "43",
"volume": "3843797"
}, {
"open": "23.6",
"high": "24.065",
"low": "23.51",
"close": "23.94",
"x": "44",
"volume": "3691404"
}, {
"open": "22.87",
"high": "23.49",
"low": "22.86",
"close": "23.48",
"x": "45",
"volume": "3387393"
}, {
"open": "22.35",
"high": "22.89",
"low": "22.35",
"close": "22.74",
"x": "46",
"volume": "3737330"
}, {
"open": "22.11",
"high": "22.5",
"low": "21.9",
"close": "22.24",
"x": "47",
"volume": "4630397"
}, {
"open": "22.58",
"high": "22.80",
"low": "22.25",
"close": "22.42",
"x": "48",
"volume": "3024711"
}, {
"open": "23.54",
"high": "23.76",
"low": "22.6",
"close": "22.68",
"x": "49",
"volume": "3984508"
}, {
"open": "23.66",
"high": "24.09",
"low": "23.09",
"close": "23.46",
"x": "50",
"volume": "3420204"
}, {
"open": "24.36",
"high": "24.42",
"low": "22.90",
"close": "23.6",
"x": "51",
"volume": "5151096"
}, {
"open": "24.34",
"high": "24.6",
"low": "23.73",
"close": "24.15",
"x": "52",
"volume": "5999654"
}, {
"open": "23.38",
"high": "24.8",
"low": "23.36",
"close": "24.1",
"x": "53",
"volume": "5382049"
}, {
"open": "23.76",
"high": "23.84",
"low": "23.23",
"close": "23.47",
"x": "54",
"volume": "3508510"
}, {
"open": "23.64",
"high": "23.94",
"low": "23.48",
"close": "23.76",
"x": "55",
"volume": "2718428"
}, {
"open": "23.99",
"high": "24.18",
"low": "23.59",
"close": "23.66",
"x": "56",
"volume": "2859391"
}, {
"open": "23.32",
"high": "24.26",
"low": "23.32",
"close": "23.79",
"x": "57",
"volume": "4138618"
}, {
"open": "24.08",
"high": "24.4",
"low": "23.26",
"close": "23.39",
"x": "58",
"volume": "4477478"
}, {
"open": "22.84",
"high": "23.96",
"low": "22.83",
"close": "23.88",
"x": "59",
"volume": "4822378"
}, {
"open": "23.38",
"high": "23.78",
"low": "22.94",
"close": "23.01",
"x": "60",
"volume": "4037312"
}, {
"open": "23.97",
"high": "23.99",
"low": "23.14",
"close": "23.32",
"x": "61",
"volume": "4879546"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attribute used to show/hide the volume chart:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the volume chart will be shown or hidden. Setting this attribute to |
You can also customize the height of the volume chart by volumeHeightPercent attribute. The default value is 40% and you can choose any value between 20% to 80%.
Configuring Trend-sets and Trend-lines
Trend-sets
For a candlestick chart, you can plot overlay lines on the existing data plots. These lines, known as trend-sets, can be effectively used to show technical indicators.
A candlestick chart rendered with a trend-set looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Daily Stock Price HRYS",
"subCaption": "Last 2 months",
"numberprefix": "$",
"pyaxisname": "Price",
"vyaxisname": "Volume (In Millions)",
"showVolumeChart": "0",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "2 month ago",
"x": "1"
},
{
"label": "1 month ago",
"x": "31"
},
{
"label": "Today",
"x": "60"
}
]
}
],
"dataset": [
{
"data": [
{
"open": "18.74",
"high": "19.16",
"low": "18.67 ",
"close": "18.99",
"x": "1",
"volume": "4991285"
},
{
"open": "18.74",
"high": "19.06",
"low": "18.54",
"close": "18.82",
"x": "2",
"volume": "3615889"
},
{
"open": "19.21",
"high": "19.3",
"low": "18.59 ",
"close": "18.65",
"x": "3",
"volume": "4749586"
},
{
"open": "19.85",
"high": "19.86",
"low": "19.12",
"close": "19.4",
"x": "4",
"volume": "4366740"
},
{
"open": "20.19",
"high": "20.21",
"low": "19.57",
"close": "19.92",
"x": "5",
"volume": "3982709"
},
{
"open": "20.47",
"high": "20.64",
"low": "20.15",
"close": "20.16",
"x": "6",
"volume": "2289403"
},
{
"open": "20.36",
"high": "20.52",
"low": "20.29",
"close": "20.48",
"x": "7",
"volume": "1950919"
},
{
"open": "20.21",
"high": "20.25",
"low": "19.91",
"close": "20.15",
"x": "8",
"volume": "2391070"
},
{
"open": "19.46",
"high": "20.54",
"low": "19.46",
"close": "20.22",
"x": "9",
"volume": "4548422"
},
{
"open": "19.24",
"high": "19.5",
"low": "19.13",
"close": "19.44",
"x": "10",
"volume": "1889811"
},
{
"open": "19.25",
"high": "19.41",
"low": "18.99",
"close": "19.22",
"x": "11",
"volume": "2543355"
},
{
"open": "18.85",
"high": "19.45",
"low": "18.8",
"close": "19.24",
"x": "12",
"volume": "2134393"
},
{
"open": "18.97",
"high": "19.01",
"low": "18.68",
"close": "18.95",
"x": "13",
"volume": "1740852"
},
{
"open": "18.69",
"high": "19",
"low": "18.35",
"close": "18.97",
"x": "14",
"volume": "2701392"
},
{
"open": "19.02",
"high": "19.1",
"low": "18.68",
"close": "18.7",
"x": "15",
"volume": "2198755"
},
{
"open": "19.29",
"high": "19.38",
"low": "18.88",
"close": "19.05",
"x": "16",
"volume": "2464958"
},
{
"open": "18.64",
"high": "19.35",
"low": "18.53",
"close": "19.33",
"x": "17",
"volume": "2962994"
},
{
"open": "18.14",
"high": "18.58",
"low": "18.08",
"close": "18.52",
"x": "18",
"volume": "1964932"
},
{
"open": "18.49",
"high": "18.92",
"low": "18.19",
"close": "18.26",
"x": "19",
"volume": "3013102"
},
{
"open": "18.71",
"high": "18.84",
"low": "18",
"close": "18.51",
"x": "20",
"volume": "4435894"
},
{
"open": "19.17",
"high": "19.35",
"low": "18.61",
"close": "18.66",
"x": "21",
"volume": "3245851"
},
{
"open": "19.12",
"high": "19.41",
"low": "18.92",
"close": "19.2",
"x": "22",
"volume": "2259792"
},
{
"open": "19.43",
"high": "19.58",
"low": "19.16",
"close": "19.33",
"x": "23",
"volume": "3531327"
},
{
"open": "19.72",
"high": "19.81",
"low": "19.04",
"close": "19.27",
"x": "24",
"volume": "5834733"
},
{
"open": "19.7",
"high": "19.94",
"low": "19.49",
"close": "19.77",
"x": "25",
"volume": "2009987"
},
{
"open": "19.84",
"high": "19.98",
"low": "19.39",
"close": "19.88",
"x": "26",
"volume": "2767592"
},
{
"open": "20.71",
"high": "20.73",
"low": "19.16",
"close": "19.63",
"x": "27",
"volume": "673358"
},
{
"open": "21.14",
"high": "21.14",
"low": "20.55",
"close": "20.65",
"x": "28",
"volume": "3164006"
},
{
"open": "21.5",
"high": "21.86",
"low": "21.2",
"close": "21.33",
"x": "29",
"volume": "7986466"
},
{
"open": "20.45",
"high": "21.08",
"low": "20.1",
"close": "20.56",
"x": "30",
"volume": "5813040"
},
{
"open": "20.07",
"high": "20.69",
"low": "20.04",
"close": "20.36",
"x": "31",
"volume": "3440002"
},
{
"open": "19.88",
"high": "20.11",
"low": "19.51",
"close": "20.03",
"x": "32",
"volume": "2779171"
},
{
"open": "19.76",
"high": "20.13",
"low": "19.65",
"close": "19.88",
"x": "33",
"volume": "2918115"
},
{
"open": "19.77",
"high": "19.97",
"low": "19.27",
"close": "19.9",
"x": "34",
"volume": "3850357"
},
{
"open": "19.43",
"high": "19.72",
"low": "18.88",
"close": "19.5",
"x": "35",
"volume": "5047378"
},
{
"open": "19.69",
"high": "19.84",
"low": "19.17",
"close": "19.43",
"x": "36",
"volume": "3479017"
},
{
"open": "19.59",
"high": "20.02",
"low": "19.02",
"close": "19.41",
"x": "37",
"volume": "5749874"
},
{
"open": "20.95",
"high": "21.09",
"low": "19.64",
"close": "19.83",
"x": "38",
"volume": "6319111"
},
{
"open": "20.52",
"high": "21.03",
"low": "20.45",
"close": "21",
"x": "39",
"volume": "4412413"
},
{
"open": "20.36",
"high": "20.96",
"low": "20.2",
"close": "20.44",
"x": "40",
"volume": "5948318"
},
{
"open": "21.45",
"high": "21.48",
"low": "19.63",
"close": "20.3",
"x": "41",
"volume": "11935440"
},
{
"open": "23.49",
"high": "23.57",
"low": "21.12",
"close": "21.63",
"x": "42",
"volume": "10523910"
},
{
"open": "24.04",
"high": "24.21",
"low": "23.04",
"close": "23.28",
"x": "43",
"volume": "3843797"
},
{
"open": "23.6",
"high": "24.065",
"low": "23.51",
"close": "23.94",
"x": "44",
"volume": "3691404"
},
{
"open": "22.87",
"high": "23.49",
"low": "22.86",
"close": "23.48",
"x": "45",
"volume": "3387393"
},
{
"open": "22.35",
"high": "22.89",
"low": "22.35",
"close": "22.74",
"x": "46",
"volume": "3737330"
},
{
"open": "22.11",
"high": "22.5",
"low": "21.9",
"close": "22.24",
"x": "47",
"volume": "4630397"
},
{
"open": "22.58",
"high": "22.80",
"low": "22.25",
"close": "22.42",
"x": "48",
"volume": "3024711"
},
{
"open": "23.54",
"high": "23.76",
"low": "22.6",
"close": "22.68",
"x": "49",
"volume": "3984508"
},
{
"open": "23.66",
"high": "24.09",
"low": "23.09",
"close": "23.46",
"x": "50",
"volume": "3420204"
},
{
"open": "24.36",
"high": "24.42",
"low": "22.90",
"close": "23.6",
"x": "51",
"volume": "5151096"
},
{
"open": "24.34",
"high": "24.6",
"low": "23.73",
"close": "24.15",
"x": "52",
"volume": "5999654"
},
{
"open": "23.38",
"high": "24.8",
"low": "23.36",
"close": "24.1",
"x": "53",
"volume": "5382049"
},
{
"open": "23.76",
"high": "23.84",
"low": "23.23",
"close": "23.47",
"x": "54",
"volume": "3508510"
},
{
"open": "23.64",
"high": "23.94",
"low": "23.48",
"close": "23.76",
"x": "55",
"volume": "2718428"
},
{
"open": "23.99",
"high": "24.18",
"low": "23.59",
"close": "23.66",
"x": "56",
"volume": "2859391"
},
{
"open": "23.32",
"high": "24.26",
"low": "23.32",
"close": "23.79",
"x": "57",
"volume": "4138618"
},
{
"open": "24.08",
"high": "24.4",
"low": "23.26",
"close": "23.39",
"x": "58",
"volume": "4477478"
},
{
"open": "22.84",
"high": "23.96",
"low": "22.83",
"close": "23.88",
"x": "59",
"volume": "4822378"
},
{
"open": "23.38",
"high": "23.78",
"low": "22.94",
"close": "23.01",
"x": "60",
"volume": "4037312"
},
{
"open": "23.97",
"high": "23.99",
"low": "23.14",
"close": "23.32",
"x": "61",
"volume": "4879546"
}
]
}
],
"trendset": [
{
"name": "High trends",
"color": "#0000CC",
"thickness": "1",
"includeInLegend": "1",
"set": [
{
"value": "19.16",
"x": "1"
},
{
"value": "19.06",
"x": "2"
},
{
"value": "19.3",
"x": "3"
},
{
"value": "19.86",
"x": "4"
},
{
"value": "20.21",
"x": "5"
},
{
"value": "20.64",
"x": "6"
},
{
"value": "20.52",
"x": "7"
},
{
"value": "20.25",
"x": "8"
},
{
"value": "20.54",
"x": "9"
},
{
"value": "19.5",
"x": "10"
},
{
"value": "19.41",
"x": "11"
},
{
"value": "19.45",
"x": "12"
},
{
"value": "19.01",
"x": "13"
},
{
"value": "19",
"x": "14"
},
{
"value": "19.1",
"x": "15"
},
{
"value": "19.38",
"x": "16"
},
{
"value": "19.35",
"x": "17"
},
{
"value": "18.58",
"x": "18"
},
{
"value": "18.92",
"x": "19"
},
{
"value": "18.84",
"x": "20"
},
{
"value": "19.35",
"x": "21"
},
{
"value": "19.41",
"x": "22"
},
{
"value": "19.58",
"x": "23"
},
{
"value": "19.81",
"x": "24"
},
{
"value": "19.94",
"x": "25"
},
{
"value": "19.98",
"x": "26"
},
{
"value": "20.73",
"x": "27"
},
{
"value": "21.14",
"x": "28"
},
{
"value": "21.86",
"x": "29"
},
{
"value": "21.08",
"x": "30"
},
{
"value": "20.69",
"x": "31"
},
{
"value": "20.11",
"x": "32"
},
{
"value": "20.13",
"x": "33"
},
{
"value": "19.97",
"x": "34"
},
{
"value": "19.72",
"x": "35"
},
{
"value": "19.84",
"x": "36"
},
{
"value": "20.02",
"x": "37"
},
{
"value": "21.09",
"x": "38"
},
{
"value": "21.03",
"x": "39"
},
{
"value": "20.96",
"x": "40"
},
{
"value": "21.48",
"x": "41"
},
{
"value": "23.57",
"x": "42"
},
{
"value": "24.21",
"x": "43"
},
{
"value": "24.065",
"x": "44"
},
{
"value": "23.49",
"x": "45"
},
{
"value": "22.89",
"x": "46"
},
{
"value": "22.5",
"x": "47"
},
{
"value": "22.80",
"x": "48"
},
{
"value": "23.76",
"x": "49"
},
{
"value": "24.09",
"x": "50"
},
{
"value": "24.42",
"x": "51"
},
{
"value": "24.6",
"x": "52"
},
{
"value": "24.8",
"x": "53"
},
{
"value": "23.84",
"x": "54"
},
{
"value": "23.94",
"x": "55"
},
{
"value": "24.18",
"x": "56"
},
{
"value": "24.26",
"x": "57"
},
{
"value": "24.4",
"x": "58"
},
{
"value": "23.96",
"x": "59"
},
{
"value": "23.78",
"x": "60"
},
{
"value": "23.99",
"x": "61"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'candlestick',
renderAt: 'chart-container',
id: 'myChart',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Daily Stock Price HRYS",
"subCaption": "Last 2 months",
"numberprefix": "$",
"pyaxisname": "Price",
"vyaxisname": "Volume (In Millions)",
"showVolumeChart": "0",
"theme": "fint",
},
"categories": [{
"category": [{
"label": "2 month ago",
"x": "1"
}, {
"label": "1 month ago",
"x": "31"
}, {
"label": "Today",
"x": "60"
}]
}],
"dataset": [{
"data": [{
"open": "18.74",
"high": "19.16",
"low": "18.67 ",
"close": "18.99",
"x": "1",
"volume": "4991285"
}, {
"open": "18.74",
"high": "19.06",
"low": "18.54",
"close": "18.82",
"x": "2",
"volume": "3615889"
}, {
"open": "19.21",
"high": "19.3",
"low": "18.59 ",
"close": "18.65",
"x": "3",
"volume": "4749586"
}, {
"open": "19.85",
"high": "19.86",
"low": "19.12",
"close": "19.4",
"x": "4",
"volume": "4366740"
}, {
"open": "20.19",
"high": "20.21",
"low": "19.57",
"close": "19.92",
"x": "5",
"volume": "3982709"
}, {
"open": "20.47",
"high": "20.64",
"low": "20.15",
"close": "20.16",
"x": "6",
"volume": "2289403"
}, {
"open": "20.36",
"high": "20.52",
"low": "20.29",
"close": "20.48",
"x": "7",
"volume": "1950919"
}, {
"open": "20.21",
"high": "20.25",
"low": "19.91",
"close": "20.15",
"x": "8",
"volume": "2391070"
}, {
"open": "19.46",
"high": "20.54",
"low": "19.46",
"close": "20.22",
"x": "9",
"volume": "4548422"
}, {
"open": "19.24",
"high": "19.5",
"low": "19.13",
"close": "19.44",
"x": "10",
"volume": "1889811"
}, {
"open": "19.25",
"high": "19.41",
"low": "18.99",
"close": "19.22",
"x": "11",
"volume": "2543355"
}, {
"open": "18.85",
"high": "19.45",
"low": "18.8",
"close": "19.24",
"x": "12",
"volume": "2134393"
}, {
"open": "18.97",
"high": "19.01",
"low": "18.68",
"close": "18.95",
"x": "13",
"volume": "1740852"
}, {
"open": "18.69",
"high": "19",
"low": "18.35",
"close": "18.97",
"x": "14",
"volume": "2701392"
}, {
"open": "19.02",
"high": "19.1",
"low": "18.68",
"close": "18.7",
"x": "15",
"volume": "2198755"
}, {
"open": "19.29",
"high": "19.38",
"low": "18.88",
"close": "19.05",
"x": "16",
"volume": "2464958"
}, {
"open": "18.64",
"high": "19.35",
"low": "18.53",
"close": "19.33",
"x": "17",
"volume": "2962994"
}, {
"open": "18.14",
"high": "18.58",
"low": "18.08",
"close": "18.52",
"x": "18",
"volume": "1964932"
}, {
"open": "18.49",
"high": "18.92",
"low": "18.19",
"close": "18.26",
"x": "19",
"volume": "3013102"
}, {
"open": "18.71",
"high": "18.84",
"low": "18",
"close": "18.51",
"x": "20",
"volume": "4435894"
}, {
"open": "19.17",
"high": "19.35",
"low": "18.61",
"close": "18.66",
"x": "21",
"volume": "3245851"
}, {
"open": "19.12",
"high": "19.41",
"low": "18.92",
"close": "19.2",
"x": "22",
"volume": "2259792"
}, {
"open": "19.43",
"high": "19.58",
"low": "19.16",
"close": "19.33",
"x": "23",
"volume": "3531327"
}, {
"open": "19.72",
"high": "19.81",
"low": "19.04",
"close": "19.27",
"x": "24",
"volume": "5834733"
}, {
"open": "19.7",
"high": "19.94",
"low": "19.49",
"close": "19.77",
"x": "25",
"volume": "2009987"
}, {
"open": "19.84",
"high": "19.98",
"low": "19.39",
"close": "19.88",
"x": "26",
"volume": "2767592"
}, {
"open": "20.71",
"high": "20.73",
"low": "19.16",
"close": "19.63",
"x": "27",
"volume": "673358"
}, {
"open": "21.14",
"high": "21.14",
"low": "20.55",
"close": "20.65",
"x": "28",
"volume": "3164006"
}, {
"open": "21.5",
"high": "21.86",
"low": "21.2",
"close": "21.33",
"x": "29",
"volume": "7986466"
}, {
"open": "20.45",
"high": "21.08",
"low": "20.1",
"close": "20.56",
"x": "30",
"volume": "5813040"
}, {
"open": "20.07",
"high": "20.69",
"low": "20.04",
"close": "20.36",
"x": "31",
"volume": "3440002"
}, {
"open": "19.88",
"high": "20.11",
"low": "19.51",
"close": "20.03",
"x": "32",
"volume": "2779171"
}, {
"open": "19.76",
"high": "20.13",
"low": "19.65",
"close": "19.88",
"x": "33",
"volume": "2918115"
}, {
"open": "19.77",
"high": "19.97",
"low": "19.27",
"close": "19.9",
"x": "34",
"volume": "3850357"
}, {
"open": "19.43",
"high": "19.72",
"low": "18.88",
"close": "19.5",
"x": "35",
"volume": "5047378"
}, {
"open": "19.69",
"high": "19.84",
"low": "19.17",
"close": "19.43",
"x": "36",
"volume": "3479017"
}, {
"open": "19.59",
"high": "20.02",
"low": "19.02",
"close": "19.41",
"x": "37",
"volume": "5749874"
}, {
"open": "20.95",
"high": "21.09",
"low": "19.64",
"close": "19.83",
"x": "38",
"volume": "6319111"
}, {
"open": "20.52",
"high": "21.03",
"low": "20.45",
"close": "21",
"x": "39",
"volume": "4412413"
}, {
"open": "20.36",
"high": "20.96",
"low": "20.2",
"close": "20.44",
"x": "40",
"volume": "5948318"
}, {
"open": "21.45",
"high": "21.48",
"low": "19.63",
"close": "20.3",
"x": "41",
"volume": "11935440"
}, {
"open": "23.49",
"high": "23.57",
"low": "21.12",
"close": "21.63",
"x": "42",
"volume": "10523910"
}, {
"open": "24.04",
"high": "24.21",
"low": "23.04",
"close": "23.28",
"x": "43",
"volume": "3843797"
}, {
"open": "23.6",
"high": "24.065",
"low": "23.51",
"close": "23.94",
"x": "44",
"volume": "3691404"
}, {
"open": "22.87",
"high": "23.49",
"low": "22.86",
"close": "23.48",
"x": "45",
"volume": "3387393"
}, {
"open": "22.35",
"high": "22.89",
"low": "22.35",
"close": "22.74",
"x": "46",
"volume": "3737330"
}, {
"open": "22.11",
"high": "22.5",
"low": "21.9",
"close": "22.24",
"x": "47",
"volume": "4630397"
}, {
"open": "22.58",
"high": "22.80",
"low": "22.25",
"close": "22.42",
"x": "48",
"volume": "3024711"
}, {
"open": "23.54",
"high": "23.76",
"low": "22.6",
"close": "22.68",
"x": "49",
"volume": "3984508"
}, {
"open": "23.66",
"high": "24.09",
"low": "23.09",
"close": "23.46",
"x": "50",
"volume": "3420204"
}, {
"open": "24.36",
"high": "24.42",
"low": "22.90",
"close": "23.6",
"x": "51",
"volume": "5151096"
}, {
"open": "24.34",
"high": "24.6",
"low": "23.73",
"close": "24.15",
"x": "52",
"volume": "5999654"
}, {
"open": "23.38",
"high": "24.8",
"low": "23.36",
"close": "24.1",
"x": "53",
"volume": "5382049"
}, {
"open": "23.76",
"high": "23.84",
"low": "23.23",
"close": "23.47",
"x": "54",
"volume": "3508510"
}, {
"open": "23.64",
"high": "23.94",
"low": "23.48",
"close": "23.76",
"x": "55",
"volume": "2718428"
}, {
"open": "23.99",
"high": "24.18",
"low": "23.59",
"close": "23.66",
"x": "56",
"volume": "2859391"
}, {
"open": "23.32",
"high": "24.26",
"low": "23.32",
"close": "23.79",
"x": "57",
"volume": "4138618"
}, {
"open": "24.08",
"high": "24.4",
"low": "23.26",
"close": "23.39",
"x": "58",
"volume": "4477478"
}, {
"open": "22.84",
"high": "23.96",
"low": "22.83",
"close": "23.88",
"x": "59",
"volume": "4822378"
}, {
"open": "23.38",
"high": "23.78",
"low": "22.94",
"close": "23.01",
"x": "60",
"volume": "4037312"
}, {
"open": "23.97",
"high": "23.99",
"low": "23.14",
"close": "23.32",
"x": "61",
"volume": "4879546"
}]
}],
"trendset": [{
"name": "High trends",
"color": "#0000CC",
"thickness": "1",
"includeInLegend": "1",
"set": [{
"value": "19.16",
"x": "1"
}, {
"value": "19.06",
"x": "2"
}, {
"value": "19.3",
"x": "3"
}, {
"value": "19.86",
"x": "4"
}, {
"value": "20.21",
"x": "5"
}, {
"value": "20.64",
"x": "6"
}, {
"value": "20.52",
"x": "7"
}, {
"value": "20.25",
"x": "8"
}, {
"value": "20.54",
"x": "9"
}, {
"value": "19.5",
"x": "10"
}, {
"value": "19.41",
"x": "11"
}, {
"value": "19.45",
"x": "12"
}, {
"value": "19.01",
"x": "13"
}, {
"value": "19",
"x": "14"
}, {
"value": "19.1",
"x": "15"
}, {
"value": "19.38",
"x": "16"
}, {
"value": "19.35",
"x": "17"
}, {
"value": "18.58",
"x": "18"
}, {
"value": "18.92",
"x": "19"
}, {
"value": "18.84",
"x": "20"
}, {
"value": "19.35",
"x": "21"
}, {
"value": "19.41",
"x": "22"
}, {
"value": "19.58",
"x": "23"
}, {
"value": "19.81",
"x": "24"
}, {
"value": "19.94",
"x": "25"
}, {
"value": "19.98",
"x": "26"
}, {
"value": "20.73",
"x": "27"
}, {
"value": "21.14",
"x": "28"
}, {
"value": "21.86",
"x": "29"
}, {
"value": "21.08",
"x": "30"
}, {
"value": "20.69",
"x": "31"
}, {
"value": "20.11",
"x": "32"
}, {
"value": "20.13",
"x": "33"
}, {
"value": "19.97",
"x": "34"
}, {
"value": "19.72",
"x": "35"
}, {
"value": "19.84",
"x": "36"
}, {
"value": "20.02",
"x": "37"
}, {
"value": "21.09",
"x": "38"
}, {
"value": "21.03",
"x": "39"
}, {
"value": "20.96",
"x": "40"
}, {
"value": "21.48",
"x": "41"
}, {
"value": "23.57",
"x": "42"
}, {
"value": "24.21",
"x": "43"
}, {
"value": "24.065",
"x": "44"
}, {
"value": "23.49",
"x": "45"
}, {
"value": "22.89",
"x": "46"
}, {
"value": "22.5",
"x": "47"
}, {
"value": "22.80",
"x": "48"
}, {
"value": "23.76",
"x": "49"
}, {
"value": "24.09",
"x": "50"
}, {
"value": "24.42",
"x": "51"
}, {
"value": "24.6",
"x": "52"
}, {
"value": "24.8",
"x": "53"
}, {
"value": "23.84",
"x": "54"
}, {
"value": "23.94",
"x": "55"
}, {
"value": "24.18",
"x": "56"
}, {
"value": "24.26",
"x": "57"
}, {
"value": "24.4",
"x": "58"
}, {
"value": "23.96",
"x": "59"
}, {
"value": "23.78",
"x": "60"
}, {
"value": "23.99",
"x": "61"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to configure the cosmetic and functional properties of trend-sets:
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code of the color used to render all trend-sets on the chart. This attribute belongs to the |
|
It is used to specify the transparency for all trend-sets on the chart. This attribute takes values between 0 (transparent) and 100 (opaque). This attribute belongs to the |
|
It is used to specify the thickness for all trend-sets on the chart. This attribute belongs to the |
|
It is used to specify whether all trend-sets will be rendered as dashed. Setting this attribute to |
|
It is used to specify the length of each dash, if the trend-sets will be rendered as dashed. This attribute belongs to the |
|
It is used to specify the gap between each dash, if the trend-sets will be rendered as dashed. This attribute belongs to the |
|
It is used to specify the name of a trend-set, e.g. Simple Moving Average. This attribute belongs to the |
|
It is used to specify the hex code of the color that will be used to render a specific trend-set. This attribute belongs to the |
|
It is used to specify the transparency of a specific trend-set. This attribute belongs to the |
|
It is used to specify the thickness of a specific trend-set. This attribute belongs to the |
|
It is used to specify whether the name of a trend-set will be included in the legend. Setting this attribute to |
|
It is used to specify whether a specific trend-set will be rendered as dashed. Setting this attribute to 1 will render the trend-set as dashed, setting it to 0 (default) will not. This attribute belongs to the |
|
It is used to specify the length of each dash, if the trend-set is rendered as dashed. This attribute belongs to the |
|
It is used to specify the gap between each dash, if the trend-set is rendered as dashed. This attribute belongs to the |
Each individual object in the set object under trendset can have two attributes: x and value. x represents the x-axis index where this value should be plotted.
Trend-lines
Trend lines are horizontal and vertical lines spanning the chart canvas that aid in interpretation of data with respect to some pre-determined value. Vertical trend-lines help you to create vertical trend-zones.
A candlestick chart rendered with a horizontal trend-line and a vertical trend-zone looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Daily Stock Price HRYS",
"subCaption": "Last 2 months",
"numberprefix": "$",
"pyaxisname": "Price",
"vyaxisname": "Volume (In Millions)",
"showVolumeChart": "0",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "2 month ago",
"x": "1"
},
{
"label": "1 month ago",
"x": "31"
},
{
"label": "Today",
"x": "60"
}
]
}
],
"dataset": [
{
"data": [
{
"open": "18.74",
"high": "19.16",
"low": "18.67 ",
"close": "18.99",
"x": "1",
"volume": "4991285"
},
{
"open": "18.74",
"high": "19.06",
"low": "18.54",
"close": "18.82",
"x": "2",
"volume": "3615889"
},
{
"open": "19.21",
"high": "19.3",
"low": "18.59 ",
"close": "18.65",
"x": "3",
"volume": "4749586"
},
{
"open": "19.85",
"high": "19.86",
"low": "19.12",
"close": "19.4",
"x": "4",
"volume": "4366740"
},
{
"open": "20.19",
"high": "20.21",
"low": "19.57",
"close": "19.92",
"x": "5",
"volume": "3982709"
},
{
"open": "20.47",
"high": "20.64",
"low": "20.15",
"close": "20.16",
"x": "6",
"volume": "2289403"
},
{
"open": "20.36",
"high": "20.52",
"low": "20.29",
"close": "20.48",
"x": "7",
"volume": "1950919"
},
{
"open": "20.21",
"high": "20.25",
"low": "19.91",
"close": "20.15",
"x": "8",
"volume": "2391070"
},
{
"open": "19.46",
"high": "20.54",
"low": "19.46",
"close": "20.22",
"x": "9",
"volume": "4548422"
},
{
"open": "19.24",
"high": "19.5",
"low": "19.13",
"close": "19.44",
"x": "10",
"volume": "1889811"
},
{
"open": "19.25",
"high": "19.41",
"low": "18.99",
"close": "19.22",
"x": "11",
"volume": "2543355"
},
{
"open": "18.85",
"high": "19.45",
"low": "18.8",
"close": "19.24",
"x": "12",
"volume": "2134393"
},
{
"open": "18.97",
"high": "19.01",
"low": "18.68",
"close": "18.95",
"x": "13",
"volume": "1740852"
},
{
"open": "18.69",
"high": "19",
"low": "18.35",
"close": "18.97",
"x": "14",
"volume": "2701392"
},
{
"open": "19.02",
"high": "19.1",
"low": "18.68",
"close": "18.7",
"x": "15",
"volume": "2198755"
},
{
"open": "19.29",
"high": "19.38",
"low": "18.88",
"close": "19.05",
"x": "16",
"volume": "2464958"
},
{
"open": "18.64",
"high": "19.35",
"low": "18.53",
"close": "19.33",
"x": "17",
"volume": "2962994"
},
{
"open": "18.14",
"high": "18.58",
"low": "18.08",
"close": "18.52",
"x": "18",
"volume": "1964932"
},
{
"open": "18.49",
"high": "18.92",
"low": "18.19",
"close": "18.26",
"x": "19",
"volume": "3013102"
},
{
"open": "18.71",
"high": "18.84",
"low": "18",
"close": "18.51",
"x": "20",
"volume": "4435894"
},
{
"open": "19.17",
"high": "19.35",
"low": "18.61",
"close": "18.66",
"x": "21",
"volume": "3245851"
},
{
"open": "19.12",
"high": "19.41",
"low": "18.92",
"close": "19.2",
"x": "22",
"volume": "2259792"
},
{
"open": "19.43",
"high": "19.58",
"low": "19.16",
"close": "19.33",
"x": "23",
"volume": "3531327"
},
{
"open": "19.72",
"high": "19.81",
"low": "19.04",
"close": "19.27",
"x": "24",
"volume": "5834733"
},
{
"open": "19.7",
"high": "19.94",
"low": "19.49",
"close": "19.77",
"x": "25",
"volume": "2009987"
},
{
"open": "19.84",
"high": "19.98",
"low": "19.39",
"close": "19.88",
"x": "26",
"volume": "2767592"
},
{
"open": "20.71",
"high": "20.73",
"low": "19.16",
"close": "19.63",
"x": "27",
"volume": "673358"
},
{
"open": "21.14",
"high": "21.14",
"low": "20.55",
"close": "20.65",
"x": "28",
"volume": "3164006"
},
{
"open": "21.5",
"high": "21.86",
"low": "21.2",
"close": "21.33",
"x": "29",
"volume": "7986466"
},
{
"open": "20.45",
"high": "21.08",
"low": "20.1",
"close": "20.56",
"x": "30",
"volume": "5813040"
},
{
"open": "20.07",
"high": "20.69",
"low": "20.04",
"close": "20.36",
"x": "31",
"volume": "3440002"
},
{
"open": "19.88",
"high": "20.11",
"low": "19.51",
"close": "20.03",
"x": "32",
"volume": "2779171"
},
{
"open": "19.76",
"high": "20.13",
"low": "19.65",
"close": "19.88",
"x": "33",
"volume": "2918115"
},
{
"open": "19.77",
"high": "19.97",
"low": "19.27",
"close": "19.9",
"x": "34",
"volume": "3850357"
},
{
"open": "19.43",
"high": "19.72",
"low": "18.88",
"close": "19.5",
"x": "35",
"volume": "5047378"
},
{
"open": "19.69",
"high": "19.84",
"low": "19.17",
"close": "19.43",
"x": "36",
"volume": "3479017"
},
{
"open": "19.59",
"high": "20.02",
"low": "19.02",
"close": "19.41",
"x": "37",
"volume": "5749874"
},
{
"open": "20.95",
"high": "21.09",
"low": "19.64",
"close": "19.83",
"x": "38",
"volume": "6319111"
},
{
"open": "20.52",
"high": "21.03",
"low": "20.45",
"close": "21",
"x": "39",
"volume": "4412413"
},
{
"open": "20.36",
"high": "20.96",
"low": "20.2",
"close": "20.44",
"x": "40",
"volume": "5948318"
},
{
"open": "21.45",
"high": "21.48",
"low": "19.63",
"close": "20.3",
"x": "41",
"volume": "11935440"
},
{
"open": "23.49",
"high": "23.57",
"low": "21.12",
"close": "21.63",
"x": "42",
"volume": "10523910"
},
{
"open": "24.04",
"high": "24.21",
"low": "23.04",
"close": "23.28",
"x": "43",
"volume": "3843797"
},
{
"open": "23.6",
"high": "24.065",
"low": "23.51",
"close": "23.94",
"x": "44",
"volume": "3691404"
},
{
"open": "22.87",
"high": "23.49",
"low": "22.86",
"close": "23.48",
"x": "45",
"volume": "3387393"
},
{
"open": "22.35",
"high": "22.89",
"low": "22.35",
"close": "22.74",
"x": "46",
"volume": "3737330"
},
{
"open": "22.11",
"high": "22.5",
"low": "21.9",
"close": "22.24",
"x": "47",
"volume": "4630397"
},
{
"open": "22.58",
"high": "22.80",
"low": "22.25",
"close": "22.42",
"x": "48",
"volume": "3024711"
},
{
"open": "23.54",
"high": "23.76",
"low": "22.6",
"close": "22.68",
"x": "49",
"volume": "3984508"
},
{
"open": "23.66",
"high": "24.09",
"low": "23.09",
"close": "23.46",
"x": "50",
"volume": "3420204"
},
{
"open": "24.36",
"high": "24.42",
"low": "22.90",
"close": "23.6",
"x": "51",
"volume": "5151096"
},
{
"open": "24.34",
"high": "24.6",
"low": "23.73",
"close": "24.15",
"x": "52",
"volume": "5999654"
},
{
"open": "23.38",
"high": "24.8",
"low": "23.36",
"close": "24.1",
"x": "53",
"volume": "5382049"
},
{
"open": "23.76",
"high": "23.84",
"low": "23.23",
"close": "23.47",
"x": "54",
"volume": "3508510"
},
{
"open": "23.64",
"high": "23.94",
"low": "23.48",
"close": "23.76",
"x": "55",
"volume": "2718428"
},
{
"open": "23.99",
"high": "24.18",
"low": "23.59",
"close": "23.66",
"x": "56",
"volume": "2859391"
},
{
"open": "23.32",
"high": "24.26",
"low": "23.32",
"close": "23.79",
"x": "57",
"volume": "4138618"
},
{
"open": "24.08",
"high": "24.4",
"low": "23.26",
"close": "23.39",
"x": "58",
"volume": "4477478"
},
{
"open": "22.84",
"high": "23.96",
"low": "22.83",
"close": "23.88",
"x": "59",
"volume": "4822378"
},
{
"open": "23.38",
"high": "23.78",
"low": "22.94",
"close": "23.01",
"x": "60",
"volume": "4037312"
},
{
"open": "23.97",
"high": "23.99",
"low": "23.14",
"close": "23.32",
"x": "61",
"volume": "4879546"
}
]
}
],
"trendlines": {
"line": [
{
"startValue": "24.8",
"displayValue": "Highest{br}Closing value:{br}$24.8",
"color": "#1aaf5d",
"thickness": "1"
}
]
},
"vtrendlines": {
"line": [
{
"startValue": "30",
"endValue": "61",
"isTrendZone": "1",
"displayValue": "Last Month",
"color": "#0075c2",
"alpha": "10"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'candlestick',
renderAt: 'chart-container',
id: 'myChart',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Daily Stock Price HRYS",
"subCaption": "Last 2 months",
"numberprefix": "$",
"pyaxisname": "Price",
"vyaxisname": "Volume (In Millions)",
"showVolumeChart": "0",
"theme": "fint",
},
"categories": [{
"category": [{
"label": "2 month ago",
"x": "1"
}, {
"label": "1 month ago",
"x": "31"
}, {
"label": "Today",
"x": "60"
}]
}],
"dataset": [{
"data": [{
"open": "18.74",
"high": "19.16",
"low": "18.67 ",
"close": "18.99",
"x": "1",
"volume": "4991285"
}, {
"open": "18.74",
"high": "19.06",
"low": "18.54",
"close": "18.82",
"x": "2",
"volume": "3615889"
}, {
"open": "19.21",
"high": "19.3",
"low": "18.59 ",
"close": "18.65",
"x": "3",
"volume": "4749586"
}, {
"open": "19.85",
"high": "19.86",
"low": "19.12",
"close": "19.4",
"x": "4",
"volume": "4366740"
}, {
"open": "20.19",
"high": "20.21",
"low": "19.57",
"close": "19.92",
"x": "5",
"volume": "3982709"
}, {
"open": "20.47",
"high": "20.64",
"low": "20.15",
"close": "20.16",
"x": "6",
"volume": "2289403"
}, {
"open": "20.36",
"high": "20.52",
"low": "20.29",
"close": "20.48",
"x": "7",
"volume": "1950919"
}, {
"open": "20.21",
"high": "20.25",
"low": "19.91",
"close": "20.15",
"x": "8",
"volume": "2391070"
}, {
"open": "19.46",
"high": "20.54",
"low": "19.46",
"close": "20.22",
"x": "9",
"volume": "4548422"
}, {
"open": "19.24",
"high": "19.5",
"low": "19.13",
"close": "19.44",
"x": "10",
"volume": "1889811"
}, {
"open": "19.25",
"high": "19.41",
"low": "18.99",
"close": "19.22",
"x": "11",
"volume": "2543355"
}, {
"open": "18.85",
"high": "19.45",
"low": "18.8",
"close": "19.24",
"x": "12",
"volume": "2134393"
}, {
"open": "18.97",
"high": "19.01",
"low": "18.68",
"close": "18.95",
"x": "13",
"volume": "1740852"
}, {
"open": "18.69",
"high": "19",
"low": "18.35",
"close": "18.97",
"x": "14",
"volume": "2701392"
}, {
"open": "19.02",
"high": "19.1",
"low": "18.68",
"close": "18.7",
"x": "15",
"volume": "2198755"
}, {
"open": "19.29",
"high": "19.38",
"low": "18.88",
"close": "19.05",
"x": "16",
"volume": "2464958"
}, {
"open": "18.64",
"high": "19.35",
"low": "18.53",
"close": "19.33",
"x": "17",
"volume": "2962994"
}, {
"open": "18.14",
"high": "18.58",
"low": "18.08",
"close": "18.52",
"x": "18",
"volume": "1964932"
}, {
"open": "18.49",
"high": "18.92",
"low": "18.19",
"close": "18.26",
"x": "19",
"volume": "3013102"
}, {
"open": "18.71",
"high": "18.84",
"low": "18",
"close": "18.51",
"x": "20",
"volume": "4435894"
}, {
"open": "19.17",
"high": "19.35",
"low": "18.61",
"close": "18.66",
"x": "21",
"volume": "3245851"
}, {
"open": "19.12",
"high": "19.41",
"low": "18.92",
"close": "19.2",
"x": "22",
"volume": "2259792"
}, {
"open": "19.43",
"high": "19.58",
"low": "19.16",
"close": "19.33",
"x": "23",
"volume": "3531327"
}, {
"open": "19.72",
"high": "19.81",
"low": "19.04",
"close": "19.27",
"x": "24",
"volume": "5834733"
}, {
"open": "19.7",
"high": "19.94",
"low": "19.49",
"close": "19.77",
"x": "25",
"volume": "2009987"
}, {
"open": "19.84",
"high": "19.98",
"low": "19.39",
"close": "19.88",
"x": "26",
"volume": "2767592"
}, {
"open": "20.71",
"high": "20.73",
"low": "19.16",
"close": "19.63",
"x": "27",
"volume": "673358"
}, {
"open": "21.14",
"high": "21.14",
"low": "20.55",
"close": "20.65",
"x": "28",
"volume": "3164006"
}, {
"open": "21.5",
"high": "21.86",
"low": "21.2",
"close": "21.33",
"x": "29",
"volume": "7986466"
}, {
"open": "20.45",
"high": "21.08",
"low": "20.1",
"close": "20.56",
"x": "30",
"volume": "5813040"
}, {
"open": "20.07",
"high": "20.69",
"low": "20.04",
"close": "20.36",
"x": "31",
"volume": "3440002"
}, {
"open": "19.88",
"high": "20.11",
"low": "19.51",
"close": "20.03",
"x": "32",
"volume": "2779171"
}, {
"open": "19.76",
"high": "20.13",
"low": "19.65",
"close": "19.88",
"x": "33",
"volume": "2918115"
}, {
"open": "19.77",
"high": "19.97",
"low": "19.27",
"close": "19.9",
"x": "34",
"volume": "3850357"
}, {
"open": "19.43",
"high": "19.72",
"low": "18.88",
"close": "19.5",
"x": "35",
"volume": "5047378"
}, {
"open": "19.69",
"high": "19.84",
"low": "19.17",
"close": "19.43",
"x": "36",
"volume": "3479017"
}, {
"open": "19.59",
"high": "20.02",
"low": "19.02",
"close": "19.41",
"x": "37",
"volume": "5749874"
}, {
"open": "20.95",
"high": "21.09",
"low": "19.64",
"close": "19.83",
"x": "38",
"volume": "6319111"
}, {
"open": "20.52",
"high": "21.03",
"low": "20.45",
"close": "21",
"x": "39",
"volume": "4412413"
}, {
"open": "20.36",
"high": "20.96",
"low": "20.2",
"close": "20.44",
"x": "40",
"volume": "5948318"
}, {
"open": "21.45",
"high": "21.48",
"low": "19.63",
"close": "20.3",
"x": "41",
"volume": "11935440"
}, {
"open": "23.49",
"high": "23.57",
"low": "21.12",
"close": "21.63",
"x": "42",
"volume": "10523910"
}, {
"open": "24.04",
"high": "24.21",
"low": "23.04",
"close": "23.28",
"x": "43",
"volume": "3843797"
}, {
"open": "23.6",
"high": "24.065",
"low": "23.51",
"close": "23.94",
"x": "44",
"volume": "3691404"
}, {
"open": "22.87",
"high": "23.49",
"low": "22.86",
"close": "23.48",
"x": "45",
"volume": "3387393"
}, {
"open": "22.35",
"high": "22.89",
"low": "22.35",
"close": "22.74",
"x": "46",
"volume": "3737330"
}, {
"open": "22.11",
"high": "22.5",
"low": "21.9",
"close": "22.24",
"x": "47",
"volume": "4630397"
}, {
"open": "22.58",
"high": "22.80",
"low": "22.25",
"close": "22.42",
"x": "48",
"volume": "3024711"
}, {
"open": "23.54",
"high": "23.76",
"low": "22.6",
"close": "22.68",
"x": "49",
"volume": "3984508"
}, {
"open": "23.66",
"high": "24.09",
"low": "23.09",
"close": "23.46",
"x": "50",
"volume": "3420204"
}, {
"open": "24.36",
"high": "24.42",
"low": "22.90",
"close": "23.6",
"x": "51",
"volume": "5151096"
}, {
"open": "24.34",
"high": "24.6",
"low": "23.73",
"close": "24.15",
"x": "52",
"volume": "5999654"
}, {
"open": "23.38",
"high": "24.8",
"low": "23.36",
"close": "24.1",
"x": "53",
"volume": "5382049"
}, {
"open": "23.76",
"high": "23.84",
"low": "23.23",
"close": "23.47",
"x": "54",
"volume": "3508510"
}, {
"open": "23.64",
"high": "23.94",
"low": "23.48",
"close": "23.76",
"x": "55",
"volume": "2718428"
}, {
"open": "23.99",
"high": "24.18",
"low": "23.59",
"close": "23.66",
"x": "56",
"volume": "2859391"
}, {
"open": "23.32",
"high": "24.26",
"low": "23.32",
"close": "23.79",
"x": "57",
"volume": "4138618"
}, {
"open": "24.08",
"high": "24.4",
"low": "23.26",
"close": "23.39",
"x": "58",
"volume": "4477478"
}, {
"open": "22.84",
"high": "23.96",
"low": "22.83",
"close": "23.88",
"x": "59",
"volume": "4822378"
}, {
"open": "23.38",
"high": "23.78",
"low": "22.94",
"close": "23.01",
"x": "60",
"volume": "4037312"
}, {
"open": "23.97",
"high": "23.99",
"low": "23.14",
"close": "23.32",
"x": "61",
"volume": "4879546"
}]
}],
"trendlines": {
"line": [{
"startValue": "24.8",
"displayValue": "Highest{br}Closing value:{br}$24.8",
"color": "#1aaf5d",
"thickness": "1"
}]
},
"vtrendlines": {
"line": [{
"startValue": "30",
"endValue": "61",
"isTrendZone": "1",
"displayValue": "Last Month",
"color": "#0075c2",
"alpha": "10"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the cosmetic and functional properties used to configure the horizontal and vertical trend-lines.
| Attribute Name | Description |
|---|---|
|
It is used to specify the starting value for the trend-line/trend-zone, e.g. 10. This attribute can be used with the |
|
It is used to specify the ending value for the trend-line/trend-zone, e.g. 20. This attribute can be used with the |
|
It is used to specify a string caption to be displayed with the trend-line/trend-zone. This attribute can be used with the If you don’t specify a value for this attribute, by default, it will take the value of the |
|
It is used to specify the hex code of the color that will be used to render the trend-line/trend-zone and its associated text. This attribute can be used with the |
|
It is used to specify whether the chart will be rendered with a trend-line or a trend-zone (vertical). Setting this attribute to |
|
It is used to specify whether the trend-line will be rendered on top of the data plots or behind them. Setting this attribute to |
|
It is used to specify the thickness of the trend-line. This attribute is applicable only for horizontal/vertical trend-lines and not trend-zones. |
|
It is used to specify the transparency of the trend-lines/trend-zones. This attribute takes values between 0 (transparent) and 100 (opaque). |
|
It is used to specify whether a trend-line will be rendered as a dashed line. Setting this attribute to This attribute is applicable only for horizontal/vertical trend-lines and not trend-zones. |
|
It is used to specify the length of each dash, if the trend-line is being rendered as a dashed line. |
|
It is used to specify the gap between each dash, if the trend-line is being rendered as a dashed line. |