EnVisageOnline/Main/Source/EnVisage/Views/Shared/amCharts/_cardBubble.cshtml

@* ROW 2 COL 1 - CARD: BUBBLE --------------------------------- *@
<div class="pv-menu k-content">
    <div class="btn-group pull-right">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-ellipsis-h"></i>
        </button>
        <ul class="dropdown-menu">
            <li class="widget-full-screen"><a href="#" class="full-screen" onclick="if (typeof widgetToFullScreen !== 'undefined') widgetToFullScreen(); pv.chart.menu.select('Bubble1');">Full Screen</a></li>
            <li role="separator" class="divider  widget-full-screen"></li>
            <li>
                <label>
                    <span class="switcherLbl">Mode</span>
                </label>
                <input type="checkbox" data-key="bubble-LaborMode" name="bubble-LaborMode" id="bubble-LaborMode" checked="checked" class="switcher px" />
            </li>
            <li>
                <label>
                    <span class="switcherLbl">Expenditures</span>
                </label>
                <input type="checkbox" data-key="bubble-Mode" checked name="bubble-Mode" id="bubble-Mode" class="switcher px" />
            </li>
            <li>
                <label>
                    <span class="switcherLbl">Performance</span>
                </label>
                <input type="checkbox" data-key="bubble-ProjectPerformance" name="bubble-ProjectPerformance" id="bubble-ProjectPerformance" class="switcher px" />
            </li>
        </ul>
    </div>
</div>
<div class="pv-chart" id="chartBubble1" style="height: 100%;"></div>

<script>
    var _bubbleChartData = null;

    init.push(function () {
        initBubbleMenu();
        @if (Request.Browser.Browser == "IE" && Request.Browser.MajorVersion < 11)
	    {
	    <text>AmCharts.ready(function (a) {
            setPerformanceMode();            
            loadBubbleData();
        });</text>
	    }
	    else
	    {
	    <text>
        setPerformanceMode();        
        loadBubbleData();        
        </text>
	    }
    });

    function loadBubbleData(filterData) {
        $("#chartBubble1").html("<div class='loadRotator'>\
        <span>\
            <img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />&nbsp;&nbsp;loading...\
        </span>\
        </div>");

        var url = "@Url.Action("GetBubbleChartData", "ForecastDashboard")";

        filterData = filterData || getFilterDataObject();
        filterData["IsLaborMode"] = $("#bubble-LaborMode").prop("checked");

        $.post(url, filterData, function (data, textStatus, jqXHR) {
            var chart = findChart("chartBubble1");
            chart.valueAxes[0].minimumDate = new Date(data.minimumDate);
            chart.valueAxes[0].maximumDate = new Date(data.maximumDate);
            chart.addListener("clickGraphItem", handleClick);
            chart.validateNow();

            _bubbleChartData = data.chartData;
            setBubbleChartMode();
        });
    }

    function clearClass(event) { alert("clearClass"); }
    function changeClass(event) { alert("changeClass"); }

    function initBubbleMenu() {
        $('#bubble-LaborMode').switcher({
            on_state_content: 'Labor',
            off_state_content: 'Non-labor'
        });

        $('#bubble-Mode').switcher({
            on_state_content: 'Quantity',
            off_state_content: 'Cost'
        });

        $('#bubble-ProjectPerformance').switcher({
            on_state_content: 'On',
            off_state_content: 'Off'
        });

        $('#bubble-LaborMode, #bubble-Mode, #bubble-ProjectPerformance').change(function () {
            saveForecastDashboardPreferences();
        });

        $('#bubble-Mode').change(function () {
            setBubbleChartMode();
        });

        $('#bubble-ProjectPerformance').change(function () {
            setPerformanceMode();
        });

        $('#bubble-LaborMode').change(function () {
            loadBubbleData();
        });
    }

    function dynamicSort(property) {
        var sortOrder = 1;
        if (property[0] === "-") {
            sortOrder = -1;
            property = property.substr(1);
        }
        return function (a, b) {
            var result = (a[property] > b[property]) ? -1 : (a[property] < b[property]) ? 1 : 0;
            return result * sortOrder;
        }
    }

    function setBubbleChartMode() {
        var chart = findChart("chartBubble1");
        var valueField = $('#bubble-Mode').prop("checked") ? "quantity" : "cost";
        chart.graphs[0].valueField = valueField;
        chart.validateData();

        if (_bubbleChartData != null) {
            _bubbleChartData.sort(dynamicSort(valueField));
            updateChart("chartBubble1", _bubbleChartData);
        }
    }

    function setPerformanceMode() {
        var chart = findChart("chartBubble1");
        var performanceMode = $('#bubble-ProjectPerformance').prop("checked");
        if (performanceMode) {
            chart.graphs[0].colorField = "performanceColor";
        } else {
            chart.graphs[0].colorField = "projectColor";
        }
        chart.validateData();
    }

    function handleClick(event) {
        window.open("@Url.Action("Edit", "Project")/" + event.item.dataContext.projectId);
    }
</script>