HI,
I have been trying to make the charts work on webview of iPhone. The chart works well on the browser. But when i load the chart on a webView inside the application, I see that the loader js fails to load the chart on the screen.
It should be noted that the filepaths had to be changed from:
<link href="../content/style.css" rel="stylesheet" type="text/css" />
to:
<link href="style.css" rel="stylesheet" type="text/css" />
As seen above, the filename had to be mentioned without the filepath for it to work on webview.
But the loader js file does not load the charts on the screen.
The code is as follows:
<script src="modernizr.min.js"></script> <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery-ui.min.js" type="text/javascript"></script> <script src="jquery.tmpl.min.js" type="text/javascript"></script> <script src="infragistics.loader.js" type="text/javascript"></script>
$.ig.loader({ scriptPath: "../../js/", cssPath: "../../css/", resources: "igPieChart,igCombo" });
I believe the problem is in providing the source folders in the above loader fuction code. I can assure that the source files linking has been done perfectly. I am not sure if it is the problem with providing the resource parameters or a general problem of making jquery work in web view. Kindly assist in resolving the above issue. Any simple sample code would be much appreciated. Thanks in advance for your support.
Also, please provide link to a chart sample that does not involve loader javascript i.e; loading the required js files manually. I could not find these samples in the documentation.
Thanks and regards,
Shiva
Hi Shiva,unfortunally there is no online sample that does not use the loader. Here is an example of manually including the scripts (working for pie chart): <link href="../../../../Source/ClientUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" /> <link href="../../../../Source/ClientUI/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery-ui.min.js"></script> <script type="text/javascript" src="modernizr-1.7.min.js"></script> <script type="text/javascript" src="infragistics.util.js"></script> <script type="text/javascript" src="infragistics.dv.core.js"></script> <script type="text/javascript" src="infragistics.chart_piechart.js"></script> <script type="text/javascript" src="infragistics.dataSource.js"></script> <script type="text/javascript" src="infragistics.ui.chart.js"></script> <script type="text/javascript" src="infragistics.dvcommonwidget-en.js"></script> <script type="text/javascript" src="infragistics.dvcommonwidget.js"></script>You also might have a look here:http://help.infragistics.com/NetAdvantage/jQuery/2012.1/CLR4.0?page=igDataChart_Overview.html I hope this helps.Nikolai Dimitrov
Hi Nikolai,
Thank you for your response. You have provided me with the code to link the source files to the pie chart html file. Is there a sample code as to generate the chart using these manually loaded files? Because, the code that i have right now is as follows:
$.ig.loader({ scriptPath: "js/", cssPath: "css/", resources: "igPieChart" }); $.ig.loader(function () { data = [{ "Budget": 60, "Label": "Administration" }, { "Budget": 40, "Label": "Sales" }, { "Budget": 60, "Label": "IT" }, { "Budget": 40, "Label": "Marketing" }, { "Budget": 60, "Label": "Development" }, { "Budget": 20, "Label": "Support"}]; $('#chart1').igPieChart({ dataSource: data, width: '155px', height: '155px', valueMemberPath: 'Budget', labelMemberPath: 'Label', explodedSlices: '0 1', radiusFactor: .8, legend: { element: 'legend1', type: "item" } });
<div id="chart1"></div><div id="legend1"></div>
As you see, the code invokes the loader function to generate the chart by passing the parameters.We require a similar function in the above js files to generate the chart.
Also, about the first part of my question. Isn't there a way to use the loader js to generate the chart in the webview of iphone then? Is manual the only option?
Thank you.
Hi,the loader just calls the handler when the page is rendered. If you are not using the loader, you can just handle the jQuery's .ready() event - http://api.jquery.com/ready/Here is an example: $(function () { data = [{ "Budget": 60, "Label": "Administration" }, { "Budget": 40, "Label": "Sales" }, { "Budget": 60, "Label": "IT" }, { "Budget": 40, "Label": "Marketing" }, { "Budget": 60, "Label": "Development" }, { "Budget": 20, "Label": "Support"}]; $('#chart1').igPieChart({ dataSource: data, width: '155px', height: '155px', valueMemberPath: 'Budget', labelMemberPath: 'Label', explodedSlices: '0 1', radiusFactor: .8, legend: { element: 'legend1', type: "item" } }); <div id="chart1"></div><div id="legend1"></div>The above code should generate your pie chart if the chart's scripts are manually loaded.As for the iPhone WebView - Let me do a research on that, I'm not quite sure what is going on there.Nikolai Dimitrov
I managed to make the code work manually yesterday. I got a sample from your documentation, but had to change the linking files as they were pointing to your older resources that starts with 'ig.xxx'.
As for the iPhone's webView, I think the loader does not work for the following reason:
In an iPhone's webview, while linking the source files in the html, the path to the files must not be mentioned. i.e; for example,
<script src="../scripts/modernizr.min.js"></script>
must be written as,
<script src="modernizr.min.js"></script>
I opened the loader js file and saw that all the other js files are accessed using the filepaths. Therefore they are not being included in the html to render the controls.
I think, If you could write a seperate loader for iPhone, by including only the filenames (without the paths), your jQuery solution will work on native applications in a breeze. This can be very useful and all you need to do is publish a seperate loader file for iPhone webViews. I hope my suggestion helps.
Thanks for your help.
regards,