justinMI4P
-
Posts
3 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by justinMI4P
-
-
Got it! Thanks!
<body onload="loadChart1(), loadChart2()">
-
I can't seem to get multiple charts to display on the same page. One will not display. Here is my code using the example charts.
<head>
<link rel="stylesheet" type="text/css" href="jChartFX/styles/jChartFX Palettes/inverse-vivid.css" /><!--Base Chart Theme-->
<script type="text/javascript" src="jChartFX/js/jchartfx.system.js"></script>
<script type="text/javascript" src="jChartFX/js/jchartfx.coreBasic.js"></script><!--Visually Basic Chart-->
<script type="text/javascript" src="jChartFX/js/jchartfx.advanced.js"></script>
</head>
<body onload="loadChart()">
<div id="ChartDiv" style="width:600px;height:400px"></div>
<script type="text/javascript" language="javascript">
var chart1;
function loadChart()
{
chart1 = new cfx.Chart();
chart1.getData().setSeries(2);
chart1.getAxisY().setMin(500);
chart1.getAxisY().setMax(2000);
var series1 = chart1.getSeries().getItem(0);
var series2 = chart1.getSeries().getItem(1);
series1.setGallery(cfx.Gallery.Lines);
series2.setGallery(cfx.Gallery.Bar);
var data = [
{ "Month": "Jan", "Bikes": 1800, "Parts": 1300 },
{ "Month": "Feb", "Bikes": 1760, "Parts": 900 },
{ "Month": "Mar", "Bikes": 1740, "Parts": 970 },
{ "Month": "Apr", "Bikes": 1750, "Parts": 1010},
{ "Month": "May", "Bikes": 1810, "Parts": 1070 },
{ "Month": "Jun", "Bikes": 1920, "Parts": 1180 }
];
chart1.setDataSource(data);
var divHolder = document.getElementById('ChartDiv');
chart1.create(divHolder);
}
</script>
<div id="ChartDiv2" style="width:600px;height:400px"></div>
<script type="text/javascript" language="javascript">
var chart2;
function loadChart()
{
chart2 = new cfx.Chart();
chart2.getData().setSeries(2);
chart2.getAxisY().setMin(500);
chart2.getAxisY().setMax(2500);
var series1 = chart2.getSeries().getItem(0);
var series2 = chart2.getSeries().getItem(1);
series1.setGallery(cfx.Gallery.Lines);
series2.setGallery(cfx.Gallery.Bar);
var data = [
{ "Month": "Jan", "Bikes": 1800, "Parts": 1300 },
{ "Month": "Feb", "Bikes": 1760, "Parts": 900 },
{ "Month": "Mar", "Bikes": 1740, "Parts": 970 },
{ "Month": "Apr", "Bikes": 1750, "Parts": 1010},
{ "Month": "May", "Bikes": 1810, "Parts": 1070 },
{ "Month": "Jun", "Bikes": 1920, "Parts": 1180 }
];
chart2.setDataSource(data);
var divHolder = document.getElementById('ChartDiv2');
chart2.create(divHolder);
}
</script>
</body>
Point Label Positioning
in Styling and Aesthetics
Posted
I am making a simple line chart that is fairly large (1920x900) to bee seen on a display monitor. The point labels overlap the points themselves at large sizes.
The base-line property can't get the labels far enough up. Is there a CSS property I can use to do this that would move the labels farther up?
-Justin