jChartFx using JQuery with Visual Studio

[StatementSolutions 1]

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>

[StatementSolutions 1]

How can I decrease the spacing between items on the legend box (attached image)?

 

 

 

 

 

 

 

 

[StatementSolutions 1]

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>
 

[StatementSolutions 1]

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>

[StatementSolutions 1]

The chart renders on IE & Chrome but does not render in firefox.   What is wrong?

 

Code:

@model ePortfolio.Models.WidgetViewModel

@{

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

}

 

<li class="widget">

    <div style="overflow:auto;height:250px;">        

 

            <div data-role="navbar" class="widget-head" id="navcontainer">

                @Html.DisplayFor(model => model, "WidgetHeader");

            </div>

 

            <div class="widget-content" id="ChartDiv" style="width:485px;height:250px;display:inline-block"></div>

 

        </div>

</li>

<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(50);

        chart1.getLegendBox().setDock(cfx.DockArea.Right);

        chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Near);

 

        var divHolder = document.getElementById('ChartDiv');

        chart1.create(divHolder);

    }

    

    LoadChart();

</script>

[StatementSolutions 1]

- The  chart renders on IE & Chrome but doe not in firefox. What is wrong with this?

- The chart size differs from IE and Chrome.  How can I make the chart size identical no matter what browser used

 

code:

@model ePortfolio.Models.WidgetViewModel
@{
    Layout = "~/Views/Shared/_ChartWidgetEmptyLayout.cshtml";
}
<script src="~/Scripts/LoadChart.js"></script>
<li class="widget">
    <div style="overflow:auto;height:250px;">        

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

            <div class="widget-content" id="ChartDiv" style="width:485px;height:250px;display:inline-block"></div>

        </div>
</li>
 

 

<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>

   

   
</head>

<body>

    @RenderBody()
    
</body>
<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 src="~/Scripts/LoadChart.js"></script>

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

    @using System.Web.Script.Serialization;

    var chart1;

    function LoadPieChart() {

        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 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);
    }

    LoadPieChart();
</script>
</html>