HTML point - Javascript - Grafici a colonna

Grafici a colonna

Questo script permette di ottenere grafici a colonna. I valori sono impostati di default, ma prova a modificarli sulla pagina cliccando poi su "reload" del tuo browser.
(Lo scipt necessita di cinque piccoli file d'immagine che diano il colore alle colonne, in questo caso: java98a.gif, java98b.gif, java98c.gif, java98d.gif, java98e.gif).

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide JavaScript from Java-Impaired Browsers
function getHplot(){
 n=new initArray(0,0,0,0,0,0)
 v=new initArray(0,0,0,0,0,0)
 rtitle=document.isnform.title.value;
 stitle=document.isnform.stitle.value;
 document.write('<TABLE BORDER=1 WIDTH=450><TR><TD '
 +'COLSPAN=3 ALIGN=CENTER><B>Grafico orizzontale a colonne</'
 +'B></TD></TR><TR><TD COLSPAN=3 ALIGN=CENTER><B>'
 +rtitle+'</B><BR><I>'+stitle+'</I></TD></TR>');
 v[0]=document.isnform.v1.value;
 v[1]=document.isnform.v2.value;
 v[2]=document.isnform.v3.value;
 v[3]=document.isnform.v4.value;
 v[4]=document.isnform.v5.value;
 v[5]=document.isnform.v6.value;
 n[9]=0;
 n[6]=0;
 n[7]=0;
 for (var i=0;i<6;i++){
  if (v[i].length>n[9]){
   n[9]=v[i].length;
   }
  /* The next three lines are needed for visitors who
     still live on the Win3.x platform.  If none of your
     visitors use older platforms,
     n[i]=eval(v[i]);
     may be substituted for these three lines. */
  str=v[i]
  StringToNumber();
  n[i]=num; // eval(v[i]); may be substituted
  if (n[i]<0){
   n[i]=0;
   }
  n[6]+=n[i];
  if (n[i]>n[7]){
   n[7]=n[i];
   }
  }
 n[10]=(n[9]+6)*8
 n[8]=n[7]/(450-n[10]); // my divisor
 document.write('<TR><TD><B>'+document.isnform.n1.value
 +'</B></TD><TD><IMG SRC="java98a.gif" HEIGHT=10 WIDTH='
 +(n[0]/n[8])+' BORDER=1></TD><TD>'+v[0]+'</TD></TR>'
 +'<TR><TD><B>'+document.isnform.n2.value
 +'</B></TD><TD><IMG SRC="java98b.gif" HEIGHT=10 WIDTH='+(n[1]/n[8])
 +' BORDER=1></TD><TD>'+v[1]+'</TD></TR>'
 +'<TR><TD><B>'+document.isnform.n3.value
 +'</B></TD><TD><IMG SRC="java98c.gif" HEIGHT=10 WIDTH='+(n[2]/n[8])
 +' BORDER=1></TD><TD>'+v[2]+'</TD></TR>'
 +'<TR><TD><B>'+document.isnform.n4.value
 +'</B></TD><TD><IMG SRC="java98d.gif" HEIGHT=10 WIDTH='+(n[3]/n[8])
 +' BORDER=1></TD><TD>'+v[3]+'</TD></TR>'
 +'<TR><TD><B>'+document.isnform.n5.value
 +'</B></TD><TD><IMG SRC="java98e.gif" HEIGHT=10 WIDTH='+(n[4]/n[8])
 +' BORDER=1></TD><TD>'+v[4]+'</TD></TR>'
 +'<TR><TD><B>'+document.isnform.n6.value
 +'</B></TD><TD><IMG SRC="java98a.gif" HEIGHT=10 WIDTH='+(n[5]/n[8])
 +' BORDER=1></TD><TD>'+v[5]+'</TD></TR>');
 document.write('<TR><TD COLSPAN=3><HR NOSHADE></TD></TR></TABLE>');
 getVplot();
}

function getVplot(){
 n[8]=n[7]/100;
 document.write('<P><TABLE BORDER=0 WIDTH=450><TR><TD'
 +' COLSPAN=6 ALIGN=CENTER><B>Grafico verticale a colonne</B></TD></TR>'
 +'<TR><TD COLSPAN=6 ALIGN=CENTER><B>'
 +rtitle+'</B><BR><I>'+stitle+'</I></TD></TR><TR>'
 +'<TD VALIGN=BOTTOM ALIGN=CENTER><IMG SRC="java98a.gif" HEIGHT='
 +(n[0]/n[8])
 +' WIDTH=50 BORDER=1></TD>'
 +'<TD VALIGN=BOTTOM ALIGN=CENTER><IMG SRC="java98b.gif" HEIGHT='
 +(n[1]/n[8])+' WIDTH=50 BORDER=1></TD>'
 +'<TD VALIGN=BOTTOM ALIGN=CENTER><IMG SRC="java98c.gif" HEIGHT='
 +(n[2]/n[8])+' WIDTH=50 BORDER=1></TD>'
 +'<TD VALIGN=BOTTOM ALIGN=CENTER><IMG SRC="java98d.gif" HEIGHT='
 +(n[3]/n[8])+' WIDTH=50 BORDER=1></TD>'
 +'<TD VALIGN=BOTTOM ALIGN=CENTER><IMG SRC="java98e.gif" HEIGHT='
 +(n[4]/n[8])+' WIDTH=50 BORDER=1></TD>'
 +'<TD VALIGN=BOTTOM ALIGN=CENTER><IMG SRC="java98a.gif" HEIGHT='
 +(n[5]/n[8])+' WIDTH=50 BORDER=1></TD></TR><TR>'
 +'<TD ALIGN=CENTER><B>'+document.isnform.n1.value+'</B></TD>'
 +'<TD ALIGN=CENTER><B>'+document.isnform.n2.value+'</B></TD>'
 +'<TD ALIGN=CENTER><B>'+document.isnform.n3.value+'</B></TD>'
 +'<TD ALIGN=CENTER><B>'+document.isnform.n4.value+'</B></TD>'
 +'<TD ALIGN=CENTER><B>'+document.isnform.n5.value+'</B></TD>'
 +'<TD ALIGN=CENTER><B>'+document.isnform.n6.value+'</B></TD></TR>'
 +'<TR><TD ALIGN=CENTER>'+v[0]+'</B></TD>'
 +'<TD ALIGN=CENTER>'+v[1]+'</TD>'
 +'<TD ALIGN=CENTER>'+v[2]+'</TD>'
 +'<TD ALIGN=CENTER>'+v[3]+'</TD>'
 +'<TD ALIGN=CENTER>'+v[4]+'</TD>'
 +'<TD ALIGN=CENTER>'+v[5]+'</TD></TR><TR><TD COLSPAN=6'
 +'><HR NOSHADE><P></TD></TR></TABLE>');
}
var pwr=new initArray(1,2,3,4);
pwr[0]=1;
pwr[1]=10;
pwr[2]=100;
pwr[3]=1000;
pwr[4]=10000;
pwr[5]=100000;
pwr[6]=1000000;
pwr[7]=10000000;
/* Add more to array - pwr[8]=100000000, etc. -
   if strings longer than 8 are to be used. */
var ns="0123456789"
var cr="";
var str="";

/* Pass this function a string (named "str") and it will
   return a number (named "num")  Useful until all versions
   of JavaScript on all platforms support string to numeric
   conversions with predictability. */
function StringToNumber(){
 num=0;
 strl=str.length;
 for (var j=strl-1;j>-1;j--){
  cr=str.substring(j,j+1);
  pos=ns.indexOf(cr);
  num+=pos*pwr[strl-j-1];
  }
 }

function initArray() {
 this.length=initArray.arguments.length;
 for (var i=0;i<this.length;i++) {
  this[i]=initArray.arguments[i];
  }
}
// End Hiding -->
</SCRIPT>

</HEAD>

<script type="text/javascript" src="https://i5.plug.it/cmp/iub_conf_libero.js"></script>
    <script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/stub-v2.js"></script>
    <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
    
    
    <script src='https://i5.plug.it/cmp/qciol.min.js' async="true"></script>
	
	
<script src="//barra-spazio.libero.it/x/js/barra_n04_siti.js?ver=1" type="text/javascript" language="Javascript"></script>

Libero.Stash.HF = { version: '8.3.04', cksrv: { a: 'HF8.3.04', b: 'digilander' } };

</script>

<!--[if lte IE 7]>
	<style>
	#lh_header_top #HF_login_l, #lh_header_top #HF_login_r { 
		float: none;
	}
	#lh_header_top {
		left: 0px;
	}
	
	#l_header_topbar #l_header_topbar_popup_altro, #l_header_topbar #l_header_topbar_popup_opzioni {
    	margin-top: 33px;
	}
	#l_header_topbar #l_header_topbar_popup_nicknames {
    	margin-top: 25px;
	}

</style>
<![endif]-->
<style>
	#lh_header #lh_area02a{
		position:relative;
		overflow: visible;
		height: 30px;
	}
	
	#lh_header #lh_area02b{
		z-index: -1;
	}
	#lh_header #lh_area02a .lh_pos {
		position: absolute;
		margin-bottom: 0;
	}
	
	#lh_header #lh_area02a .lh_on {
	}
	#lh_header .lh_finput_area input {
		height: 27px;
		padding-top: 0;
		padding-bottom: 0;
		line-height: 27px !important;
		font-size: 15px !important;
	}
	#lh_altro{
		position: relative !important;
	}
	#lh_header_top .lh_popup {
	}
	#lf_footer .lf_finput_area input {
		font-size: 12px !important;
		line-height: 25px !important;
		vertical-align: middle;
		padding: 0 !important;
		margin: 0 !important;
	}
	
</style>

// Run on load
	Libero.HF.adjust800(Libero.Stash.extractSummary);
	
	// Add onresize handlers 
	if ( window.addEventListener ) {
		window.addEventListener('resize', function() { Libero.HF.adjust800(Libero.Stash.extractSummary) }, 1);
	} 
	else if (window.attachEvent) {
		window.attachEvent('onresize', function() { Libero.HF.adjust800(Libero.Stash.extractSummary) });
	}
-->
</script>

<link rel="preconnect" href="https://tags.crwdcntrl.net">         
<link rel="preconnect" href="https://bcp.crwdcntrl.net">         
<link rel="dns-prefetch" href="https://tags.crwdcntrl.net">         
<link rel="dns-prefetch" href="https://bcp.crwdcntrl.net">
<script type='text/javascript' src='https://www.iolam.it/js/iam2.0.js?ns=libero/web/community/siti/1.2' async></script>

<div id="ad72890top" align="center"></div>

<FORM NAME='isnform'>
<TABLE BORDER=0 WIDTH=440>
<TR><TD ALIGN=CENTER COLSPAN=10>Titolo del grafico: <INPUT TYPE='text' NAME='title' SIZE='35' VALUE='Grafico esemplificativo'>
<BR>Caratteristiche: <INPUT TYPE='text' NAME='stitle' SIZE='40' VALUE='(valori in migliaia)'></TD></TR>
<TR><TD>Mesi:</TD>
<TD><INPUT TYPE='text' NAME='n1' SIZE='3' VALUE='Gen'></TD>
<TD><INPUT TYPE='text' NAME='n2' SIZE='3' VALUE='Feb'></TD>
<TD><INPUT TYPE='text' NAME='n3' SIZE='3' VALUE='Mar'></TD>
<TD><INPUT TYPE='text' NAME='n4' SIZE='3' VALUE='Apr'></TD>
<TD><INPUT TYPE='text' NAME='n5' SIZE='3' VALUE='Mag'></TD>
<TD><INPUT TYPE='text' NAME='n6' SIZE='3' VALUE='Giu'></TD></TR>
<TR><TD><BR>Valori: 
<TD><INPUT TYPE='text' NAME='v1' SIZE='5' VALUE=1000></TD>
<TD><INPUT TYPE='text' NAME='v2' SIZE='5' VALUE=1200></TD>
<TD><INPUT TYPE='text' NAME='v3' SIZE='5' VALUE=800></TD>
<TD><INPUT TYPE='text' NAME='v4' SIZE='5' VALUE=1500></TD>
<TD><INPUT TYPE='text' NAME='v5' SIZE='5' VALUE=1600></TD>
<TD><INPUT TYPE='text' NAME='v6' SIZE='5' VALUE=1350>
</TD></TR>
</TABLE>
</FORM>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<div id="ad72890bottom" align="center"></div> 

<SCRIPT LANGUAGE="Javascript">

</SCRIPT>
<SCRIPT LANGUAGE="Javascript" SRC="http://digilander.libero.it/_ad/digi_ad_13.js">
</SCRIPT>

<script>
if(window.location === window.parent.location){    
  // Static Queue Snippet
  ! function(t, n) {
      t[n] = t[n] || {
          nlsQ: function(e, o, c, r, s, i) {
              return s = t.document, r = s.createElement("script"), r.async = 1, r.src =
                  ("http:" === t.location.protocol ? "http:" : "https:") + "//cdn-gl.imrworldwide.com/conf/" +
                  e + ".js#name=" + o + "&ns=" + n, i = s.getElementsByTagName("script")[0],
                  i.parentNode.insertBefore(r, i), t[n][o] = t[n][o] || {
                      g: c || {},
                      ggPM: function(e, c, r, s, i) {
                          (t[n][o].q = t[n][o].q || []).push([e, c, r, s, i])
                      }
                  }, t[n][o]}}}
  (window, "NOLBUNDLE");

// SDK Initialization
  var nSdkInstance = NOLBUNDLE.nlsQ("P1504C48C-9D0B-4ADE-B7CD-04AF56A52362", "nlsnInstance");
  // Content Metadata 
  var nielsenMetadata = {
      type: 'static', 
      assetid: (  location.hostname + location.pathname + location.search ).replace( /([^\w]|_)+/g, '-' ).replace( /^-+|-+$/g, '' ) || 'homepage',
      section: 'LiberoCommunity_BRW' 
  };

// Event 'staticstart' Call
  nSdkInstance.ggPM("staticstart", nielsenMetadata);    
}
</script>

<script type="text/javascript">
if ( rs_DLRERR == 1 ) {
var libero_comscore_error = 404;
}
</script>
<script type="text/javascript">
	document.write(unescape("%3Cscript src='" + (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
if (rs_DLR) {
	document.write(unescape("%3Cscript id='libero_tracking_js_site' src='http://digistatic.libero.it/js/comscore_8_3_04/comscore_digilander.libero.it.js'%3E%3C/script%3E"));
	document.write(unescape("%3Cscript id='libero_tracking_js_site' src='http://digistatic.libero.it/js/comscore_8_3_04/comscore_engine.js'%3E%3C/script%3E"));
	
}
</script>
<noscript>
	<img src="http://b.scorecardresearch.com/p?c1=2&c2=13259779&cj=1&name=libero.others&ns_site=libero" />	
</noscript>

<script src="//i.plug.it/iplug/js/lib/iol/analytics/data/digilander-libero-it/tracking_digilander-libero-it.min.js"></script>
<script src="//i.plug.it/iplug/js/lib/iol/analytics/engine/IOL.Analytics.Tracking.min.js"></script>
<script type="text/javascript">
var iat = new IOL.Analytics.Tracking.Engine();
iat.send();
</script>
<noscript><img src="//italiaonline01.wt-eu02.net/215973748390194/wt.pl?p=315,libero.web.share.digiland.siti.digilander&cg1=libero&cg2=web&cg3=share&cg4=digiland&cg5=siti&cg6=digilander&cg7=libero.web.share.digiland.siti.digilander" height="1" width="1" alt=""></noscript>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-9K5Y6YYGV4"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-9K5Y6YYGV4');
</script>

Area download, scarica le risorse di HTML point in files zippati