SaveText.Ru

SaveText.Ru

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

Share with your friends:

Print