CandleStick Charts - Showing trend sets

Created using FusionCharts Suite XT - www.fusioncharts.com

by millik

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.powercharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!--  How to configure trend sets. This sample showcases the high value trend.

Element
    # trendset

    
-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

var jsonData = [{
          "open": 645,
          "high": 810,
          "low": 336,
          "close": 506,
          "x": 1,
          "volume": 48713481129
        }, {
          "open": 355,
          "high": 837,
          "low": 335,
          "close": 453,
          "x": 2,
          "volume": 25519316656
        }, {
          "open": 486,
          "high": 900,
          "low": 355,
          "close": 481,
          "x": 3,
          "volume": 7665529240
        }];
        var jsonCaterogy = [{
          "label": "1 day",
          "x": "1"
        }, {
          "label": "2 day",
          "x": "2"
        }, {
          "label": "3 day",
          "x": "3"
        }]

        FusionCharts.ready(function() {
          var candlestickChart = new FusionCharts({
            type: 'candlestick',
            renderAt: 'chart-container',
            id: 'myChart',
            width: '600',
            height: '400',
            dataFormat: 'json',
            dataSource: {
              "chart": {

                //Attributes for Exporting Charts
                "exportEnabled": true,
                //Chart Titles and Axis Names
                "caption": "Daily stock price",
                "pYAxisName": "Price",
                "vyaxisname": "Volume (In Millions)",
                //Chart Caption Cosmetics
                "captionFontSize": "14",
                //Primary y-Axis Name Cosmetics
                "pYAxisNameFontBold": false,
                //Volume y-Axis Name Cosmetics
                "vYAxisNameFontBold": false,
                //Chart Cosmetics
                "showBorder": true,
                "bgColor": "#ffffff",
                "showCanvasBorder": true,
                "canvasBgColor": "#ffffff",
                //Data Plot Cosmetics
                "bullFillColor": "#59b300",
                "bullBorderColor": "#336600",
                //Number Formatting
                "formatNumber": true,
                "formatNumberScale ":...