function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
bbradybbrady 

Looking for code samples that incorporate visualizations from "AnyChart"

I looking for code samples that will help me add visualizations from http://www.anychart.com to my VF pages.

 

I've had some success using the google visualizations codeshare, but most of the visualizations I'd like to use support XML but not JSON. I thought I'd check the discussion boards before I set about reinventing the wheel.

 

Thanks!

Bill

Best Answer chosen by Admin (Salesforce Developers) 
bbradybbrady

Solution: I was never successful at passing the URL of a VF page to anychart in the manner Ron originally suggested (i.e. modeling the KML generation in the GoogleEarth codeshare) but was ultimately successful using XMLStreamWriter within a controller extension to pass an XML string to the VF page that called AnyChart.

 

 

<apex:page standardController="CIP_Project__c" extensions="ganttProjectExt" showheader="true" sidebar="false">
<html>
  <head>
    <apex:includeScript value="{!$Resource.AnyChartJS}"/>     
  </head>

  <body>
    <script type="text/javascript"> 
      var chart = new AnyChart("{!$Resource.AnyGanttSWF}");
      chart.width = 900;
      chart.height = 400;
      chart.setData('{!xmlOutput}');
      chart.write();
    </script>
  </body>
</html> 
</apex:page>
 
 
 
Message Edited by bbrady on  04-18-2009 09:32 PM


All Answers
Ron HessRon Hess
there is code to generate xml using Apex out on codeshare, how do you pass the XML into the flash component, is this done with a URL ? can you pass an authenticated URL ?
 
can you host the SWF on Force.com in a static resource ?  
 
let me know if you get stuck, this is an interesting technology combo. 


bbradybbrady
Are you referring to XMLStreamWriter, XMLDomParser or something else? 
 
XMLStreamWriter looks like it will do the job (I'm guessing, here). I've also seen a VF page (KML.PAGE - in the Google Maps/Earth codeshare) that appears to demonstrate an approach that could result in something usable. Since this is my first foray into XML, I guess I was looking for some guidance as to the easiest way generate the XML. XMLStreamWriter looks like is was designed for such a task unless I misunderstad its purpose. 
 
As to your question about how to pass the XML to the flash component... the following from AnyChart  makes me think the answer to your question is yes. (i.e. hosting the SWF as a static resource is the correct approach).
 
 
 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>AnyChart Sample</title> 
<script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script> 
</head> 
<body> 
    <script type="text/javascript" language="javascript"> 
    //<![CDATA[
    var chart = new AnyChart('./swf/AnyChart.swf'); 
    chart.width = 700; 
    chart.height = 300; 
    chart.setXMLFile('./anychart.xml'); 
    chart.write(); 
    //]]> 
    </script> 
</body> 
</html> 



Ron HessRon Hess
the KML page is a good example of using Visualforce to generate raw XML output ( not a page to view) , i suggest that approach. 
 
This JS code 
 chart.setXMLFile('./anychart.xml');  
 
 
could easily be something like this 
 chart.setXMLFile('/apex/generateChartXML');  
 
 
since you don't have access to a file system unless you create and consume documents on the fly, which is not best practice.
 
Note: this could fall down if the chart SWF assumes that it can perform a file open on the param. 
 
Is there another option to set XML, something like setXML String or setXML URL ?  Those would be better.
 


bbradybbrady
Thanks for the direction on generating the raw XML. I shall proceed down that path.
 
I see from their doc that I can get an XML String from server using AJAX and then set it to the chart.  which I assume is the functional equivalent of the "setXML URL" that you asked about.
 
It seems pretty straightforward once I get my XML in order. Its a nice visualization library - if not a bit expensive. I see that 0racle has licensed it for their applikation xpress. It would be nice to see SFDC improve their visualization capabilities in this way.
 
Thanks for your help!
Bill 
Message Edited by bbrady on  03-25-2009 09:42 AM


bbradybbrady
 After uploading as static resources, their JS code, SWF and XML, the promised chart displayed (yeah!) 
 
 
 
<apex:page showHeader="false">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AnyChart Sample</title>
<script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script> 
<apex:includeScript value="{!$Resource.AnyChartJS}"/>
</head>
<body>
    <script type="text/javascript" language="javascript">
    //<![CDATA[
    var chart = new AnyChart("{!$Resource.AnyChartSWF}");
    chart.width = 900;
    chart.height = 400;
    chart.setXMLFile("{!$Resource.AnyChartXML}");
    chart.write();
    //]]>
    </script>
</body>
</html> 
</apex:page> 
 
 
The next step was to see if I could get it to display XML generated using a VF page (/apex/AssetXML2):
 
 
<apex:page >
 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AnyChart Sample</title>
<script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script> 
<apex:includeScript value="{!$Resource.AnyChartJS}"/>
</head>
<body>
    <script type="text/javascript" language="javascript">
    //<![CDATA[
    var chart = new AnyChart("{!$Resource.AnyChartSWF}");
    chart.width = 900;
    chart.height = 400;
    chart.setXMLFile("/apex/AssetXML2");
    chart.write();
    //]]>
    </script>
</body>
</html> 
</apex:page> 
 
This time I got an XML parser error from AnyChart. However the XML I used was the same XML that I uploaded as a static resource, which was cut and paste from their demo code. All I did is wrap it in <apex:page> tags. The controller wasn't used in this case as all the text was straight cut and paste. Here is the VF page I used to generate the XML:
 
 <apex:page controller="AssetXMLcon" showheader="false" contenttype="text/xml; charset=UTF-8">
 <anychart>
  <charts>
    <chart plot_type="CategorizedHorizontal">
      <data>
        <series name="Year 2003" type="Bar">
          <point name="Department Stores" y="637166" />
          <point name="Discount Stores" y="721630" />
          <point name="Men's/Women's Specialty Stores" y="148662" />
          <point name="Juvenile Specialty Stores" y="78662" />
          <point name="All other outlets" y="90000" />
        </series>
      </data>
      <chart_settings>
        <title>
          <text>Sales of ACME Corp.</text>
        </title>
        <axes>
          <y_axis>
            <title>
              <text>Sales</text>
            </title>
          </y_axis>
          <x_axis>
            <labels align="Outside" />
            <title>
              <text>Retail Channel</text>
            </title>
          </x_axis>
        </axes>
      </chart_settings>
    </chart>
  </charts>
</anychart>
</apex:page>
 My question at this point is how do I take the XML constructed by this VF page and package it up as a string rather than passing the file path? 


bbradybbrady
Ron,
 
My problem doesn't appear to be related to the code for the charting library, but rather with the way I am atttempting to reference the XML file (or perhaps a problem with my load function - but it isn't raising andy errors that I can tell).The following code executes correctly referencing the XML file uploaded as a static resource:
 
 <script type="text/javascript" language="javascript">
 
    loadXMLDoc("{!$Resource.AnyChartXML}");
    var elements=xmlDoc.getElementsByTagName("text");
    document.write(elements[0].tagName + '<br>');
  
 </script>
 
However neither of the next to code blocks, do.  The XML is identical. It isn't even generated. Its simply cut and past into a VF page as you'll see in the last code block. 
 
 
 <script type="text/javascript" language="javascript">
 
    loadXMLDoc("{!$Page.AnyChartXML}");
    var elements=xmlDoc.getElementsByTagName("text");
    document.write(elements[0].tagName + '<br>');
  
 </script>
 
 I've included the code for loadXMLDoc in this code block.
<apex:page showHeader="false">
 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" language="javascript">

function loadXMLDoc(dname) 
{
try //Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
catch(e)
  {
  try //Firefox, Mozilla, Opera, etc.
    {
    xmlDoc=document.implementation.createDocument("","",null);
    }
  catch(e) {alert(e.message)}
  }
try 
  {
  xmlDoc.async=false;
  xmlDoc.load(dname);
  return(xmlDoc);
  }
catch(e) {alert(e.message)}
return(null);
}

</script>
</head>
<body>
 <script type="text/javascript" language="javascript">
 
    loadXMLDoc{'/apex/AssetsXML');
    var elements=xmlDoc.getElementsByTagName("text");
    document.write(elements[0].tagName + '<br>');
  
 </script>
</body>
</html> 
</apex:page>
 
 And the contents of /apex/AnyChartXML:
 
<apex:page showheader="false" contenttype="text/xml; charset=UTF-8">
 <anychart>
  <charts>
    <chart plot_type="CategorizedHorizontal">
      <data>
        <series name="Year 2003" type="Bar">
          <point name="Department Stores" y="637166" />
          <point name="Discount Stores" y="721630" />
          <point name="Men's/Women's Specialty Stores" y="148662" />
          <point name="Juvenile Specialty Stores" y="78662" />
          <point name="All other outlets" y="90000" />
        </series>
      </data>
      <chart_settings>
        <title>
          <text>Sales of ACME Corp.</text>
        </title>
        <axes>
          <y_axis>
            <title>
              <text>Sales</text>
            </title>
          </y_axis>
          <x_axis>
            <labels align="Outside" />
            <title>
              <text>Retail Channel</text>
            </title>
          </x_axis>
        </axes>
      </chart_settings>
    </chart>
  </charts>
</anychart>
</apex:page>
 
 


bbradybbrady
Solution: I was never successful at passing the URL of a VF page to anychart in the manner Ron originally suggested (i.e. modeling the KML generation in the GoogleEarth codeshare) but was ultimately successful using XMLStreamWriter within a controller extension to pass an XML string to the VF page that called AnyChart.
 
 
<apex:page standardController="CIP_Project__c" extensions="ganttProjectExt" showheader="true" sidebar="false">
<html>
  <head>
    <apex:includeScript value="{!$Resource.AnyChartJS}"/>     
  </head>

  <body>
    <script type="text/javascript"> 
      var chart = new AnyChart("{!$Resource.AnyGanttSWF}");
      chart.width = 900;
      chart.height = 400;
      chart.setData('{!xmlOutput}');
      chart.write();
    </script>
  </body>
</html> 
</apex:page>
 
 
 
Message Edited by bbrady on  04-18-2009 09:32 PM
This was selected as the best answer
PalakPalak
Hi all,
 
I am trying to integrate anygantt chart with visualforce. I am using the following code :
 
<apex:page showHeader="false">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AnyChart Sample</title>
<script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script>
<apex:includeScript value="{!$Resource.AnyChartJS}"/>
</head>
<body>
<script type="text/javascript" language="javascript">
//<![CDATA[
var chart = new AnyChart("{!$Resource.AnyChartFlash}");
chart.width = 900;
chart.height = 400;
chart.setXMLFile("{!$Resource.AnyChartXML}");
chart.write();
//]]>
</script>
</body>
</html>
</apex:page>
 
And Following XML (as static resource) :
 
<anygantt>
<project_chart>
<tasks>
<task id="1" name="Architectural Design" actual_start="2008/01/01" actual_end="2008/01/02" progress="50" />
<task id="2" name="Interior Design" actual_start="2008/02/01" actual_end="2008/03/01" progress="35" />
<task id="3" name="Construction Phase" actual_start="2008/02/10" actual_end="2008/04/18" progress="0" />
<task id="4" name="Decoration Phase" actual_start="2008/04/01" actual_end="2008/05/10" progress="0" />
<task id="5" name="Opening Celebration" actual_start="2008/05/20" progress="0" />
</tasks>
</project_chart>
</anygantt>
 
 
when I am running the above code it shows loading of xml but nothing gets load. Please help me, if anyone has done already it. 
 
Thanks in advance
 
With Regards
Palak Agarwal
 


PalakPalak
Hi is there a way to remove header?
 
With Regards
Palak Agarwal