Jump to content
JChartFX Community

StatementSolutions

Members
 View Profile  See their activity

  • Posts

    60

  • Joined

  • Last visited

  • Days Won

    1

 Content Type 

Posts posted by StatementSolutions

  1. jChartFx using JQuery with Visual Studio

    in jQuery/jQuery UI

    Posted

    I created a gragable widget and placed the jChartFx pie chart on of of the widgets.  When they page renders the chart with the jChartFx does not render until after I drag the widget with the jChartFx pie chart to another location with in the page.  What is wrong?

     

    Code:

    @model ePortfolio.Models.WidgetViewModel
    @{
        Layout = "~/Views/Shared/_WidgetEmptyLayout.cshtml";
    }
    <script type="text/javascript" src="~/Scripts/jquery.min.js"></script>

    <script type="text/javascript" src="~/Scripts/jChartFx/jchartfx.system.js"></script>
    <script type="text/javascript" src="~/Scripts/jChartFx/jchartfx.coreVector.js"></script>
    <script type="text/javascript" src="~/Scripts/jChartFx/jchartfx.coreBasic.js"></script>
    <script type="text/javascript" src="~/Scripts/jChartFx/jchartfx.advanced.js"></script>

    @*<script type="text/javascript" src="~/Scripts/jChart/jchartfx.userinterface.js"></script>
        <link rel="stylesheet" type="text/css" href="~/Content/jChart/jchartfx.userinterface.css" />*@
    <link rel="stylesheet" type="text/css" href="~/Stylesheets/jChartfx/Attributes/jchartfx.attributes.css" />
    <link rel="stylesheet" type="text/css" href="~/Stylesheets/jChartfx/Palettes/jchartfx.palette.css" />

    <li class="widget">
        <div style="overflow:auto;width:485px;height:200px;">
            
            <div data-role="navbar" class="widget-head" id="navcontainer">
                @Html.DisplayFor(model => model, "WidgetHeader");
            </div>
            <script type="text/javascript" language="javascript">
                    LoadChart();
            </script>

            <div class="widget-content" id="ChartDiv" style="width:485px;height:200px;display:inline-block"></div>
           
        </div>
    </li>
    <script type="text/javascript" language="javascript">

        @using System.Web.Script.Serialization;

        var chart1;

        //$(document).ready(function ($) {
        function LoadChart() {

            chart1 = new cfx.Chart();
            chart1.setGallery(cfx.Gallery.Pie);
            chart1.getAllSeries().getPointLabels().setVisible(true);
            var pieAttr = chart1.getAllSeries().getGalleryAttributes();

            pieAttr.setLabelsInside(false);
            chart1.getAllSeries().getPointLabels().setFormat("%l %p%%");
            chart1.getLegendBox().setVisible(false);

            //var str = @Html.Raw(new JavaScriptSerializer().Serialize(ViewData["Asset Allocations Chart"]));
            var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"]));

            @*$.each(@Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"])), function(i, item){

                    alert(item.AssetTypeCd + "|" + item.AssetType + "|" + item.EndMarketValue);
                    //chart1.setDataSource(item);
                });*@

            chart1.getAxisY().getDataFormat().setDecimals(2);
            chart1.getView3D().setEnabled(true);
            chart1.getAllSeries().getPointLabels().setVisible(true);
            chart1.setDataSource(str);

            //var fields = chart1.getDataSourceSettings().getFields();
            //var field1 = new cfx.FieldMap();
            //field1.setName("AssetType");
            //field1.setUsage(cfx.FieldUsage.RowHeading);
            //fields.add(field1);
            //var field2 = new cfx.FieldMap();
            //field2.setName("EndMarketValue");
            //field2.setUsage(cfx.FieldUsage.ColumnHeading);
            //fields.add(field2);

            //var crosstab = new cfx.data.CrosstabDataProvider();
            //crosstab.setDataSource(str);
            //chart1.setDataSource(str);

            //var data = chartStats.getData();

            var data = chart1.getData();
            data.setSeries(1);
            //data.setPoints(10);

            //var labels = chart1.getAxisX().getLabels();
            //labels.clear();
            //labels.setItem(0, "Cash & Cash Equivalents");
            //labels.setItem(1, "Equities");
            //labels.setItem(2, "Taxable Fixed Income");
            //labels.setItem(3, "Non Taxable Fixed Income");
            //labels.setItem(4, "Other Securities");

            //var titles = chart1.getTitles();
            //var title = new cfx.TitleDockable();
            //title.setText("Asset Allocation");
            //titles.add(title);

            //chart1.getAllSeries().getPointLabels().setFormat("%v");
            chart1.getAllSeries().getPointLabels().setVisible(true);
            chart1.getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);

            chart1.getLegendBox().setVisible(false);
            chart1.getLegendBox().setWidth(50);
            chart1.getLegendBox().setDock(cfx.DockArea.Right);
            chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Near);

            var divHolder = document.getElementById('ChartDiv');
            chart1.create(divHolder);
        }
        //});
    </script>

    post-47373-0-42720400-1432302629_thumb.jpg

    post-47373-0-19262700-1432302636_thumb.jpg

  2. jChartFx using JQuery with Visual Studio

    in jQuery/jQuery UI

    Posted

    I placed a jchartfx on a draggable widget.

    - The pie graph should be within the widget. 

    - There should be only one pie graph.

    - Whe I drag the widget the graph is in the widget as i am dragging but when I drop the widget it goes back to the corner.

     

    Image attached

     

     

    code:

    @model ePortfolio.Models.WidgetViewModel
    @{
        Layout = "~/Views/Shared/_WidgetEmptyLayout.cshtml";
    }
    <script type="text/javascript" src="~/Scripts/jquery.min.js"></script>

    <script type="text/javascript" src="~/Scripts/jChartFx/jchartfx.system.js"></script>
    <script type="text/javascript" src="~/Scripts/jChartFx/jchartfx.coreVector.js"></script>
    <script type="text/javascript" src="~/Scripts/jChartFx/jchartfx.coreBasic.js"></script>
    <script type="text/javascript" src="~/Scripts/jChartFx/jchartfx.advanced.js"></script>

    @*<script type="text/javascript" src="~/Scripts/jChart/jchartfx.userinterface.js"></script>
        <link rel="stylesheet" type="text/css" href="~/Content/jChart/jchartfx.userinterface.css" />*@
    <link rel="stylesheet" type="text/css" href="~/Stylesheets/jChartfx/Attributes/jchartfx.attributes.css" />
    <link rel="stylesheet" type="text/css" href="~/Stylesheets/jChartfx/Palettes/jchartfx.palette.css" />
    <script type="text/javascript" language="javascript">

        @using System.Web.Script.Serialization;

        var chart1;
        function LoadChart() {
            chart1 = new cfx.Chart();
            chart1.setGallery(cfx.Gallery.Pie);
            chart1.getAllSeries().getPointLabels().setVisible(true);
            var pieAttr = chart1.getAllSeries().getGalleryAttributes();

            pieAttr.setLabelsInside(false);
            chart1.getAllSeries().getPointLabels().setFormat("%l %p%%");
            chart1.getLegendBox().setVisible(false);

            //var str = @Html.Raw(new JavaScriptSerializer().Serialize(ViewData["Asset Allocations Chart"]));
            var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"]));

            @*$.each(@Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"])), function(i, item){

                    alert(item.AssetTypeCd + "|" + item.AssetType + "|" + item.EndMarketValue);
                    //chart1.setDataSource(item);
                });*@

            chart1.getAxisY().getDataFormat().setDecimals(2);
            chart1.getView3D().setEnabled(true);
            chart1.getAllSeries().getPointLabels().setVisible(true);
            chart1.setDataSource(str);

            //var fields = chart1.getDataSourceSettings().getFields();
            //var field1 = new cfx.FieldMap();
            //field1.setName("AssetType");
            //field1.setUsage(cfx.FieldUsage.RowHeading);
            //fields.add(field1);
            //var field2 = new cfx.FieldMap();
            //field2.setName("EndMarketValue");
            //field2.setUsage(cfx.FieldUsage.ColumnHeading);
            //fields.add(field2);

            //var crosstab = new cfx.data.CrosstabDataProvider();
            //crosstab.setDataSource(str);
            //chart1.setDataSource(str);

            //var data = chartStats.getData();

            var data = chart1.getData();
            data.setSeries(1);
            //data.setPoints(10);

            //var labels = chart1.getAxisX().getLabels();
            //labels.clear();
            //labels.setItem(0, "Cash & Cash Equivalents");
            //labels.setItem(1, "Equities");
            //labels.setItem(2, "Taxable Fixed Income");
            //labels.setItem(3, "Non Taxable Fixed Income");
            //labels.setItem(4, "Other Securities");

            //var titles = chart1.getTitles();
            //var title = new cfx.TitleDockable();
            //title.setText("Asset Allocation");
            //titles.add(title);

            //chart1.getAllSeries().getPointLabels().setFormat("%v");
            chart1.getAllSeries().getPointLabels().setVisible(true);
            chart1.getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);

            chart1.getLegendBox().setVisible(false);
            chart1.getLegendBox().setWidth(100);
            chart1.getLegendBox().setDock(cfx.DockArea.Right);
            chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Near);

            var divHolder = document.getElementById('ChartDiv');
            chart1.create(divHolder);
        }
    </script>

    <li class="widget">
        <div style="overflow:auto;height:200px;">
            <div data-role="navbar" class="widget-head" id="navcontainer">
                @Html.DisplayFor(model => model, "WidgetHeader");
            </div>

            <div class="widget-content" id="ChartDiv" style="width:100%;height:100%;display:inline-block" />                       
            
            <script type="text/javascript" language="javascript">
                LoadChart();
            </script>

        </div>
    </li>
     

  4. Legend box and percent value rounds up

    in General Questions

    Posted

    I thnk I may know what the problem is.  the code below I convert viewdata value to json and than set it as data source (below in bold). 

    ExampleJSON:

    AssetType: ABC AssetTypeCd: A MarketValue: 100

     

    it seems the chart is using 'AssetTypeCd' rather than 'AssetType'.  How do I force the chart to use 'AsseType' and not 'AssetTypCd'?

     

    Code:

    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <style>
            * {
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box; /* Border boxing is used, so the padding, margin and borders are within the width and height of de element. */
                color: rgb(112, 112, 112);
                font-family: Arial;
                font-size: 11px;
                margin: 0; /* Margin zero is used to prevent unnecessary white space. */
                padding: 0; /* Padding zero is used to prevent unnecessary white space. */
            }
        </style>

        <script type="text/javascript" src="~/Scripts/jquery.min.js"></script>

        <script type="text/javascript" src="~/Scripts/jChartFx/jchartfx.system.js"></script>
        <script type="text/javascript" src="~/Scripts/jChartFx/jchartfx.coreVector.js"></script>
        <script type="text/javascript" src="~/Scripts/jChartFx/jchartfx.coreBasic.js"></script>
        <script type="text/javascript" src="~/Scripts/jChartFx/jchartfx.advanced.js"></script>

        @*<script type="text/javascript" src="~/Scripts/jChart/jchartfx.userinterface.js"></script>
            <link rel="stylesheet" type="text/css" href="~/Content/jChart/jchartfx.userinterface.css" />*@
        <link rel="stylesheet" type="text/css" href="~/Stylesheets/jChartfx/Attributes/jchartfx.attributes.css" />
        <link rel="stylesheet" type="text/css" href="~/Stylesheets/jChartfx/Palettes/jchartfx.palette.css" />

        <script type="text/javascript" language="javascript">

        @using System.Web.Script.Serialization;

            var chart1;
            function LoadChart() {
                chart1 = new cfx.Chart();
                chart1.setGallery(cfx.Gallery.Pie);
                chart1.getAllSeries().getPointLabels().setVisible(true);
                var pieAttr = chart1.getAllSeries().getGalleryAttributes();

                pieAttr.setLabelsInside(false);
                chart1.getAllSeries().getPointLabels().setFormat("%l %p%%");
                chart1.getLegendBox().setVisible(false);

                //var str = @Html.Raw(new JavaScriptSerializer().Serialize(ViewData["Asset Allocations Chart"]));
                var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"]));

                @*$.each(@Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"])), function(i, item){
                    alert("Mine is " + i + "|" + item.AssetType + "|" + item.EndMarketValue);
                    //chart1.setDataSource(item);
                });*@

                chart1.getAxisY().getDataFormat().setDecimals(2);
                chart1.getView3D().setEnabled(true);
                chart1.getAllSeries().getPointLabels().setVisible(true);
                chart1.setDataSource(str);

                //var fields = chart1.getDataSourceSettings().getFields();
                //var field1 = new cfx.FieldMap();
                //field1.setName("AssetType");
                //field1.setUsage(cfx.FieldUsage.RowHeading);
                //fields.add(field1);
                //var field2 = new cfx.FieldMap();
                //field2.setName("EndMarketValue");
                //field2.setUsage(cfx.FieldUsage.ColumnHeading);
                //fields.add(field2);

                //var crosstab = new cfx.data.CrosstabDataProvider();
                //crosstab.setDataSource(str);
                //chart1.setDataSource(str);

                //var data = chartStats.getData();

                var data = chart1.getData();
                data.setSeries(1);
                //data.setPoints(10);

                //var labels = chart1.getAxisX().getLabels();
                //labels.clear();
                //labels.setItem(0, "Cash & Cash Equivalents");
                //labels.setItem(1, "Equities");
                //labels.setItem(2, "Taxable Fixed Income");
                //labels.setItem(3, "Non Taxable Fixed Income");
                //labels.setItem(4, "Other Securities");

                //var titles = chart1.getTitles();
                //var title = new cfx.TitleDockable();
                //title.setText("Asset Allocation");
                //titles.add(title);

                //chart1.getAllSeries().getPointLabels().setFormat("%v");
                chart1.getAllSeries().getPointLabels().setVisible(true);
                chart1.getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);

                chart1.getLegendBox().setVisible(true);
                chart1.getLegendBox().setWidth(100);
                chart1.getLegendBox().setDock(cfx.DockArea.Right);
                chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Near);

                var divHolder = document.getElementById('ChartDiv');
                chart1.create(divHolder);
            }
        </script>
    </head>

    <body onload="LoadChart()">

        @RenderBody()

    </body>
    </html>

  5. jChartFx using JQuery with Visual Studio

    in jQuery/jQuery UI

    Posted

    I am trying to test jChartFx using an example I found on line.  I get an chart is not a function error  (attached image)  Below is the code I have

    Code:

    @model ePortfolio.Models.WidgetViewModel

    @{    
        Layout = "~/Views/Shared/_WidgetEmptyLayout.cshtml";
    }
    <script type="text/javascript" src="~/Scripts/jChartFx/jchartfx.system.js"></script>
    <script src="~/Scripts/jChartFx/jchartfx.coreVector.js"></script>
    <script src="~/Scripts/jChartFx/jchartfx.coreVector3d.js"></script>
    <script src="~/Scripts/jChartFx/jchartfx.advanced.js"></script>
    <script src="~/Scripts/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="http://www.jchartfx.com/libs/jQuery/jquery-ui-1.8.18.custom.min.js"></script>

    <link href="~/Content/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
    <!-- Uncomment this section to add extended User Interaction capabilities, including the End-User Menu.
            The UI features require a jChartFX Plus license for deployment.

       <script type="text/javascript" src="jChartFX/jchartfx.userinterface.js"></script>
       <link rel="stylesheet" type="text/css" href="jchartfx.userinterface.css" />
     -->

    <link href="~/stylesheets/jChartFx/Attributes/jchartfx.attributes.css" rel="stylesheet" />
    <link href="~/stylesheets/jChartFx/Palettes/jchartfx.palette.css" rel="stylesheet" />
    <script language="javascript" type="text/javascript">

        var chart1;
        $(document).ready(function ($) {

            var items = [{
                "Open": 24.2,
                "Date": "2003-03-01T23:45:10.280Z"
            }, {
                "Open": 21.3,
                "Date": "2003-03-02T23:45:10.280Z"
            }, {
                "Open": 22.4,
                "Date": "2003-03-03T23:45:10.280Z"
            }, {
                "Open": 24.3,
                "Date": "2003-03-04T23:45:10.280Z"
            }, {
                "Open": 22.6,
                "Date": "2003-03-05T23:45:10.280Z"
            }];

            $("#ChartDiv1").chart({
                gallery: cfx.Gallery.Bar,
                dataValues: items,
                dataSourceSettings: {
                    fields: [{
                        name: "Open",
                        usage: cfx.FieldUsage.Value
                    }, {
                        name: "Date",
                        usage: cfx.FieldUsage.XValue
                    }]
                },
                titles: [{
                    text: "Mapping Fields to chart elements"
                }],
                axisY: {
                    min: 0,
                    max: 30
                }

            });
        });

    </script>

    <li class="widget">
        <div style="overflow:auto;">
            <div data-role="navbar" class="widget-head" id="navcontainer">
                @Html.DisplayFor(model => model, "WidgetHeader");
            </div>

            <div id="ChartDiv1" style="width:600px;height:400px;display:inline-block"></div>

        </div>
    </li>

    post-47373-0-44177200-1432231199_thumb.jpg

  6. jChartFx using JQuery with Visual Studio

    in jQuery/jQuery UI

    Posted

    I am trying to test jChartFx using an example I found on line.  I get an chart is not a function error  (attached image)  Below is the code I have

    Code:

    @model ePortfolio.Models.WidgetViewModel

    @{    
        Layout = "~/Views/Shared/_WidgetEmptyLayout.cshtml";
    }
    <script type="text/javascript" src="~/Scripts/jChartFx/jchartfx.system.js"></script>
    <script src="~/Scripts/jChartFx/jchartfx.coreVector.js"></script>
    <script src="~/Scripts/jChartFx/jchartfx.coreVector3d.js"></script>
    <script src="~/Scripts/jChartFx/jchartfx.advanced.js"></script>
    <script src="~/Scripts/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="http://www.jchartfx.com/libs/jQuery/jquery-ui-1.8.18.custom.min.js"></script>post-47373-0-44177200-1432231199_thumb.jpg

    <link href="~/Content/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
    <!-- Uncomment this section to add extended User Interaction capabilities, including the End-User Menu.
            The UI features require a jChartFX Plus license for deployment.

       <script type="text/javascript" src="jChartFX/jchartfx.userinterface.js"></script>
       <link rel="stylesheet" type="text/css" href="jchartfx.userinterface.css" />
     -->

    <link href="~/stylesheets/jChartFx/Attributes/jchartfx.attributes.css" rel="stylesheet" />
    <link href="~/stylesheets/jChartFx/Palettes/jchartfx.palette.css" rel="stylesheet" />
    <script language="javascript" type="text/javascript">

        var chart1;
        $(document).ready(function ($) {

            var items = [{
                "Open": 24.2,
                "Date": "2003-03-01T23:45:10.280Z"
            }, {
                "Open": 21.3,
                "Date": "2003-03-02T23:45:10.280Z"
            }, {
                "Open": 22.4,
                "Date": "2003-03-03T23:45:10.280Z"
            }, {
                "Open": 24.3,
                "Date": "2003-03-04T23:45:10.280Z"
            }, {
                "Open": 22.6,
                "Date": "2003-03-05T23:45:10.280Z"
            }];

            $("#ChartDiv1").chart({
                gallery: cfx.Gallery.Bar,
                dataValues: items,
                dataSourceSettings: {
                    fields: [{
                        name: "Open",
                        usage: cfx.FieldUsage.Value
                    }, {
                        name: "Date",
                        usage: cfx.FieldUsage.XValue
                    }]
                },
                titles: [{
                    text: "Mapping Fields to chart elements"
                }],
                axisY: {
                    min: 0,
                    max: 30
                }

            });
        });

    </script>

    <li class="widget">
        <div style="overflow:auto;">
            <div data-role="navbar" class="widget-head" id="navcontainer">
                @Html.DisplayFor(model => model, "WidgetHeader");
            </div>

            <div id="ChartDiv1" style="width:600px;height:400px;display:inline-block"></div>

        </div>
    </li>

  7. Legend box and percent value rounds up

    in General Questions

    Posted

    how can i place the legend full text value not just the character value of the legend with an arrow pointing to a section of the pie chart? (Look at attached image for visual)

     

    Code

    <!DOCTYPE html>

    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">        
        <style>
            * {
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box; /* Border boxing is used, so the padding, margin and borders are within the width and height of de element. */
                color: rgb(112, 112, 112);
                font-family: Arial;
                font-size: 11px;          
                margin: 0; /* Margin zero is used to prevent unnecessary white space. */
                padding: 0; /* Padding zero is used to prevent unnecessary white space. */
            }
        </style>

        <script type="text/javascript" src="~/Scripts/jquery.min.js"></script>

        <script type="text/javascript" src="~/Scripts/jChart/js/jchartfx.system.js"></script>
        <script type="text/javascript" src="~/Scripts/jChart/js/jchartfx.coreVector.js"></script>
        <script type="text/javascript" src="~/Scripts/jChart/js/jchartfx.coreBasic.js"></script>
        <script type="text/javascript" src="~/Scripts/jChart/js/jchartfx.advanced.js"></script>   

        @*<script type="text/javascript" src="~/Scripts/jChart/jchartfx.userinterface.js"></script>
            <link rel="stylesheet" type="text/css" href="~/Content/jChart/jchartfx.userinterface.css" />*@
        <link rel="stylesheet" type="text/css" href="~/Content/jChart/Attributes/jchartfx.attributes.css" />
        <link rel="stylesheet" type="text/css" href="~/Content/jChart/Palettes/jchartfx.palette.css" />    

        <script type="text/javascript" language="javascript">

        @using System.Web.Script.Serialization;

        var chart1;
        function loadChart() {

            chart1 = new cfx.Chart();
            chart1.setGallery(cfx.Gallery.Pie);
            chart1.getAllSeries().getPointLabels().setVisible(true);

            //var str = @Html.Raw(new JavaScriptSerializer().Serialize(ViewData["Asset Allocations Chart"]));
            var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"]));

            @*$.each(@Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"])), function(i, item){
                alert("Mine is " + i + "|" + item.AssetType + "|" + item.EndMarketValue);
                //chart1.setDataSource(item);
            });*@

            chart1.getView3D().setEnabled(true);
            chart1.getAllSeries().getPointLabels().setVisible(true);
            chart1.setDataSource(str);

            //var fields = chart1.getDataSourceSettings().getFields();
            //var field1 = new cfx.FieldMap();
            //field1.setName("AssetType");
            //field1.setUsage(cfx.FieldUsage.RowHeading);
            //fields.add(field1);
            //var field2 = new cfx.FieldMap();
            //field2.setName("EndMarketValue");
            //field2.setUsage(cfx.FieldUsage.ColumnHeading);
            //fields.add(field2);

            //var crosstab = new cfx.data.CrosstabDataProvider();
            //crosstab.setDataSource(str);
            //chart1.setDataSource(str);

            //var data = chartStats.getData();

            var data = chart1.getData();
            data.setSeries(1);
            //data.setPoints(10);

            //var labels = chart1.getAxisX().getLabels();
            //labels.clear();
            //labels.setItem(0, "Cash & Cash Equivalents");
            //labels.setItem(1, "Equities");
            //labels.setItem(2, "Taxable Fixed Income");
            //labels.setItem(3, "Non Taxable Fixed Income");
            //labels.setItem(4, "Other Securities");

            //var titles = chart1.getTitles();
            //var title = new cfx.TitleDockable();
            //title.setText("Asset Allocation");
            //titles.add(title);

            //chart1.getAllSeries().getPointLabels().setFormat("%v");
            chart1.getAllSeries().getPointLabels().setVisible(true);
            chart1.getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);

            chart1.getLegendBox().setVisible(true);
            chart1.getLegendBox().setWidth(100);
            chart1.getLegendBox().setDock(cfx.DockArea.Right);
            chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Near);

            var divHolder = document.getElementById('ChartDiv');
            chart1.create(divHolder);
        }
    </script>
    </head>

    <body>

    @RenderBody()
        
    </body>
    </html>
     

    example:

     

    post-47373-0-15007300-1431364639_thumb.jpg

  8. Legend box and percent value rounds up

    in General Questions

    Posted · Edited by StatementSolutions

    We are using visual studio mvc (c#).

     

    - The value for the legend box is truncated to one character.  The legend box should display the acual value not just one charaxcter.  (exhibit A from attached image)

    - The value in the pie chart is in percentage but it rounds up to the next vallue.  Ex: 11.59 % should display 11.59% not 12%  (exhibit B from attached image)

    - How can we place the legend full value notjust one character outside the pie chart with an arrow pointng to the section of the pie?

     

    Code:

     

    <!DOCTYPE html>

    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">        
        <style>
            * {
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box; /* Border boxing is used, so the padding, margin and borders are within the width and height of de element. */
                color: rgb(112, 112, 112);
                font-family: Arial;
                font-size: 11px;          
                margin: 0; /* Margin zero is used to prevent unnecessary white space. */
                padding: 0; /* Padding zero is used to prevent unnecessary white space. */
            }
        </style>

        <script type="text/javascript" src="~/Scripts/jquery.min.js"></script>

        <script type="text/javascript" src="~/Scripts/jChart/js/jchartfx.system.js"></script>
        <script type="text/javascript" src="~/Scripts/jChart/js/jchartfx.coreVector.js"></script>
        <script type="text/javascript" src="~/Scripts/jChart/js/jchartfx.coreBasic.js"></script>
        <script type="text/javascript" src="~/Scripts/jChart/js/jchartfx.advanced.js"></script>   

        @*<script type="text/javascript" src="~/Scripts/jChart/jchartfx.userinterface.js"></script>
            <link rel="stylesheet" type="text/css" href="~/Content/jChart/jchartfx.userinterface.css" />*@
        <link rel="stylesheet" type="text/css" href="~/Content/jChart/Attributes/jchartfx.attributes.css" />
        <link rel="stylesheet" type="text/css" href="~/Content/jChart/Palettes/jchartfx.palette.css" />    

        <script type="text/javascript" language="javascript">

        @using System.Web.Script.Serialization;

        var chart1;
        function loadChart() {

            chart1 = new cfx.Chart();
            chart1.setGallery(cfx.Gallery.Pie);
            chart1.getAllSeries().getPointLabels().setVisible(true);

            //var str = @Html.Raw(new JavaScriptSerializer().Serialize(ViewData["Asset Allocations Chart"]));
            var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"]));

            @*$.each(@Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"])), function(i, item){
                alert("Mine is " + i + "|" + item.AssetType + "|" + item.EndMarketValue);
                //chart1.setDataSource(item);
            });*@

            chart1.getView3D().setEnabled(true);
            chart1.getAllSeries().getPointLabels().setVisible(true);
            chart1.setDataSource(str);

            //var fields = chart1.getDataSourceSettings().getFields();
            //var field1 = new cfx.FieldMap();
            //field1.setName("AssetType");
            //field1.setUsage(cfx.FieldUsage.RowHeading);
            //fields.add(field1);
            //var field2 = new cfx.FieldMap();
            //field2.setName("EndMarketValue");
            //field2.setUsage(cfx.FieldUsage.ColumnHeading);
            //fields.add(field2);

            //var crosstab = new cfx.data.CrosstabDataProvider();
            //crosstab.setDataSource(str);
            //chart1.setDataSource(str);

            //var data = chartStats.getData();

            var data = chart1.getData();
            data.setSeries(1);
            //data.setPoints(10);

            //var labels = chart1.getAxisX().getLabels();
            //labels.clear();
            //labels.setItem(0, "Cash & Cash Equivalents");
            //labels.setItem(1, "Equities");
            //labels.setItem(2, "Taxable Fixed Income");
            //labels.setItem(3, "Non Taxable Fixed Income");
            //labels.setItem(4, "Other Securities");

            //var titles = chart1.getTitles();
            //var title = new cfx.TitleDockable();
            //title.setText("Asset Allocation");
            //titles.add(title);

            //chart1.getAllSeries().getPointLabels().setFormat("%v");
            chart1.getAllSeries().getPointLabels().setVisible(true);
            chart1.getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);

            chart1.getLegendBox().setVisible(true);
            chart1.getLegendBox().setWidth(100);
            chart1.getLegendBox().setDock(cfx.DockArea.Right);
            chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Near);

            var divHolder = document.getElementById('ChartDiv');
            chart1.create(divHolder);
        }
    </script>
    </head>

    <body>

    @RenderBody()
        
    </body>
    </html>

     

     

    post-47373-0-40556100-1431353911_thumb.jpg

  9. jChartFx - Fixfox

    in General Questions

    Posted

    I am using visual studio mvc. We are tetsing jChartFx.  I cretaed a pie chart using jChartFx and the chart renders in IE and Chrome but the chart crated using jChartFx does not render in firefox.  Please advise.

     

    Code:

     @model ePortfolio.Models.WidgetViewModel

    @{

        Layout = "~/Views/Shared/_WidgetEmptyLayout.cshtml";
    }

    <script>
        $(document).ready(function () {
            loadChart();
        });
    </script>

    <li class="widget">

        <div style="overflow:auto;">

            <div data-role="navbar" class="widget-head" id="navcontainer">
                @Html.DisplayFor(model => model, "WidgetHeader");
            </div>

            <div id="ChartDiv" style="width: 480px;height:400px"></div>

        </div>

    </li>

     

    Code 2::

    <!DOCTYPE html>

    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">        
        <style>
            * {
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box; /* Border boxing is used, so the padding, margin and borders are within the width and height of de element. */
                color: rgb(112, 112, 112);
                font-family: Arial;
                font-size: 11px;          
                margin: 0; /* Margin zero is used to prevent unnecessary white space. */
                padding: 0; /* Padding zero is used to prevent unnecessary white space. */
            }
        </style>

        <script type="text/javascript" src="~/Scripts/jquery.min.js"></script>

        <script type="text/javascript" src="~/Scripts/jChart/js/jchartfx.system.js"></script>
        <script type="text/javascript" src="~/Scripts/jChart/js/jchartfx.coreVector.js"></script>
        <script type="text/javascript" src="~/Scripts/jChart/js/jchartfx.coreBasic.js"></script>
        <script type="text/javascript" src="~/Scripts/jChart/js/jchartfx.advanced.js"></script>   

        @*<script type="text/javascript" src="~/Scripts/jChart/jchartfx.userinterface.js"></script>
            <link rel="stylesheet" type="text/css" href="~/Content/jChart/jchartfx.userinterface.css" />*@
        <link rel="stylesheet" type="text/css" href="~/Content/jChart/Attributes/jchartfx.attributes.css" />
        <link rel="stylesheet" type="text/css" href="~/Content/jChart/Palettes/jchartfx.palette.css" />    

        <script type="text/javascript" language="javascript">

        var chart1;
        @using System.Web.Script.Serialization;

        function loadChart() {

            chart1 = new cfx.Chart();
           
            var str = @Html.Raw(new JavaScriptSerializer().Serialize(ViewData["Asset Allocations Chart"]))

            @*$.each(@Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"])), function(i, item){
                //alert("Mine is " + i + "|" + item.AssetType + "|" + item.EndMarketValue);
                chart1.setDataSource(item);
            });*@

            chart1.setGallery(cfx.Gallery.Pie);
            chart1.getView3D().setEnabled(true);

            chart1.getAllSeries().getPointLabels().setVisible(true);        
            chart1.setDataSource(str);

            //var fields = chart1.getDataSourceSettings().getFields();
            //var field1 = new cfx.FieldMap();
            //field1.setName("AssetType");
            //field1.setUsage(cfx.FieldUsage.KeyLabel);
            //fields.add(field1);

            //var field2 = new cfx.FieldMap();
            //field2.setName("EndMarketValue");
            //field2.setUsage(cfx.FieldUsage.Value);
            //fields.add(field2);

            var data = chart1.getData();
            data.setSeries(1);
            data.setPoints(5);
           
            data.getLabels().setItem(0, "Cash & Cash Equivalents");
            data.getLabels().setItem(1, "Equities");
            data.getLabels().setItem(2, "Taxable Fixed Income");
            data.getLabels().setItem(3, "Non Taxable Fixed Income");
            data.getLabels().setItem(4, "Other Securities");

            //var titles = chart1.getTitles();
            //var title = new cfx.TitleDockable();
            //title.setText("Asset Allocation");
            //titles.add(title);

            //chart1.getAllSeries().getPointLabels().setFormat("%v");
            chart1.getAllSeries().getPointLabels().setVisible(true);
            chart1.getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);

            chart1.getLegendBox().setVisible(true);
            chart1.getLegendBox().setDock(cfx.DockArea.Right);
            //chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Near);        

            var divHolder = document.getElementById('ChartDiv');
            chart1.create(divHolder);
        }
    </script>
    </head>

    <body>

    @RenderBody()
        
    </body>
    </html>
     

     

×
×
  • Create New...