bazooka

Members
 View Profile  See their activity

  • Content count

    10

  • Joined

  • Last visited

About bazooka

  • Rank
    Junior Member

  1. Legend Question

    bazooka posted a topic in FusionCharts and ASP.NET

    Is there a way to add hyperlinks to your legend values? For example I want to select a legend item from the list and have a jscript pop-up window come up. I know you can do this from the label value. Thanks.
  2. I'm using one of your examples and I'm converting it to asp.net c#. It works only in flash mode but not in javascript mode rendering. Below is the source code, I'm I missing something? <?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Multi Series Bar 2D Chart</title> <link href="../assets/ui/css/style.css" rel="stylesheet" type="text/css" /> <script type="text/JavaScript" src="js/FusionCharts.js"></script> <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> </head> <body> <h3 class="chart-title">Multi Series Bar 2D Chart</h3> <script type="text/javascript" src="js/Bar2D3.js" ></script> <div id="chartdiv" align="center">Chart will load here</div> <script type="text/javascript"> //If I comment out the below statement it works, in flash mode but not using javascript mode. FusionCharts.setCurrentRenderer('javascript'); /*Render in Javascript not flash...*/ var chart = new FusionCharts("fusioncharts/Bar2D.swf", "ChartId", "310", "185", "0", "1"); chart.setXMLData( dataString ); chart.render("chartdiv"); </script> <div class="qua-button-holder"></div> <div class="show-code-block"></div> </body> </html>
  3. Using your example for the Single Series 2D Bar: Gallery\Bar\Bar2D1.html I want to show the legend box at the bottom, but it won't show up. Also the labelWidthPercent isn't working, I assume the bar width will decrease with this setting but nothing happens. I'm I missing something? var dataString ='<chart caption="Brand Winner" showBorder="0" showLegend="1" labelWidthPercent="5" yAxisName="Brand Value ($ m)" xAxisName="Brand" bgColor="F1F1F1" showValues="0" canvasBorderThickness="1" canvasBorderColor="999999" plotFillAngle="330" plotBorderColor="999999" showAlternateVGridColor="1" divLineAlpha="0">\n\ <set label="Coca-Cola" value="67000" toolText="2006 Rank: 1, Country: US"/> \n\ <set label="Microsoft" value="56926" toolText="2006 Rank: 2, Country: US"/> \n\ <set label="IBM" value="56201" toolText="2006 Rank: 3, Country: US"/> \n\ <set label="GE" value="48907" toolText="2006 Rank: 4, Country: US"/> \n\ <set label="Intel" value="32319" toolText="2006 Rank: 5, Country: US"/> \n\ <set label="Nokia" value="30131" toolText="2006 Rank: 6, Country: Finland"/> \n\ <set label="Toyota" value="27941" toolText="2006 Rank: 7, Country: Japan"/> \n\ <set label="Disney" value="27848" toolText="2006 Rank: 8, Country: US"/> \n\ <set label="McDonalds" value="27501" toolText="2006 Rank: 9, Country: US"/> \n\ <set label="Mercedes-Benz" value="21795" toolText="2006 Rank: 10, Country: Germany"/> \n\ </chart>';

  4. Resizing Chart In Percentage Not Working

    bazooka replied to bazooka's topic in General usage

    The example I'm using is from your FusionCharts and JavaScript > Example Application that you provide on your doc page. The dataXML file exists since it's working perfectly with pixel values but not with no percent values, I also notice that if I only provide one % value for the width and a pixel value for the height it works. Therefore, the dataXML file is coming in correctly. I can't figure out why, if I provide both % values for the width and height it gives me the "error in loading data" error, seems weird. <HTML> <HEAD> <TITLE>FusionCharts - Client Side Chart Plotting</TITLE> <script LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT> <script LANGUAGE="JavaScript"> //In this example, we'll show you how to plot and update charts on the //client side. Here, we first store our data (to be plotted) in client side //JavaScript arrays. This data is hard-coded in this example. However, //in your applications, you can build this JavaScript arrays with live //data using server side scripting languages. Or, you can make AJAX calls //to get this data live. //We store all our data in an array data. It contains data for three Products //for 3 quarters. The first column of each array contains the product Name. //Thereafter 4 columns contain data for 4 quarters. var data = new Array(); //Data for each product data[0] = new Array("Product A",659400,465400,764500,650500); data[1] = new Array("Product B",546300,436500,546500,332500); data[2] = new Array("Product C",657600,564600,348600,436600); data[3] = new Array("Product D",436500,765700,453900,326400); //Flag indicating whether our chart has loaded var chartLoaded = false; /** * FC_Rendered method is invoked when the chart has completed rendering for the first time. * It's a pre-defined method name. * @param domId Dom ID of the chart object */ function FC_Rendered(domId){ //It is in this method that you can update chart's data using JS methods. //Check if this is the chart that we want to update if (domId=="chart1Id"){ //Yes - it is. //Enable the form now, as the chart has loaded this.document.productSelector.disabled = false; //Set chartLoaded flag to true chartLoaded = true; //Get reference to chart object using Dom ID var chartObj = getChartFromId(domId); //Update it's XML - set animate Flag to true chartObj.setXMLData(generateXML(true)); } return true; } /** * updateChart method is called, when user changes any of the checkboxes. * Here, we generate the XML data again and build the chart. * @param domId domId of the Chart */ function updateChart(domId){ //Update only if chart has loaded if (chartLoaded){ //Get reference to chart object using Dom ID var chartObj = getChartFromId(domId); //Update it's XML - set animate Flag from AnimateChart checkbox in form chartObj.setXMLData(generateXML(this.document.productSelector.AnimateChart.checked)); } } /** * generateXML method returns the XML data for the chart based on the * checkboxes which the user has checked. * @param animate Boolean value indicating to animate the chart. * @return XML Data for the entire chart. */ function generateXML(animate){ //Variable to store XML var strXML; //<chart> element //Added animation parameter based on animate parameter //Added value related attributes if show value is selected by the user strXML = "<chart caption='Product Wise Sales' formatNumberScale='0' numberPrefix='$' animation='" + ((animate==true)?"1":"0") + "' " + ((this.document.productSelector.ShowValues.checked==true)? (" showValues='1' rotateValues='1' placeValuesInside='1' ")" showValues='0' ")) + ">"; //Store <categories> and child <category> elements strXML = strXML + "<categories><category name='Quarter 1' /><category name='Quarter 2' /><category name='Quarter 3' /> <category name='Quarter 4' /></categories>"; //Based on the products for which we've to generate data, generate XML strXML = (this.document.productSelector.ProductA.checked==true)?(strXML + getProductXML(0)):(strXML); strXML = (this.document.productSelector.ProductB.checked==true)?(strXML + getProductXML(1)):(strXML); strXML = (this.document.productSelector.ProductC.checked==true)?(strXML + getProductXML(2)):(strXML); strXML = (this.document.productSelector.ProductD.checked==true)?(strXML + getProductXML(3)):(strXML); //Close <chart> element; strXML = strXML + "</chart>"; //Return data return strXML; } /** * getProductXML method returns the <dataset> and <set> elements XML for * a particular product index (in data array). * @param productIndex Product index (in data array) * @return XML Data for the product. */ function getProductXML(productIndex){ var productXML; //Create <dataset> element productXML = "<dataset seriesName='" + data[productIndex][0] + "' >"; //Create set elements for (var i=1; i<=4; i++){ productXML = productXML + "<set value='" + data[productIndex] + "' />"; } //Close <dataset> element productXML = productXML + "</dataset>"; //Return return productXML; } function toggleValues(chartId) { // get chart reference var chartReference = FusionCharts(chartId); // toggle present showValues status var toggledShowValues = 1* ( !( chartReference.getChartAttribute("showValues")==1 ) ); // set toggled value for showValues chartReference.setChartAttribute( "showValues" , toggledValue ); } </SCRIPT> </HEAD> <BODY> <!-- In this example, we'll initially plot the chart with no data. --> <!-- Embed a chart --> <!-- Create the form for selecting products. We disable the form till the chart is loaded and initialized. --> <FORM NAME='productSelector' Id='productSelector' action='Chart.html' method='POST' disabled> <h4>Please select the products for which you want to plot the chart:</h4> <INPUT TYPE='Checkbox' name='ProductA' onClick="JavaScript:updateChart('chart1Id');" checked> Product A <INPUT TYPE='Checkbox' name='ProductB' onClick="JavaScript:updateChart('chart1Id');" checked> Product B <INPUT TYPE='Checkbox' name='ProductC' onClick="JavaScript:updateChart('chart1Id');" checked> Product C <INPUT TYPE='Checkbox' name='ProductD' onClick="JavaScript:updateChart('chart1Id');" checked> Product D <B>Chart Configuration:</B> <INPUT TYPE='Checkbox' name='AnimateChart'>Animate chart while changing data? <INPUT TYPE='Checkbox' name='ShowValues' onClick="JavaScript:toggleValues('chart1Id');" checked>Show Data Values? </FORM> <div id="chart1div">FusionCharts</div> <script language="JavaScript"> var chart1 = new FusionCharts("../../FusionCharts/MSColumn3D.swf", "chart1Id", "600", "400", "0", "1"); //Initialize chart with empty data. We'll feed it data on the chart's FC_Rendered event. chart1.setXMLData("<chart></chart>"); chart1.render("chart1div"); </script> </BODY> </HTML> Thanks.
  5. I have the following code from your sample js code: I get an error(error in loading data) when I try using percentage values ie. 50% If I use pixels (i.e. 520 and 330) instead of % values it works. I'm I missing something? <div id="chart1div" style="width: 520px; height: 300px;"> FusionCharts </div> <script language="JavaScript"> var chart1 = new FusionCharts("fusioncharts/MSColumn3D.swf", "chart1Id", "50%", "50%", "0", "1"); var strXML = generateXML(true); chart1.setDataXML(strXML); chart1.render("chart1div"); </script>
  6. I'm setting the valuepadding property and it's not working...I'm I missing something? <chart showValues='0' maxColWidth='44' formatNumberScale='0' legendPosition='bottom' baseFont='Arial' baseFontSize='12' valuePadding='6' baseFontColor='333333' linethickness='3' shadowAlpha='0' yAxisMinValue='0' yAxisMaxValue='6000' bgcolor='ffffff' color='F6BD0F' yAxisValuesPadding='7' labelPadding='5' showPercentInToolTip='1' canvasBgColor='efefef' canvasBaseDepth='6' canvasBaseColor='cccccc' canvasBgDepth='2' showSecondaryLimits='1' showDivLineSecondaryValue ='1' numdivlines='5' decimalPrecision='0' showSum='1' chartTopMargin='0' xAxisNamePadding='15' xAxisName='MyName{br} ' rotateNames='0' caption='Jane Doe' subcaption='' PYAxisMinValue='0' PYAxisMaxValue='7000'>

  7. Spacing Between The Xaxisname And Bottom Label

    bazooka replied to bazooka's topic in General usage

    I tried that but didnt work.
  8. I tried to change the font size on the sum values(using showSum propery) in a stackedcolumn3d chart by doing the following but it won't work. I'm I missing something? <styles> <definition> <style name="myShowSum" type="font" font="arial" color="ffffff" size="5" /> </definition> <application> <apply toObject="showSum" styles="myShowSum" /> </application> </styles>
  9. Is there a propery that allows spacing/padding between the XAxisName and the bottom label?