Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 16th, 2012  |  syntax: None  |  size: 5.05 KB  |  hits: 54  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Amcharts need to defaulted to columns instead of bars
  2. <script type="text/javascript"
  3. src="/My-portlet/js/amcharts.js"></script>
  4. <script type="text/javascript"
  5. src="/My-portlet/js/raphael.js"></script>
  6.        
  7. <script type="text/javascript">`
  8. var chart;
  9. var chartData = [   {
  10.         year : '<liferay-ui:message key="Estimates.date1"/>',
  11.             '<liferay-ui:message key="name.cpp" />' : '<liferay-ui:message key="Bar1.cpp"/>',
  12.             '<liferay-ui:message key="name.oas" />' : '<liferay-ui:message key="Bar1.oas"/>',
  13.             '<liferay-ui:message key="name.bb" />' : '<liferay-ui:message key="Bar1.bb"/>',
  14.             '<liferay-ui:message key="name.psp" />' : '<liferay-ui:message key="Bar1.psp"/>',
  15.             '<liferay-ui:message key="name.pcp" />' : '<liferay-ui:message key="Bar1.pcp"/>'
  16.         },
  17.         {
  18.             year : '<liferay-ui:message key="Estimates.date1"/>',
  19.             '<liferay-ui:message key="name.cpp" />' : '<liferay-ui:message key="Bar2.cpp"/>',
  20.             '<liferay-ui:message key="name.oas" />' : '<liferay-ui:message key="Bar2.oas"/>',
  21.             '<liferay-ui:message key="name.bb" />' : '<liferay-ui:message key="Bar2.bb"/>',
  22.             '<liferay-ui:message key="name.psp" />' : '<liferay-ui:message key="Bar2.psp"/>',
  23.             '<liferay-ui:message key="name.pcp" />' : '<liferay-ui:message key="Bar2.pcp"/>'
  24.         },
  25.         {
  26.             year : '<liferay-ui:message key="Estimates.date1"/>',
  27.             '<liferay-ui:message key="name.cpp" />' : '<liferay-ui:message key="Bar3.cpp"/>',
  28.             '<liferay-ui:message key="name.oas" />' : '<liferay-ui:message key="Bar3.oas"/>',
  29.             '<liferay-ui:message key="name.bb" />' : '<liferay-ui:message key="Bar3.bb"/>',
  30.             '<liferay-ui:message key="name.psp" />' : '<liferay-ui:message key="Bar3.psp"/>',
  31.             '<liferay-ui:message key="name.pcp" />' : '<liferay-ui:message key="Bar3.pcp"/>'
  32.         } ];
  33.  
  34.     window.onload = function() {
  35.     chart = new AmCharts.AmSerialChart();
  36.     chart.dataProvider = chartData;
  37.     chart.categoryField = "year";
  38.     chart.columnWidth = 0.8;
  39.     chart.marginLeft = 100;
  40.     chart.marginTop = 40;
  41.     chart.plotAreaBorderAlpha = 0.0;
  42.     chart.rotate = true;
  43.  
  44.     /*window.onload = function() {
  45.     chart = new AmCharts.AmSerialChart();
  46.     chart.dataProvider = chartData;
  47.     chart.categoryField = "year";
  48.     chart.marginLeft = 47;
  49.     chart.marginTop = 30;
  50.     chart.plotAreaBorderAlpha = 0.2;
  51.     chart.rotate = true; */
  52.  
  53.     var graph = new AmCharts.AmGraph();
  54.     graph.title = '<liferay-ui:message key="name.cpp" />';
  55.     //graph.labelText="[[value]]";
  56.     graph.valueField = '<liferay-ui:message key="name.cpp" />';
  57.     graph.type = "column";
  58.     graph.lineAlpha = 0;
  59.     graph.fillAlphas = 1;
  60.     graph.lineColor = "#A0522D";
  61.     chart.addGraph(graph);
  62.  
  63.     var graph = new AmCharts.AmGraph();
  64.     graph.title = '<liferay-ui:message key="name.oas" />';
  65.     //graph.labelText="[[value]]";
  66.     graph.valueField = '<liferay-ui:message key="name.oas" />';
  67.     graph.type = "column";
  68.     graph.lineAlpha = 0;
  69.     graph.fillAlphas = 1;
  70.     graph.lineColor = "#32CD32";
  71.     chart.addGraph(graph);
  72.  
  73.     var graph = new AmCharts.AmGraph();
  74.     graph.title = '<liferay-ui:message key="name.bb" />';
  75.     //graph.labelText="[[value]]";
  76.     graph.valueField = '<liferay-ui:message key="name.bb" />';
  77.     graph.type = "column";
  78.     graph.lineAlpha = 0;
  79.     graph.fillAlphas = 1;
  80.     graph.lineColor = "#483D8B";
  81.     chart.addGraph(graph);
  82.  
  83.     var graph = new AmCharts.AmGraph();
  84.     graph.title = '<liferay-ui:message key="name.psp" />';
  85.     //graph.labelText="[[value]]";
  86.     graph.valueField = '<liferay-ui:message key="name.psp" />';
  87.     graph.type = "column";
  88.     graph.lineAlpha = 0;
  89.     graph.fillAlphas = 1;
  90.     graph.lineColor = "#F4E23B";
  91.     chart.addGraph(graph);
  92.  
  93.     var graph = new AmCharts.AmGraph();
  94.     graph.title = '<liferay-ui:message key="name.pcp" />';
  95.     //graph.labelText="[[value]]";
  96.     graph.valueField = '<liferay-ui:message key="name.pcp" />';
  97.     graph.type = "column";
  98.     graph.lineAlpha = 0;
  99.     graph.fillAlphas = 1;
  100.     graph.lineColor = "#006400";
  101.     chart.addGraph(graph);
  102.  
  103.     var valAxis = new AmCharts.ValueAxis();
  104.     valAxis.stackType = "regular";
  105.     valAxis.gridAlpha = 0.1;
  106.     valAxis.axisAlpha = 0;
  107.     chart.addValueAxis(valAxis);
  108.  
  109.     var catAxis = chart.categoryAxis;
  110.     catAxis.gridAlpha = 0.1;
  111.     catAxis.axisAlpha = 0;
  112.     catAxis.gridPosition = "start";
  113.  
  114.     var legend = new AmCharts.AmLegend();
  115.     legend.reversedOrder = true;
  116.     legend.position = "right";
  117.     legend.borderAlpha = 0.2;
  118.     legend.horizontalGap = 10;
  119.     legend.switchType = "v";
  120.     chart.addLegend(legend);
  121.  
  122.     chart.write("chartdiv");
  123. }
  124.        
  125. function setType() {
  126.     if (document.getElementById("rb1").checked) {
  127.         chart.rotate = true;
  128.     } else {
  129.         chart.rotate = false;
  130.     }
  131.     chart.validateNow();
  132. }
  133.        
  134. <body style="background-color: #EEEEEE">
  135. <div id="chartdiv" style="width: 100%; height: 400px;"></div>
  136. <input type="radio" checked="true" name="group" id="rb1" onclick="setType()">
  137. bars
  138. <input type="radio" name="group" id="rb2" onclick="setType()"> columns
  139.   </body>
create a new version of this paste RAW Paste Data