Originally from ticket #76.
Hi. Can I have 2 or more amcharts in the same page? I made 2 separeted charts with 2 different div containers but when I try to aplly those to the same page, only shown the last one.
Thanks
2 or more amcharts
Antanas Marcelionis -
Sure. Note, each div should have unique id. Here is an example: http://jsfiddle.net/amcharts/jbjJ6/
I seem to be having trouble with generating 2 or more graphs specifically with IE8.
Works in FF and chrome. In IE8 I get this error that points to the amcharts library itself. Any ideas?
Line: 354
Character: 424
Code: 0
Error Message: Invalid argument.
URL: http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/graphics/amcharts_2.8.2/amcharts.js
Here is the code:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
| <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
|
| <head>
|
|
| <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><link rel='stylesheet' type='text/css' href=' [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/css/alu\_wppm\_styles.css](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/css/alu_wppm_styles.css)' />
|
|
| <link rel='stylesheet' type='text/css' href=' [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/inettuts.css](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/inettuts.css)' />
|
|
| <link rel='stylesheet' type='text/css' href=' [../../js/jquery-tooltip/css/global.css](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/js/jquery-tooltip/css/global.css)' /><script type="text/javascript" src=" [http://mobility.ih.lucent.com/~sdeadm/dashboard/js/jquery-1.3.2.min.js](http://mobility.ih.lucent.com/~sdeadm/dashboard/js/jquery-1.3.2.min.js)"></script>
|
|
|
|
|
| <script src=" [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/js/jquery-tooltip/js/jtip.js](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/js/jquery-tooltip/js/jtip.js)" type="text/javascript"></script> <script type="text/javascript" src=" [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/js/jquery-1.2.6.min.js](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/js/jquery-1.2.6.min.js)"></script>
|
|
| <!-- Adding support for fancy lefy menu -->
|
|
|
|
|
| <script src=" [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/js/menu.js](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/js/menu.js)" type="text/javascript"></script>
|
|
| <link rel="stylesheet" type="text/css" href=" [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/style.css](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/style.css)" /><title> </title>
|
|
| </head>
|
|
|
|
|
| <body ><div id='lower\_toplinks'>
|
|
| </div><div id='lower\_toplinks\_text'>
|
|
| <a class='toplink' href=' [#](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/reports/t_jira/drive_show_selected.php?id=157011,134791,159506,162500,165531,165533#)'> </a><a class='toplink' href=' [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/index.php](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/index.php)'> HOME </a><a class='toplink' href=' [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/contact.php](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/contact.php)'> SUPPORT </a><a class='toplink' href=' [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/links.php](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/links.php)'> LINKS </a><a class='toplink' href=' [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/news.php](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/news.php)'> NEWS </a></div>
|
|
| <div id="title\_section"><h2> Wireless Executive Dashboard Portal </h2><br />Jira Delivery Release Report V 1.0<span class='formInfo'><a href=' [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/js/jquery-tooltip/historybutton.html?width=300](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/js/jquery-tooltip/historybutton.html?width=300)' class='jTip' id='five' name='Click to <i>Show the report change history</i>'>
|
|
| <img src=' [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/img/history.jpg](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/img/history.jpg)' alt='Show Report History' style="background-color:yellow;width:20px; height:20px"
|
|
| onClick="window.open('http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/common/show\_history.php?SRN=jira\_release\_report','Update','width=1050, height=400, scrollbars=yes'); return false;"></a></span></div>
|
|
| <div id='left\_links'>
|
|
| <ul id='menu'>
|
|
| </ul></div>
|
|
| <img id='logo' src=' [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/css/Alcatel\_lucent\_sm.gif](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/css/Alcatel_lucent_sm.gif)' width='138' height='60' alt='logo' />
|
|
| <div id='date'><b>Saturday, 15 Dec 2012</b>
|
|
| </div>
|
|
| <div id='ROLE\_SET'>Jira Delivery Release Report<span class='formInfo'><a href=' [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/js/jquery-tooltip/UpdateProfile.html?width=300](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/js/jquery-tooltip/UpdateProfile.html?width=300)' class='jTip' id='db\_PU' name='Update Profile</i>'><img src=' [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/img/qmark.gif](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/img/qmark.gif)'></span></a></span>
|
|
| </div><div id='main\_section'><br>
|
|
| <link rel='stylesheet' type='text/css' href=' [../css/reports.css](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/reports/css/reports.css)' />
|
|
| <script src=' [../../js/timePage.js](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/js/timePage.js)'> </script>
|
|
| <script> startTime = setTime(); //alert( 'StartTime=' + startTime );
|
|
| </script>
|
|
| <div id='report\_main\_test\_left'><br><H2> Selected Jira Reports </h2></h2><i>(Data Last Import: 2012-11-15 22:47:57 CT<span class='formInfo'><a href=' [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/reports//QTIP\_LAST\_IMPORT.php?NAMES=cache\_jira\_cache\_rollup\_summary&width=300](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/reports//QTIP_LAST_IMPORT.php?NAMES=cache_jira_cache_rollup_summary&width=300)' class='jTip' id='SHOW\_LAST\_ID' name='Last Import Date'>
|
|
| <img src=' [http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/reports//qmark.gif](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/reports//qmark.gif)' alt='fid' width='20px', height='20px'
|
|
| onClick="window.open('','Update','width=, height=; scrollbars=1; location=1;'); return false;"></a></span>) </i><br>
|
|
| <div id='ROW\_GAP\_1' style='background: #F0F0F0; float:left; width:1250px; height:20px;'>
|
|
| </div>
|
|
| <div id='WIDGET\_1' style='background: #F7f7E3; float:left; width:600px; height:450px;'> <span id='style='font-family:"Serif"; font-size:16px;''> Fid = 165531 </span>
|
|
| </div>
|
|
| <div id='WIDGET\_1' style='background: #F0F0F0; float:left; width:25px; height:450px;'>
|
|
| </div>
|
|
| <div id='WIDGET\_2' style='background: #F7f7E3; float:left; width:600px; height:450px;'> <span id='style='font-family:"Serif"; font-size:16px;''> Fid = 134791 </span>
|
|
| </div>
|
|
| <div id='WIDGET\_2' style='background: #F0F0F0; float:left; width:25px; height:450px;'>
|
|
| </div>
|
|
| <div id='ROW\_GAP\_2' style='background: #F0F0F0; float:left; width:1250px; height:20px;'>
|
|
| </div>
|
|
| <div id='WIDGET\_3' style='background: #F7f7E3; float:left; width:600px; height:450px;'> <span id='style='font-family:"Serif"; font-size:16px;''> Fid = 157011 </span>
|
|
| </div>
|
|
| <div id='WIDGET\_3' style='background: #F0F0F0; float:left; width:25px; height:450px;'>
|
|
| </div>
|
|
| <div id='WIDGET\_4' style='background: #F7f7E3; float:left; width:600px; height:450px;'> <span id='style='font-family:"Serif"; font-size:16px;''> Fid = 165533 </span>
|
|
| </div>
|
|
| <div id='WIDGET\_4' style='background: #F0F0F0; float:left; width:25px; height:450px;'>
|
|
| </div>
|
|
| <div id='ROW\_GAP\_3' style='background: #F0F0F0; float:left; width:1250px; height:20px;'>
|
|
| </div>
|
|
| <div id='WIDGET\_5' style='background: #F7f7E3; float:left; width:600px; height:450px;'> <span id='style='font-family:"Serif"; font-size:16px;''> Fid = 159506 </span>
|
|
| </div>
|
|
| <div id='WIDGET\_5' style='background: #F0F0F0; float:left; width:25px; height:450px;'>
|
|
| </div>
|
|
| <div id='WIDGET\_6' style='background: #F7f7E3; float:left; width:600px; height:450px;'> <span id='style='font-family:"Serif"; font-size:16px;''> Fid = 162500 </span>
|
|
| </div>
|
|
| <div id='WIDGET\_6' style='background: #F0F0F0; float:left; width:25px; height:450px;'>
|
|
| </div>
|
|
| <script src=" [../../graphics/amcharts\_2.8.2/amcharts.js](http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/graphics/amcharts_2.8.2/amcharts.js)"> </script><br /><script type="text/javascript">
|
|
| //alert( "Creating chart CQA=2012-12-10" );
|
|
| //alert( "CT_WEEKS=54 ");
|
|
| // declaring variables
|
|
| var chart;
|
|
| var dataProvider;
|
|
| // this method called after all page contents are loaded
|
|
| window.onload = function() {
|
|
| //return;
|
|
| createChart2( 'WIDGET_1' );
|
|
| inURL='http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/reports/jira/ajax_get_data_V2.php?IN_RELEASE=LR13.1.L&IN_PROJECT=&fid_list_csv=0&SWEEK=2012-06-10&EWEEK=2013-06-10&CQA_date=2012-12-10&RQ_AREA=ALL&S_DATA_WEEK=2012-06-10&show_lp=y&JIRA_PPM_FIDLIST=165531'
|
|
| loadCSV( inURL );
|
|
| createChart2( 'WIDGET_2' );
|
|
| inURL='http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/reports/jira/ajax_get_data_V2.php?IN_RELEASE=LR13.1.L&IN_PROJECT=&fid_list_csv=0&SWEEK=2012-06-10&EWEEK=2013-06-10&CQA_date=2012-12-10&RQ_AREA=ALL&S_DATA_WEEK=2012-06-10&show_lp=y&JIRA_PPM_FIDLIST=134791'
|
|
| loadCSV( inURL );
|
|
| createChart2( 'WIDGET_3' );
|
|
| inURL='http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/reports/jira/ajax_get_data_V2.php?IN_RELEASE=LR13.1.L&IN_PROJECT=&fid_list_csv=0&SWEEK=2012-06-10&EWEEK=2013-06-10&CQA_date=2012-12-10&RQ_AREA=ALL&S_DATA_WEEK=2012-06-10&show_lp=y&JIRA_PPM_FIDLIST=157011'
|
|
| loadCSV( inURL );
|
|
| createChart2( 'WIDGET_4' );
|
|
| inURL='http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/reports/jira/ajax_get_data_V2.php?IN_RELEASE=LR13.1.L&IN_PROJECT=&fid_list_csv=0&SWEEK=2012-06-10&EWEEK=2013-06-10&CQA_date=2012-12-10&RQ_AREA=ALL&S_DATA_WEEK=2012-06-10&show_lp=y&JIRA_PPM_FIDLIST=165533'
|
|
| loadCSV( inURL );
|
|
| createChart2( 'WIDGET_5' );
|
|
| inURL='http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/reports/jira/ajax_get_data_V2.php?IN_RELEASE=LR13.1.L&IN_PROJECT=&fid_list_csv=0&SWEEK=2012-06-10&EWEEK=2013-06-10&CQA_date=2012-12-10&RQ_AREA=ALL&S_DATA_WEEK=2012-06-10&show_lp=y&JIRA_PPM_FIDLIST=159506'
|
|
| loadCSV( inURL );
|
|
| createChart2( 'WIDGET_6' );
|
|
| inURL='http://mobility.web.alcatel-lucent.com/~sdeadm/dashboard/reports/jira/ajax_get_data_V2.php?IN_RELEASE=LR13.1.L&IN_PROJECT=&fid_list_csv=0&SWEEK=2012-06-10&EWEEK=2013-06-10&CQA_date=2012-12-10&RQ_AREA=ALL&S_DATA_WEEK=2012-06-10&show_lp=y&JIRA_PPM_FIDLIST=162500'
|
|
| loadCSV( inURL ); }
|
|
| // method which loads external data
|
|
| function loadCSV_from_string( inString) {
|
|
| if (window.XMLHttpRequest) {
|
|
| // IE7+, Firefox, Chrome, Opera, Safari
|
|
| var request = new XMLHttpRequest();
|
|
| } else {
|
|
| // code for IE6, IE5
|
|
| var request = new ActiveXObject('Microsoft.XMLHTTP');
|
|
| }
|
|
| // load
|
|
| // alert( "Load2 file=" +file );
|
|
| request.open('GET', file, false);
|
|
| request.send();
|
|
| parseCSV( inString);
|
|
|
|
|
| }
|
|
|
|
|
| function loadCSV(file) {
|
|
| if (window.XMLHttpRequest) {
|
|
| // IE7+, Firefox, Chrome, Opera, Safari
|
|
| var request = new XMLHttpRequest();
|
|
| } else {
|
|
| // code for IE6, IE5
|
|
| var request = new ActiveXObject('Microsoft.XMLHTTP');
|
|
| }
|
|
| // load
|
|
| //alert( "Load222222 file=" +file );
|
|
| request.open('GET', file, false);
|
|
| request.send();
|
|
| parseCSV(request.responseText);
|
|
|
|
|
| }
|
|
|
|
|
| // method which parses csv data
|
|
| function parseCSV(data){
|
|
| //replace UNIX new lines
|
|
|
|
|
| data = data.replace(/\n/g, '\n' );
|
|
| //replace MAC new lines
|
|
| data = data.replace (/\r/g, '\n');
|
|
| //split into rows
|
|
| var rows = data.split('\n');
|
|
| // create array which will hold our data:
|
|
|
|
|
| dataProvider = [];
|
|
| // loop through all rows
|
|
| for (var i = 0; i < rows.length; i++){
|
|
| // this line helps to skip empty rows
|
|
| if (rows[i]) {
|
|
| // our columns are separated by comma
|
|
| var column = rows[i].split(",");
|
|
| // column is array now
|
|
| // first item is date
|
|
| var date = column[0];
|
|
| //alert( "date=" + date );
|
|
| // second item is value of the second column
|
|
| var value1=undefined;
|
|
| if ( column[1] != '' ) var value1 = column[1];
|
|
|
|
|
| // third item is value of the fird column
|
|
| var value2=undefined;
|
|
| if ( column[2] != '' ) var value2 = column[2];
|
|
|
|
|
| // create object which contains all these items:
|
|
| var value3=undefined;
|
|
| if ( column[3] != '' ) var value3 = column[3];
|
|
| //
|
|
| // create object which contains all these items:
|
|
| var value4=undefined;
|
|
| if ( column[4] != '' ) var value4 = column[4];
|
|
| // create object which contains all these items:
|
|
|
|
|
| var value5=undefined;
|
|
| if ( column[5] != '' ) var value5 = column[5];
|
|
|
|
|
| value6=undefined;
|
|
| if ( column[6] != '' ) var value6 = column[6];
|
|
|
|
|
| // create object which contains all these items:
|
|
| var dataObject = {date:date, value1:value1, value2:value2, value3:value3, value4:value4, value5:value5, value6:value6 };
|
|
| // add object to dataProvider array
|
|
| dataProvider.push(dataObject);
|
|
| }
|
|
| }
|
|
| //alert( "CQA Date=" + CQA_DATE );
|
|
| // set data provider to the chart
|
|
| chart.dataProvider = dataProvider;
|
|
| // this will force chart to rebuild using new data
|
|
| chart.validateData();
|
|
| }
|
|
| // method which creates chart
|
|
|
|
|
| function createChart2( USE_DIV ) {
|
|
| // alert( "CQA_WEEK=2012-12-10" );
|
|
|
|
|
| //alert( "insdie create chart2 Coutput_CSL=" );
|
|
| ;
|
|
|
|
|
| // chart variable is declared in the top
|
|
| chart = new AmCharts.AmSerialChart();
|
|
| // set chart name of category field in our data provider.
|
|
| // we called it "date" (look at parseCSV method)
|
|
| chart.categoryField = "date";
|
|
|
|
|
| // Germany graph
|
|
| var graph = new AmCharts.AmGraph();
|
|
| graph.title = "Cummulative Story Points";
|
|
| graph.valueField = "value1";
|
|
| graph.balloonText = "Cummulative Story Points [[category]]: [[value]]";
|
|
| graph.bullet = "round";
|
|
| graph.lineColor = "#6666FF";
|
|
| graph.bulletSize = 3;
|
|
| graph.lineThickness = 3;
|
|
| chart.addGraph(graph);
|
|
| // ##
|
|
| // Graph2 graph
|
|
| var graph = new AmCharts.AmGraph();
|
|
| graph.title = "Resolved Story Points";
|
|
| graph.valueField = "value2";
|
|
| graph.balloonText = "Resolved Story Points [[category]]: [[value]]";
|
|
| graph.bullet = "round";
|
|
| graph.lineColor = "#FF44FF";
|
|
| graph.bulletSize = 3;
|
|
| graph.lineThickness = 3;
|
|
| chart.addGraph(graph);
|
|
| // ##
|
|
| // Graph3 graph
|
|
| var graph = new AmCharts.AmGraph();
|
|
| graph.title = "Projected Created";
|
|
| graph.valueField = "value3";
|
|
| graph.balloonText = "[[category]]: [[value]]";
|
|
| graph.bullet = "round";
|
|
| graph.lineColor = "#666633";
|
|
| graph.bulletSize = 3;
|
|
| graph.lineThickness = 1;
|
|
| chart.addGraph(graph);
|
|
| // ##
|
|
| // Graph4 graph
|
|
| var graph = new AmCharts.AmGraph();
|
|
| graph.title = "Projected Resolved";
|
|
| graph.valueField = "value4";
|
|
|
|
|
| graph.balloonText = "[[category]]: [[value]]";
|
|
| //graph.balloonText = "Texting";
|
|
| graph.bullet = "round";
|
|
| graph.lineColor = "#9966CC";
|
|
| graph.bulletSize = 3;
|
|
| graph.lineThickness = 1;
|
|
| chart.addGraph(graph);
|
|
| // ##
|
|
| // Graph5 graph
|
|
| var graph = new AmCharts.AmGraph();
|
|
| graph.title = "Linear Plan Line";
|
|
| graph.valueField = "value5";
|
|
| graph.balloonText = "[[category]]: [[value]]";
|
|
| graph.bullet = "round";
|
|
| graph.lineColor = "#ff0000";
|
|
| graph.bulletSize = 3;
|
|
| graph.lineThickness = 1;
|
|
| chart.addGraph(graph);
|
|
| // ##
|
|
| // AXES
|
|
| // category
|
|
| var categoryAxis = chart.categoryAxis;
|
|
| categoryAxis.fillAlpha = 1;
|
|
| categoryAxis.fillColor = "#FAFAFA";
|
|
| categoryAxis.autoGridCount = false;
|
|
|
|
|
| categoryAxis.gridCount = 54;
|
|
| categoryAxis.gridAlpha = 0;
|
|
| categoryAxis.axisAlpha = 0;
|
|
| categoryAxis.gridPosition = "start";
|
|
| categoryAxis.labelRotation = 90;
|
|
| //categoryAxis.position = "top";
|
|
| // GUIDE
|
|
| var guide = new AmCharts.Guide();
|
|
| // alert( "CQA=" + CQA_DATE[1] );
|
|
| guide.category ="2012-12-10";
|
|
| //guide.category = '2012-04-13';
|
|
| guide.lineColor = "#CC0000";
|
|
| guide.dashLength = 4;
|
|
| guide.label = "CQA=";
|
|
| guide.balloonText = "CQA Date ";
|
|
| guide.lineAlpha = 1;
|
|
| guide.labelRotation = 90;
|
|
| //guide.value=6;
|
|
| guide.inside = true;
|
|
| categoryAxis.addGuide(guide);
|
|
|
|
|
| // CURSOR
|
|
| var chartCursor = new AmCharts.ChartCursor();
|
|
| chart.addChartCursor(chartCursor);
|
|
|
|
|
|
|
|
| // 'chartdiv' is id of a container
|
|
| // where our chart will be
|
|
| // LEGEND
|
|
| var legend = new AmCharts.AmLegend();
|
|
| legend.markerType = "circle";
|
|
| chart.addLegend(legend);
|
|
| // value
|
|
| var valueAxis = new AmCharts.ValueAxis();
|
|
| valueAxis.title = "Story Points";
|
|
| valueAxis.dashLength = 5;
|
|
| valueAxis.axisAlpha = 0;
|
|
| valueAxis.minimum = 1;
|
|
| //valueAxis.maximum = 6;
|
|
| valueAxis.integersOnly = true;
|
|
| //valueAxis.gridCount = 10;
|
|
| //valueAxis.reversed = true; // this line makes the value axis reversed
|
|
| chart.addValueAxis(valueAxis);
|
|
| //chart.write('chartdiv');
|
|
| chart.write( USE_DIV );
|
|
| }
|
|
| </script></div></body></html>
|
BTW I have upgraded to the latest version of AMCharts