Hi Juan, thanks for getting back to me.
jChartFX version: 7.2.5289.19355 Broswers tested: Chrome & Firefox (These are the only browsers I want/need this to work on)
Some sample code:
(Sorry for the loss of indentation!)
var cfx;
var chart = new cfx.Chart();
var customGridLine = [];
var maxCustomGridLines = 0;
var titles = chart.getTitles();
var title = new cfx.TitleDockable();
function initialiseGraph() {
chart.getLegendBox().setWidth(400);
var divHolder = document.getElementById('ChartDiv');
chart.create(divHolder);
chart.setFont("bold 40pt Arial");
titles.add(title);
chart.setCulture({
"shortDate": "dd/MM/yyyy",
"days": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
"abbDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
"months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
"abbMonths": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"am": "AM",
"pm": "PM",
"dateSepa": "/",
"timeSepa": ":",
// Numeric
"decSymb": ".",
"groupNumb": 3,
"groupCurr": 3,
"groupSymb": ",",
"currSymb": "£",
"currPos": 0,
"currNeg": 0,
"percSymb": "%",
"percPos": 1,
"percNeg": 1
});
}
function createLineGraph(json, yAxisNames, yAxisFormat, chartTitle, legendWidth, targetValues, targetNames) {
$('#ChartDiv').fadeOut(1000, function() {
if (isValidJson(json, yAxisNames)) {
$('#NoDataAvailable').hide();
chart.getAxisY().setMin(0);
chart.getAxisY().setMax(Math.max(getJsonMax(json, yAxisNames), getTargetValuesMax(targetValues)) * 1.1);
chart.getLegendBox().setWidth(legendWidth);
if (yAxisFormat === 'Number' || typeof yAxisFormat === 'undefined') {
chart.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Number);
} else if (yAxisFormat === 'Currency') {
chart.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Currency);
} else if (yAxisFormat === 'Percentage') {
chart.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Percentage);
} else {
chart.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Number);
}
var numberOfSeries = yAxisNames.length;
chart.getData().setSeries(numberOfSeries);
var series = new Array(numberOfSeries);
for (var i = 0; i < numberOfSeries; i++) {
series[i] = chart.getSeries().getItem(i);
series[i].setGallery(cfx.Gallery.Lines);
}
chart.getToolTips().setAllSeries(true);
chart.getToolTips().setEnabled(true);
alert(cfx.Version);
if (targetValues) {
clearCustomGridLines();
var numberOfTargets = targetValues.length;
if (numberOfTargets > maxCustomGridLines) {
maxCustomGridLines = numberOfTargets;
}
for (i = 0; i < numberOfTargets; i++) {
if (typeof customGridLine[i] === 'undefined') {
customGridLine[i] = new cfx.CustomGridLine;
}
customGridLine[i].setValue(targetValues[i]);
customGridLine[i].setText(targetNames[i]);
customGridLine[i].setShowText(false);
customGridLine[i].setColor("#0000FF");
chart.getAxisY().getCustomGridLines().add(customGridLine[i]);
}
} else {
clearCustomGridLines();
}
chart.setDataSource(json);
chart.update();
title.setText(chartTitle);
$('#ChartDiv').fadeIn(2000, function() {});
} else {
$('#NoDataAvailable').html('No Data Available<br/>' + chartTitle);
$('#NoDataAvailable').show();
}
});
}
As for the div holding the content, it is simply this div inside the body, nothing fancy going on: <div id="ChartDiv" class="b-chart-div"></div>
I look forward to your response.
Thanks,
LordP