StatementSolutions 1 Report post Posted May 21, 2015 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> Share this post Link to post Share on other sites
0 StatementSolutions 1 Report post Posted May 21, 2015 How can I decrease the spacing between items on the legend box (attached image)? Share this post Link to post Share on other sites
0 StatementSolutions 1 Report post Posted May 22, 2015 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> Share this post Link to post Share on other sites
0 StatementSolutions 1 Report post Posted May 22, 2015 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> Share this post Link to post Share on other sites
0 StatementSolutions 1 Report post Posted May 22, 2015 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> Share this post Link to post Share on other sites
0 StatementSolutions 1 Report post Posted May 22, 2015 - 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> Share this post Link to post Share on other sites
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>
Share this post
Link to post
Share on other sites