Jump to content
JChartFX Community
  • 0

jChartFx using JQuery with Visual Studio


StatementSolutions

Question

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

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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>
 

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

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

post-2106-1393974405091_thumb.png

post-47373-0-84187200-1432311972_thumb.jpg

post-47373-0-11734100-1432312088_thumb.jpg

Link to comment
Share on other sites

  • 0

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

post-2107-13939745403795_thumb.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...