SaveText.Ru

Column and Pie chart
  1. <!doctype html>
  2.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3.     <style>
  4.         #container {
  5.             border: 1px solid;
  6.             width: 800px;
  7.             height: 600px;
  8.         }
  9.     </style>
  10.     <!--Non Compiled JS-->
  11.     <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script>
  12.     <script src="../src/migrationTool.js"></script>
  13.     <script>
  14.         var v6confColumn =
  15.             '<anychart>' +
  16.             '<settings>' +
  17.             '<animation enabled="True" />' +
  18.             '<image_export file_name="Регистрация недвижимости ДЮ / Количество принятых заявок по областям" use_title_as_file_name="true" url="http://localhost:8080/png-saver/AnyChartPNGSaver.jsp" />' +
  19.             '</settings>' +
  20.             '<charts>' +
  21.             '<chart plot_type="CategorizedVertical">' +
  22.             '<data_plot_settings default_series_type="Bar">' +
  23.             '<bar_series point_padding="0.2" group_padding="1">' +
  24.             '<tooltip_settings enabled="True">' +
  25.             '<format>{%YValue}{numDecimals:0,thousandsSeparator: }</format>' +
  26.             '</tooltip_settings>' +
  27.             '<label_settings enabled="true">' +
  28.             '<font color="#777777"/>' +
  29.             '<background enabled="false"/>' +
  30.             '<format>{%YValue}{numDecimals:0,thousandsSeparator: }</format>' +
  31.             '</label_settings>' +
  32.             '</bar_series>' +
  33.             '</data_plot_settings>' +
  34.             '<chart_settings>' +
  35.             '<title enabled="true">' +
  36.             '<text>Регистрация недвижимости ДЮ / Количество принятых заявок по областям</text>' +
  37.             '</title>' +
  38.             '<axes>' +
  39.             '<y_axis>' +
  40.             '<title enabled="true">' +
  41.             '<text>Количество</text>' +
  42.             '</title>' +
  43.             '<labels>' +
  44.             '<format>{%Value}{numDecimals:0,thousandsSeparator: }</format>' +
  45.             '</labels>' +
  46.             '</y_axis>' +
  47.             '<x_axis>' +
  48.             '<title enabled="true">' +
  49.             '<text>Области</text>' +
  50.             '</title>' +
  51.             '</x_axis>' +
  52.             '</axes>' +
  53.             '</chart_settings>' +
  54.             '<data>' +
  55.             '<series name="">' +
  56.             '<point x="АКТ" y="862">' +
  57.             '<actions>' +
  58.             '<action type="navigateToURL" url="/sk/charts/jsf/rn/rnAllRayon.seam?map=D&amp;fromDate=01.10.2012&amp;toDate=31.10.2012&amp;servicesId=all&amp;orgType=du" target="_self" />' +
  59.             '</actions>' +
  60.             '</point>' +
  61.             '<point x="КЗЛ" y="1191">' +
  62.             '<actions>' +
  63.             '<action type="navigateToURL" url="/sk/charts/jsf/rn/rnAllRayon.seam?map=N&amp;fromDate=01.10.2012&amp;toDate=31.10.2012&amp;servicesId=all&amp;orgType=du" target="_self" />' +
  64.             '</actions>' +
  65.             '</point>' +
  66.             '<point x="ЖМБ" y="3518">' +
  67.             '<actions>' +
  68.             '<action type="navigateToURL" url="/sk/charts/jsf/rn/rnAllRayon.seam?map=H&amp;fromDate=01.10.2012&amp;toDate=31.10.2012&amp;servicesId=all&amp;orgType=du" target="_self" />' +
  69.             '</actions>' +
  70.             '</point>' +
  71.             '<point x="ЮКО" y="5948">' +
  72.             '<actions>' +
  73.             '<action type="navigateToURL" url="/sk/charts/jsf/rn/rnAllRayon.seam?map=X&amp;fromDate=01.10.2012&amp;toDate=31.10.2012&amp;servicesId=all&amp;orgType=du" target="_self" />' +
  74.             '</actions>' +
  75.             '</point>' +
  76.             '<point x="АСТ" y="9354">' +
  77.             '<actions>' +
  78.             '<action type="navigateToURL" url="/sk/charts/jsf/rn/rnAllUsers.seam?parentMap=Z&amp;map=&amp;fromDate=01.10.2012&amp;toDate=31.10.2012&amp;servicesId=all&amp;orgType=du" target="_self" />' +
  79.             '</actions>' +
  80.             '</point>' +
  81.             '<point x="АЛМ" y="12090">' +
  82.             '<actions>' +
  83.             '<action type="navigateToURL" url="/sk/charts/jsf/rn/rnAllUsers.seam?parentMap=A&amp;map=&amp;fromDate=01.10.2012&amp;toDate=31.10.2012&amp;servicesId=all&amp;orgType=du" target="_self" />' +
  84.             '</actions>' +
  85.             '</point>' +
  86.             '<point x="ВКО" y="12106">' +
  87.             '<actions>' +
  88.             '<action type="navigateToURL" url="/sk/charts/jsf/rn/rnAllRayon.seam?map=F&amp;fromDate=01.10.2012&amp;toDate=31.10.2012&amp;servicesId=all&amp;orgType=du" target="_self" />' +
  89.             '</actions>' +
  90.             '</point>' +
  91.             '<point x="АЛМ о" y="14974">' +
  92.             '<actions>' +
  93.             '<action type="navigateToURL" url="/sk/charts/jsf/rn/rnAllRayon.seam?map=B&amp;fromDate=01.10.2012&amp;toDate=31.10.2012&amp;servicesId=all&amp;orgType=du" target="_self" />' +
  94.             '</actions>' +
  95.             '</point>' +
  96.             '</series>' +
  97.             '</data>' +
  98.             '</chart>' +
  99.             '</charts>' +
  100.             '</anychart>';
  101.  
  102.         var v6confPie =
  103.             '<anychart>' +
  104.             '<settings>' +
  105.             '<animation enabled="True" />' +
  106.             '<image_export file_name="Информация по экспертизе проектов актов Главы государства и Правительства Республики Казахстан - Департамент подзаконных актов" use_title_as_file_name="true" url="http://localhost:8080/png-saver/AnyChartPNGSaver.jsp" />' +
  107.             '</settings>' +
  108.             '<margin all="0"/>' +
  109.             '<charts>' +
  110.             '<chart plot_type="Pie">' +
  111.             '<data_plot_settings>' +
  112.             '<pie_series>' +
  113.             '<tooltip_settings enabled="true">' +
  114.             '<format>{%Name} {%YValue}{numDecimals:0,thousandsSeparator: }({%YPercentOfSeries}{numDecimals: 2}%)</format>' +
  115.             '</tooltip_settings>' +
  116.             '<label_settings enabled="true" mode="Outside" multi_line_align="Center">' +
  117.             '<font color="Black"></font>' +
  118.             '<background enabled="false"/>' +
  119.             '<position anchor="Center" valign="Center" halign="Center" padding="20" />' +
  120.             '<format>{%Name} {%Value}{numDecimals:0} ({%YPercentOfSeries}{numDecimals:2}%)</format>' +
  121.             '</label_settings>' +
  122.             '<connector enabled="True" color="Black" opacity="1" thickness="1"/>' +
  123.             '</pie_series>' +
  124.             '</data_plot_settings>' +
  125.             '<chart_settings>' +
  126.             '<chart_background enabled="True">' +
  127.             '<border enabled="False"></border>' +
  128.             '<fill enabled="True" type="Solid" opacity="1" color="#EEEEEE"></fill>' +
  129.             '<corners type="Square" />' +
  130.             '</chart_background>' +
  131.             '<data_plot_background enabled="True">' +
  132.             '<border enabled="False" thickness="1" type="Solid" color="White" opacity="1"></border>' +
  133.             '<fill enabled="True" type="Solid" opacity="1" color="#EEEEEE"></fill>' +
  134.             '</data_plot_background>' +
  135.             '<title>' +
  136.             '<font color="Black" size="13"></font>' +
  137.             '<text>Информация по экспертизе проектов актов Главы государства и Правительства Республики Казахстан - Департамент подзаконных актов</text>' +
  138.             '</title>' +
  139.             '<legend enabled="False"></legend>' +
  140.             '</chart_settings>' +
  141.             '<data>' +
  142.             '<series name="" type="Pie">' +
  143.             '<tooltip enabled="true" />' +
  144.             '<point name="Аппарат акима Актюбинской области" y="3">' +
  145.             '<actions>' +
  146.             '<action type="navigateToURL" url="departmentProjectsList.seam?goId=1016" target="_self" />' +
  147.             '</actions>' +
  148.             '</point>' +
  149.             '<point name="Аппарат акима Жамбылской области" y="1">' +
  150.             '<actions>' +
  151.             '<action type="navigateToURL" url="departmentProjectsList.seam?goId=1116" target="_self" />' +
  152.             '</actions>' +
  153.             '</point>' +
  154.             '<point name="Национальный банк РК" y="7">' +
  155.             '<actions>' +
  156.             '<action type="navigateToURL" url="departmentProjectsList.seam?goId=915" target="_self" />' +
  157.             '</actions>' +
  158.             '</point>' +
  159.             '<point name="МОН" y="93">' +
  160.             '<actions>' +
  161.             '<action type="navigateToURL" url="departmentProjectsList.seam?goId=913" target="_self" />' +
  162.             '</actions>' +
  163.             '</point>' +
  164.             '<point name="Аппарат акима Акмолинской      области" y="3">' +
  165.             '<actions>' +
  166.             '<action type="navigateToURL" url="departmentProjectsList.seam?goId=1110" target="_self" />' +
  167.             '</actions>' +
  168.             '</point>' +
  169.             '<point name="Верховный суд РК" y="3">' +
  170.             '<actions>' +
  171.             '<action type="navigateToURL" url="departmentProjectsList.seam?goId=1011" target="_self" />' +
  172.             '</actions>' +
  173.             '</point>' +
  174.             '<point name="МТСЗ" y="20">' +
  175.             '<actions>' +
  176.             '<action type="navigateToURL" url="departmentProjectsList.seam?goId=1218" target="_self" />' +
  177.             '</actions>' +
  178.             '</point>' +
  179.             '<point name="МФ" y="71">' +
  180.             '<actions>' +
  181.             '<action type="navigateToURL" url="departmentProjectsList.seam?goId=910" target="_self" />' +
  182.             '</actions>' +
  183.             '</point>' +
  184.             '<point name="Аппарат акима Костанайской области" y="5">' +
  185.             '<actions>' +
  186.             '<action type="navigateToURL" url="departmentProjectsList.seam?goId=1114" target="_self" />' +
  187.             '</actions>' +
  188.             '</point>' +
  189.             '<point name="КНБ" y="21">' +
  190.             '<actions>' +
  191.             '<action type="navigateToURL" url="departmentProjectsList.seam?goId=1013" target="_self" />' +
  192.             '</actions>' +
  193.             '</point>' +
  194.             '<point name="МДРГО" y="11">' +
  195.             '<actions>' +
  196.             '<action type="navigateToURL" url="departmentProjectsList.seam?goId=1217" target="_self" />' +
  197.             '</actions>' +
  198.             '</point>' +
  199.             '<point name="АДГСиПК" y="11">' +
  200.             '<actions>' +
  201.             '<action type="navigateToURL" url="departmentProjectsList.seam?goId=1111" target="_self" />' +
  202.             '</actions>' +
  203.             '</point>' +
  204.             '<point name="Аппарат акима города Астаны" y="4">' +
  205.             '<actions>' +
  206.             '<action type="navigateToURL" url="departmentProjectsList.seam?goId=1117" target="_self" />' +
  207.             '</actions>' +
  208.             '</point>' +
  209.             '<point name="МЭ" y="43">' +
  210.             '<actions>' +
  211.             '<action type="navigateToURL" url="departmentProjectsList.seam?goId=919" target="_self" />' +
  212.             '</actions>' +
  213.             '</point>' +
  214.             '</series>' +
  215.             '</data>' +
  216.             '</chart>' +
  217.             '</charts>' +
  218.             '</anychart>';
  219.  
  220.         anychart.onDocumentReady(function() {
  221.             drawColumn();
  222.         });
  223.        
  224.         function drawColumn() {
  225.             document.getElementById("container").innerHTML = "";
  226.  
  227.             var v7conf = anychart.migrationTool.transformXml(v6confColumn);
  228.             //alert(JSON.stringify(v7conf));
  229.             var chart = anychart.fromJson(v7conf);
  230.             chart.container('container');
  231.             chart.draw();
  232.         }
  233.  
  234.         function drawPie() {
  235.             document.getElementById("container").innerHTML = "";
  236.  
  237.             var v7conf = anychart.migrationTool.transformXml(v6confPie, 'single');
  238.             //alert(JSON.stringify(v7conf));
  239.             var chart = anychart.fromJson(v7conf);
  240.             chart.startAngle(90);
  241.             chart.container('container');
  242.             chart.outsideLabelsCriticalAngle(80);
  243.             chart.labels()
  244.                 .width(200)
  245.                 .textWrap("byWord")
  246.                 .fontSize(10)
  247.                 .hAlign("center")
  248.                 .position('outside')
  249.                 .format("{%Name} {%Value}{numDecimals:0} ({%YPercentOfTotal}{numDecimals:2}%)");
  250.             chart.tooltip().format("{%Name} {%YValue}{numDecimals:0,thousandsSeparator: }({%YPercentOfTotal}{numDecimals: 2}%)");
  251.  
  252.             chart.draw();
  253.         }
  254.     </script>
  255. </head>
  256. <input type="button" value="Draw column" onclick="drawColumn()">
  257. <input type="button" value="Draw pie" onclick="drawPie()">
  258. <div id="container"></div>
  259. </body>
  260. </html>

Share with your friends:

Распечатать