Are there any plans to incorporate graphs into ListX? Ever since Power Reports Pro disappeared from the grid i haven't found any comparable modules which have come close to replacing this in terms of reporting + graphing.

If would mean ListX would become a fantastic tool for creating dashboard type reports.

Just a thought
cheers
Adam

I would love to see this as well! I have beeb trying to get a JavaScript solution to work for a couple of hours today without luck.

I have managed to get fusionchart flash graphing working real easy under listx. It uses a few different methods for creating the xml needed by fusioncharts. One method i used was to create a C# .NET Library to retrieve the data and construct the xml and return it to the client. I have done all the demos provided by fusioncharts in listx and will make it available if there is interest. I would just need to package it up somehow and test that it can be portable. I understand that fusioncharts is a commercial offering but they do offer a free redistributable developers version that may just work for your project. So if there is interest just post here and i will promptly get it to you.

I am pretty interested in seeing your code for FusionCharts. I lookaed at http://www.infosoftglobal.com/FusionCharts/ and didn't see a free developer version though. If it works I would be willing to pay the $199.

Hi pstewart,

I was just looking at FusionCharts as a solution and was considering purchasing it. I would be very interested in your method as well....

OK...I figured out how to make Plotkit work in Listx. I would love to add a package with all of this, but the forum doesn't provide any upload abilities.

Begin by grabbing all the plotkit files at http://www.liquidx.net/plotkit/. Then add a listx to the page with the following definition. You will probably want to hide the container.

<?xml version="1.0" encoding="utf-16"?>
<xListSettings xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<recordsPerPage>0</recordsPerPage>
<enableAlphaFilter>false</enableAlphaFilter>
<enablePageSelection>false</enablePageSelection>
<enableRecordsPerPage>false</enableRecordsPerPage>
<enableCustomPaging>false</enableCustomPaging>
<enableExcelExport>false</enableExcelExport>
<enableHide_OnNoQuery>false</enableHide_OnNoQuery>
<enableHide_OnNoResults>false</enableHide_OnNoResults>
<enableAdvancedParsing>true</enableAdvancedParsing>
<enableCompoundIIFConditions>false</enableCompoundIIFConditions>
<enableQueryDebug>false</enableQueryDebug>
<enableQueryDebug_Edit>false</enableQueryDebug_Edit>
<enableQueryDebug_Admin>false</enableQueryDebug_Admin>
<enableQueryDebug_Super>true</enableQueryDebug_Super>
<autoRefreshInterval />
<skipRedirectActions>false</skipRedirectActions>
<skipSubqueryDebugging>false</skipSubqueryDebugging>
<enableAdmin_Edit>false</enableAdmin_Edit>
<enableAdmin_Admin>false</enableAdmin_Admin>
<enableAdmin_Super>true</enableAdmin_Super>
<enableAJAX>false</enableAJAX>
<enableAJAXCustomPaging>false</enableAJAXCustomPaging>
<enableAJAXCustomStatus>false</enableAJAXCustomStatus>
<includeJavascriptUtilities>false</includeJavascriptUtilities>
<includeJavascriptValidation>false</includeJavascriptValidation>
<javascriptOnComplete />
<enableMultipleColumnSorting>false</enableMultipleColumnSorting>
<ModuleCommunicationMessageType />
<showAll>true</showAll>
<useExplicitSystemVariables>false</useExplicitSystemVariables>
<searchItems />
<queryItems />
<listItems>
<anyType xsi:type="ListFormatItem">
<Index>0</Index>
<GroupStatement>Header and footer</GroupStatement>
<ListHeader><script type="text/javascript" src="http://www.r2idnn.com/portals/102/js/mochikit/MochiKit.js"></script>
<script type="text/javascript" src="http://www.r2idnn.com/portals/102/js/plotkit/Base.js"></script>
<script type="text/javascript" src="http://www.r2idnn.com/portals/102/js/plotkit/Layout.js"></script>
<script type="text/javascript" src="http://www.r2idnn.com/portals/102/js/plotkit/Canvas.js"></script>
<script type="text/javascript" src="http://www.r2idnn.com/portals/102/js/plotkit/SweetCanvas.js"></script>
<script type="text/javascript" src="http://www.r2idnn.com/portals/102/js/plotkit/SweetCanvas.js"></script>
<script type="text/javascript" src="http://www.r2idnn.com/portals/102/js/plotkit/excanvas.js"></script>

<script type="text/javascript">
<!--

var options = {
"colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),
"xTicks": [{v:0, label:" "}</ListHeader>
<ListFooter>],
"drawYAxis": true,
"shouldFill": true,
"pieRadius": 0.35
};
//-->
</script></ListFooter>
</anyType>
</listItems>
<messageItems />
<query>SELECT IDENTITY(int,0,1) AS MyIndex,
Date,
LabAlkPhosAST,
LabAlkPhosASTNotReported

INTO #NewTable
FROM FAST_Visits
WHERE PatientID=[PatientID,SESSION]
ORDER BY Date

SELECT * FROM #NewTable

DROP TABLE #NewTable</query>
<filter />
<customConnection />
<listItem>, \{v:[MyIndex], label:"[Date]"\}</listItem>
<listAItem>, \{v:[MyIndex], label:"[Date]"\}</listAItem>
<defaultItem />
<noqueryItem />
<Version>17</Version>
</xListSettings>

After you have this moudule in place add another ListX with the following:

<?xml version="1.0" encoding="utf-16"?>
<xListSettings xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<recordsPerPage>0</recordsPerPage>
<enableAlphaFilter>false</enableAlphaFilter>
<enablePageSelection>false</enablePageSelection>
<enableRecordsPerPage>false</enableRecordsPerPage>
<enableCustomPaging>false</enableCustomPaging>
<enableExcelExport>false</enableExcelExport>
<enableHide_OnNoQuery>false</enableHide_OnNoQuery>
<enableHide_OnNoResults>false</enableHide_OnNoResults>
<enableAdvancedParsing>true</enableAdvancedParsing>
<enableCompoundIIFConditions>false</enableCompoundIIFConditions>
<enableQueryDebug>false</enableQueryDebug>
<enableQueryDebug_Edit>false</enableQueryDebug_Edit>
<enableQueryDebug_Admin>false</enableQueryDebug_Admin>
<enableQueryDebug_Super>true</enableQueryDebug_Super>
<autoRefreshInterval />
<skipRedirectActions>false</skipRedirectActions>
<skipSubqueryDebugging>false</skipSubqueryDebugging>
<enableAdmin_Edit>false</enableAdmin_Edit>
<enableAdmin_Admin>false</enableAdmin_Admin>
<enableAdmin_Super>true</enableAdmin_Super>
<enableAJAX>false</enableAJAX>
<enableAJAXCustomPaging>false</enableAJAXCustomPaging>
<enableAJAXCustomStatus>false</enableAJAXCustomStatus>
<includeJavascriptUtilities>false</includeJavascriptUtilities>
<includeJavascriptValidation>false</includeJavascriptValidation>
<javascriptOnComplete />
<enableMultipleColumnSorting>false</enableMultipleColumnSorting>
<ModuleCommunicationMessageType />
<showAll>true</showAll>
<useExplicitSystemVariables>false</useExplicitSystemVariables>
<searchItems />
<queryItems />
<listItems>
<anyType xsi:type="ListFormatItem">
<Index>0</Index>
<GroupStatement>Header and footer</GroupStatement>
<ListHeader>
<div style="float: left; padding-left: 5px;" width="500" height="400"><canvas id="graphAlkPhosAST" width="500" height="400"></canvas></div>

<script type="text/javascript">
<!--




function drawGraphAlkPhosAST() {
var layout = new PlotKit.Layout("line", options);
layout.addDataset("AlkPhosAST", \[</ListHeader>
<ListFooter>\]);
layout.evaluate();
var canvas = MochiKit.DOM.getElement("graphAlkPhosAST");
var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, options);
plotter.render();
}
MochiKit.DOM.addLoadEvent(drawGraphAlkPhosAST);



// Damn opera 9 has a bug with javascript subclassing??
// but works in sweet.html, grr!!
if (navigator.userAgent.toLowerCase().indexOf("opera") == -1) {
MochiKit.DOM.addLoadEvent(drawGraph);
}

//-->
</script></ListFooter>
</anyType>
</listItems>
<messageItems />
<query>SELECT IDENTITY(int,0,1) AS MyIndex,
Date,
LabAlkPhosAST,
LabAlkPhosASTNotReported

INTO #NewTable
FROM FAST_Visits
WHERE PatientID=[PatientID,SESSION]
ORDER BY Date

SELECT * FROM #NewTable

DROP TABLE #NewTable</query>
<filter />
<customConnection />
<listItem>\[[MyIndex], [LabAlkPhosAST]\], </listItem>
<listAItem>\[[MyIndex], [LabAlkPhosAST]\], </listAItem>
<defaultItem />
<noqueryItem />
<Version>17</Version>
</xListSettings>

I will put a demo of fusioncharts working from listx online for those who wish to see and download the xml. It will not happen for a few more weeks as were deploying new servers to host our site and i'm not totally sure when i can use them so on the safe side in a few weeks.

I would like to see a demo of how to integrate Fusioncharts in ListX.
Anyone can publish a XML?

Thanks

Hi All,

Anyone done anything with the Fusioncharts integration? Looks exactly what I would like for showing data over weather patterns.

Brit

Here's a hack graph/chart I made with yahoo user interface (YUI) library. Anyways I had to turn off AJAX interactions for it to work. Right now I plot square root but you can change the 'WHERE' part of the query to plot 'square function'.

Was wondering if someone can tell me how I can get it to redraw the 'square function' on the press of a button and using lxfetch? I just have trouble using that function.


<?xml version="1.0" encoding="utf-16"?>
<xListSettings xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<recordsPerPage>0</recordsPerPage>
<enableAlphaFilter>false</enableAlphaFilter>
<enablePageSelection>false</enablePageSelection>
<enableRecordsPerPage>false</enableRecordsPerPage>
<enableCustomPaging>false</enableCustomPaging>
<enableExcelExport>false</enableExcelExport>
<enableHide_OnNoQuery>false</enableHide_OnNoQuery>
<enableHide_OnNoResults>false</enableHide_OnNoResults>
<enableAdvancedParsing>true</enableAdvancedParsing>
<enableCompoundIIFConditions>true</enableCompoundIIFConditions>
<enableQueryDebug>false</enableQueryDebug>
<enableQueryDebug_Edit>false</enableQueryDebug_Edit>
<enableQueryDebug_Admin>false</enableQueryDebug_Admin>
<enableQueryDebug_Super>true</enableQueryDebug_Super>
<enableQueryDebug_Log>false</enableQueryDebug_Log>
<enableQueryDebug_ErrorLog>false</enableQueryDebug_ErrorLog>
<autoRefreshInterval />
<skipRedirectActions>false</skipRedirectActions>
<skipSubqueryDebugging>false</skipSubqueryDebugging>
<enableAdmin_Edit>true</enableAdmin_Edit>
<enableAdmin_Admin>false</enableAdmin_Admin>
<enableAdmin_Super>false</enableAdmin_Super>
<enableAJAX>false</enableAJAX>
<enableAJAXCustomPaging>false</enableAJAXCustomPaging>
<enableAJAXCustomStatus>false</enableAJAXCustomStatus>
<enableAJAXManual>false</enableAJAXManual>
<includeJavascriptUtilities>true</includeJavascriptUtilities>
<includeJavascriptValidation>false</includeJavascriptValidation>
<javascriptOnComplete />
<enableMultipleColumnSorting>false</enableMultipleColumnSorting>
<ModuleCommunicationMessageType />
<showAll>true</showAll>
<useExplicitSystemVariables>false</useExplicitSystemVariables>
<enabledForcedQuerySplit>false</enabledForcedQuerySplit>
<searchItems />
<queryItems>
<anyType xsi:type="QueryOptionItem">
<Index>0</Index>
<VariableType><QueryString></VariableType>
<QuerySource>fnName</QuerySource>
<QueryTarget>@fnName</QueryTarget>
<QueryTargetLeft />
<QueryTargetRight />
<QueryTargetEmpty />
<Protected>true</Protected>
<EscapeHTML>false</EscapeHTML>
<EscapeListX>1</EscapeListX>
</anyType>
</queryItems>
<listItems>
<anyType xsi:type="ListFormatItem">
<Index>0</Index>
<GroupStatement />
<ListHeader> <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Charts Quickstart Example</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/fonts/fonts-min.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/json/json-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/charts/charts-experimental-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
#chart
{
width: 500px;
height: 350px;
}

.chart_title
{
display: block;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 0.4em;
}
</style>
<!--end custom header content for this example-->

</head>

<body class=" yui-skin-sam">

<h1>Charts Quickstart Example</h1>

<div class="exampleIntro">
<p>This example is a demonstration of the <a href="http://developer.yahoo.com/yui/charts/">YUI Chart Control</a>'s basic features.</p>
<p>Please note: The YUI Charts Control requires Flash Player 9.0.45 or higher. The latest version of Flash Player is available at the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player Download Center</a>.</p>
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<span class="chart_title">Monthly Expenses</span>

<div id="chart">Unable to load Flash content. The YUI Charts Control requires Flash Player 9.0.45 or higher. You can download the latest version of Flash Player from the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player Download Center</a>.</p></div>

<script type="text/javascript">

YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.5.1/build//charts/assets/charts.swf";

//--- data

YAHOO.example.monthlyExpenses =
[</ListHeader>
<ListFooter> ];

var myDataSource = new YAHOO.util.DataSource( YAHOO.example.monthlyExpenses );
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema ={ fields: [ "month", "rent", "utilities" ] };

//--- chart

var seriesDef = [ { displayName: "Rent", yField: "rent" }, { displayName: "Utilities", yField: "utilities" } ];

var currencyAxis = new YAHOO.widget.NumericAxis();
currencyAxis.minimum = 1;
currencyAxis.labelFunction = "formatCurrencyAxisLabel";

function formatCurrencyAxisLabel( value )
{
return YAHOO.util.Number.format( value,
{
prefix: "$",
thousandsSeparator: ",",
decimalPlaces: 5
});
}

function getDataTipText( item, index, series )
{
var toolTipText = series.displayName + " for " + item.month;
toolTipText += "\n" + formatCurrencyAxisLabel( item[series.yField] );
return toolTipText;
}

var mychart = new YAHOO.widget.LineChart( "chart", myDataSource,
{
series: seriesDef,
xField: "month",
yAxis: currencyAxis,
dataTipFunction: "getDataTipText",
expressInstall: "assets/expressinstall.swf"
});

</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body></ListFooter>
</anyType>
</listItems>
<messageItems />
<query>DECLARE @cnt as integer
DECLARE @max as integer

/* sequence excludes last avg date */
set @cnt = 20

DECLARE @MyTable TABLE
(
xval decimal(20,6),
yval decimal(20,6),
valueType varchar(20)
)

DECLARE @sequence TABLE
(num int NOT NULL)

set @max = 1
WHILE(@max <= @cnt)
BEGIN
INSERT INTO @sequence
values(@max) set @max=@max+1
END

insert into @MyTable(xval,yval,valueType)
select num, sqrt(num),'sqrt function' from @sequence

insert into @MyTable(xval,yval,valueType)
select num, num*num, 'square function' from @sequence

/* need help with figuring out how to use lxfetch with my querystring variable fnName (target @fnName) valueType variable with my button */
/* Important: I turned off AJAX interactions since it didn't work with the Yahoo chart library. */
select * from @MyTable where valueType ='sqrt function'</query>
<filter />
<customConnection />
<listItem>{iif, "[xval]<2",,","}{ month: "[xval]", rent: [yval], utilities: [yval] }</listItem>
<listAItem />
<defaultItem><input type=button onClick="alert('button pressed');lxfetch([ModuleID,System],0,'fnName='sqrt function''); " value = "change graph"></defaultItem>
<noqueryItem />
<SearchQuery />
<SearchTitle />
<SearchLink />
<SearchAuthor />
<SearchDate />
<SearchKey />
<SearchContent />
<SearchDescription />
<Version>17</Version>
</xListSettings>

I believe with your previous post it is lxFetch with a capitol F?
Thanks,

Correct!

Thank you for the example, it is great to see the integration. I have done this with the Yahoo Calendar. Pretty cool!
Thanks,