I am using fusion chart and it is working perfectly fine in ipad. My code given below
<html>
<head>
<title>My First chart using FusionCharts - Using JavaScript</title>
<script type="text/javascript" src="FusionCharts.js"></script>
</head>
<body>
<div id="chartContainer">FusionCharts XT will load here!</div>
<div id="chartContainer1" style="margin-left: 50%;
margin-right: 10%;
margin-top: -22%;">FusionCharts XT will load here!</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts( "Column2D.swf",
"myChartId", "500", "300", "0", "0");
var dataString ='<chart palette="2" caption="Industries" xAxisName="Days in Month" yAxisName="" labelDisplay="Rotate" showValues="0" decimals="0" formatNumberScale="0" bgcolor="FFFFFF" useRoundEdges="1" bgColor="FFFFFF,FFFFFF" showBorder="0">\n\
<set value="20" label="Electric Power Generation" color="005C8E"/>\n\
<set value="32" label="Industrial Processes" color="00759B"/>\n\
<set value="12" label="Residential and Commercial Activities" color="0296D2"/>\n\
<set value="20" label="Agriculture" color="40C7F9"/>\n\
<set value="2" label="Waste Disposal" color="00496C"/>\n\
</chart>';
myChart.setXMLData( dataString );
myChart.render("chartContainer");
// -->
</script>
</body>
</html>
Now i want to some other activities on click of column chart. For example like if i click on Agriculture which is having value 20 so based on this value i want some search activity or any other activity. Like if i click on Agriculture it will go to other event which i can define on click of Agriculture. Just let me know how to apply click event on Column 2d chart.
Below Code is working as per the requirement but only works on firefox .Please let me know any thing required for that to work on all browser and mobile devices as well.
<html>
<head>
<title>JavaScript Link Example</title>
<script language="JavaScript" src="FusionCharts.js"></script>
<SCRIPT LANGUAGE="JavaScript"><!--
function myJS(myVar){
window.alert(myVar);
}
// --></SCRIPT>
</head>
<body bgcolor="#ffffff">
<div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("Charts/Column2D.swf",
"myChartId", "500", "300", "0",
"0");
myChart.setXMLUrl("Data.xml");
myChart.render("chartdiv");
// --></script>
</body>
</html>
And this is Data.xml content
<chart caption='ABC Bank Branches' subCaption='(In
Asian Countries)' yaxislabel='Branches' xaxislabel='Country'>
<set label='Hong Kong' value='235' link="JavaScript:myJS('Hong Kong,235');"/>
<set label='Japan' value='123' link="JavaScript:myJS('Japan, 123');"/>
<set label='Singapore' value='129' link="JavaScript:myJS('Singapore, 129');"/>
<set label='Malaysia' value='121' link="JavaScript:myJS('Malaysia, 121');"/>
<set label='Taiwan' value='110' link="JavaScript:myJS('Taiwan, 110');"/>
<set label='China' value='90' link="JavaScript:myJS('China, 90');"/>
<set label='S. Korea' value='86' link="JavaScript:myJS('S.Korea, 86');"/>
</chart>
Related
In my sapui5 project i am using sap.m.MessageBox.confirm its working fine but when i use sap.m.MessageBox.error or sap.m.MessageBox.warning it shows error
Uncaught TypeError: undefined is not a function
I have added jQuery.sap.require("sap.m.MessageBox"); still the issue is not solved. please give solution for this problem
Thanks
Sorry for not posting the code earlier
Edited 1
View
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="trial.S1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
<content>
</content>
<footer>
<OverflowToolbar>
<ToolbarSpacer />
<Button id="errorId" text="Error" type="Accept"
press="fnOnerror" />
<Button id="confirmId" text="Confirm" type="Accept"
press="fnOnconfirm" />
</OverflowToolbar>
</footer>
</Page>
</core:View>
Conroller
jQuery.sap.require("sap.m.MessageBox");
sap.ui.controller("trial.S1", {
fnOnerror : function(oEvent){
sap.m.MessageBox.error("My error message");
},
fnOnconfirm : function(oEvent){
sap.m.MessageBox.confirm("My Confirm message")
}
});
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("trial");
var app = new sap.m.App({initialPage:"idS11"});
var page = sap.ui.view({id:"idS11", viewName:"trial.S1", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
How should we give you a solution for your issue if your information is not enough? From what you describe it is hard to tell what you are doing wrong. Make sure to always add more information including code.
After getting the information from you we know now that you are using version 1.28.9 of UI5. If you would have checked the API docs at https://openui5.hana.ondemand.com/#docs/api/symbols/sap.m.MessageBox.html#.error then you would have known that the APIs you are using were introduced in 1.30!!!
I am using Fusion Chart version 3.3.1 and I found all the solution as per the requirement on the forum and stackoverflow. Chart is working fine for me but please let me know whether it is possible to change the default icon for legend. We don't want to show that default icon for legend and client has given us the icon for the legend which we need to use it in our fusion chart. Code is given below ,please let me know if anything i can change here or there is any other configuration for changing the legend icon.
<html>
<head>
<title>My First chart using FusionCharts - Using JavaScript</title>
<script type="text/javascript" src="FusionCharts.js"></script>
</head>
<body>
<div id="chartContainer">FusionCharts XT will load here!</div>
<div id="chartContainer1" style="margin-left: 50%;
margin-right: 10%;
margin-top: -22%;">FusionCharts XT will load here!</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts( "Column2D.swf",
"myChartId", "500", "300", "0", "0");
var dataString ='<chart palette="2" caption="Industries" xAxisName="Days in Month" yAxisName="" labelDisplay="Rotate" showValues="0" decimals="0" formatNumberScale="0" bgcolor="FFFFFF" useRoundEdges="1" bgColor="FFFFFF,FFFFFF" showBorder="0">\n\
<set value="20" label="Electric Power Generation" color="005C8E"/>\n\
<set value="32" label="Industrial Processes" color="00759B"/>\n\
<set value="12" label="Residential and Commercial Activities" color="0296D2"/>\n\
<set value="20" label="Agriculture" color="40C7F9"/>\n\
<set value="2" label="Waste Disposal" color="00496C"/>\n\
</chart>';
myChart.setXMLData( dataString );
myChart.render("chartContainer");
// -->
</script>
</body>
</html>
By Using Fusion Chart am able to show the 2d donut chart after reading the documentation provided by fusion chart but in below code i am using legend on left hand side where i want related data to be displayed just below the legend label.
For example my label in this code is Electric Power Generation and it value is 20 so i want this 20 to be shown below the legend label.
If it is possible , please let me know how to do that.
<html>
<head>
<title>My First chart using FusionCharts - Using JavaScript</title>
<script type="text/javascript" src="FusionCharts.js"></script>
</head>
<body>
<div id="chartContainer">FusionCharts XT will load here!</div>
<div id="chartContainer1" style="margin-left: 50%;
margin-right: 10%;
margin-top: -22%;">FusionCharts XT will load here!</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts( "Doughnut2D.swf",
"myChartId", "500", "300", "0", "0");
var dataString ='<chart caption="View Indusries" showLabels="0" showValues="0" showLegend="1" legendPosition="RIGHT" chartrightmargin="40" bgcolor="ECF5FF" bgalpha="70" bordercolor="C6D2DF"\n\
basefontcolor="2F2F2F" basefontsize="11" showpercentvalues="1" bgratio="0" startingangle="200" animation="1">\n\
<set value="20" label="Electric Power Generation" color="005C8E"/>\n\
<set value="32" label="Industrial Processes" color="00759B"/>\n\
<set value="12" label="Residential and Commercial Activities" color="0296D2"/>\n\
<set value="20" label="Agriculture" color="40C7F9"/>\n\
<set value="2" label="Waste Disposal" color="00496C"/>\n\
</chart>';
myChart.setXMLData( dataString );
myChart.render("chartContainer");
// -->
</script>
</body>
</html>
I got the solution for this which is given below
var toalval = 20000;
<set value="20" label="Electric Power Generation \r\ '+dsa+'" displayValue="Electric Power Generation" color="005C8E"/>\n\
I have a comboxbox loading its data from a url store. My code is below... What I noticed in Firebug is that the Combobox loads this info once I put the focus on it. I would love to have the Combobox to populate when the page is done loading.I am guessing I use dojo.ready for this? Does anyone have a suggestion as to how I would pull this off? Many thanks! Janie
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="lib/dojo/dijit/themes/claro/claro.css" />
<style type="text/css">html, body {
width: 100%;
height: 100%;
margin: 0;
}</style>
<script src="lib/dojo/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>
<script>require(["dojo/ready", "dojo/data/ItemFileReadStore", "dijit/form/ComboBox"]);
</script>
</head>
<body class="claro">
<label for="user">User: </label>
<div dojoType="dojo.data.ItemFileReadStore" url="test.json" jsId="countryStore">
<input dojoType="dijit.form.ComboBox" searchAttr="last_name" store="countryStore" class="selectionNav tableData" value="" name="last_name" id="test.json" />
</body>
</html>
your require function should look something like this
require(["dojo/ready", "dijit/registry", "dojo/data/ItemFileReadStore"],function(dom,reg,store){
var combo = dijit.byId("test.json");
var storeDate = new store({url:"path/to/file.json"});
try{
combo.store(storeData);
}catch(e){
combo.set("store",storeData)
}
});
the try catch statement is because I don't remember which is the correct one
Any idea how to add charts using Telerik Kendo UI DataViz to an iPhone web application. Thanks in advance. Here is what I am trying to do, but the chart does not show up!
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script src="../../../../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../../../../Scripts/kendo.all.js" type="text/javascript"></script>
<script src="../../../../Scripts/console.js" type="text/javascript"></script>
<link href="../../../../Content/Mobile/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="../../../../Content/Mobile/kendo.mobile.all.min.css" rel="stylesheet"
type="text/css" />
<div data-role="view" data-title="Views">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>
<ul data-role="listview" data-style="inset">
<li>Local View</li>
</ul>
<ul data-role="listview" data-style="inset">
<li>Remote View</li>
</ul>
</div>
<div data-role="view" id="secondview" data-layout="mobile-view" data-title="Local View">
<div id="chart">
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Kendo Chart Example"
},
series: [
{ name: "Example Series", data: [200, 450, 300, 125] }
]
});
}
$(document).ready(function () {
setTimeout(function () {
createChart();
$("#example").bind("kendo:skinChange", function (e) {
createChart();
});
}, 400);
});
</script>
</div>
<div data-role="layout" data-id="mobile-view">
<header data-role="header">
<div data-role="navbar">
<a class="nav-button" data-align="left" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>
</div>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
Thanks in advance
KendoUI DataViz components work in Webkit-based mobile browsers, including Safari on iOS (source), in addition to Android Browser v3 and above.
If you just want to know how to implement a KendoUI chart, here is a simple one I did to answer another question, about how to force KendoUI to plot across missing values: http://jsfiddle.net/LyndsySimon/KJuDe/
categoryAxis: {
categories: [
'test<tspan dx="-20px" dy="1em">label</tspan>', 2006, 2007, 2008, 2009]
}
You can find a complete reference to the DataViz library on KendoUI's site: http://www.kendoui.com/documentation/dataviz/chart/overview.aspx