justinMI4P Posted May 7, 2014 Report Share Posted May 7, 2014 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> Quote Link to comment Share on other sites More sharing options...
0 JuanC Posted May 7, 2014 Report Share Posted May 7, 2014 Both functions are called loadChart, try renaming them to be loadChart1 and loadChart2 and then add a loadChart function which is the one invoked in the onload event that calls both loadChart1 and loadChart2. JuanC Quote Link to comment Share on other sites More sharing options...
0 justinMI4P Posted May 8, 2014 Author Report Share Posted May 8, 2014 Got it! Thanks! <body onload="loadChart1(), loadChart2()"> Quote Link to comment Share on other sites More sharing options...
Question
justinMI4P
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>
Link to comment
Share on other sites
2 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.