FusionCharts API-Event: selectionEnd

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

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>
<!-- This sample shows the event parameters, and their values, when selectionEnd event is triggered-->
<div id="indicatorDiv">Event name: <strong> selectionEnd </strong> 
    
   <p>Triggered when you complete drawing a selection box on a select-scatter chart.</p>
   <p>All events, when triggered, will provide two parameters for the handler - <strong> eventObj </strong> (object containing information generic to all events) and <strong> dataObj </strong> (object containing information specific to an event).</p>
   <p>To <strong> draw a selection box</strong>, drag the mouse pointer over a subset of data points on the chart. The selectionEnd event is triggered when you finish drawing.</p>
   <p>Scroll down to the table rendered below the chart to view information contained in the dataObj object. To view information contained in the eventObj object, open the console.</p>
    
</div>
<div id="chart-container">FusionCharts will render here</div>
<div>
    <div>
        <div id="header">
            <div class="parameter-name">Parameter Name</div>
            <div class="parameter-value">Parameter Value</div>
        </div>
        <div id="attrs-table"></div>
    </div>
</div>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}
strong {
  font-weight: bold;
}
#header {
    display: none;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 14px;
}
p {
    margin-top: 20px;
    margin-bottom: 20px;
}
#attrs-table {
    text-align: center;
    width: 500px;
}
.parameter-name, .parameter-value {
    width: 250px;
    font-weight: bold;
    text-align: center;
    float: left;
}
.title, .value {
    float:left;
    width: 230px;
    height: 20px;
    background: #fff;
    padding: 5px 10px;
}
.title {
    clear: left;
}
.title:nth-child(4n+1), .value:nth-child(4n+2) {
    background: rgb(0, 117, 194);
    color: #fff;
}
.value {
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

JavaScript

FusionCharts.ready(function () {
    var getDataFromChart,
    productPriceChart = new FusionCharts({
        type: 'selectscatter',
        id: "chartId",
        renderAt: 'chart-container',
        width: '500',
        height: '350',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                //Theme
                "theme": "fint",
                    "caption": "Products Sold vs. Price points",
                    "subcaption": "Harry's SuperMart - Last Week",
                    "yaxisname": "Quantity Sold",
                    "xaxisname": "Price(In US $)",
                    "xaxismaxvalue": "1000",
                    "xaxisminvalue": "100",
                    "yaxismaxvalue": "200",
                    "xnumberprefix": "$",
                    "ynumbersuffix": " units",
                    "showcanvasborder": "1",
                    "canvasborderthickness": "0.4",
                    "canvasborderalpha": "50",
                    "showXAxisLine": "0",
                    "showformbtn": "1",
                    "formAction": "#",
                    "submitdataasxml": "1"
            },
                "categories": [{
                "verticallinecolor": "666666",
                    "verticallinethickness": "1",
                    "alpha": "40",
                    "category": [{
                    "label": "$100",
                        "x": "100",
                        "showverticalline": "0"
                }, {
                    "label": "$200",
                        "x": "200",
                        "showverticalline": "1"
                }, {
                    "label": "$300",
                        "x": "300",
                        "showverticalline": "1"
                }, {
                    "label": "$400",
                        "x": "400",
                        "showverticalline": "1"
                }, {
                    "label": "$500",
                        "x": "500",
          ...