Scales and grouping
To update configuration properties after grouping you need to call define() method with new settings.
To update configuration properties after grouping you need to call define() method with new settings.
<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script> <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css"> <script src="../common/companies.js"></script> <script></script> <div id="chart_container" style="width:600px;height:250px;border:1px solid #A4BED4;"></div> <br/> <input type="button" name="some_name" value="Group by" onclick="window['group'+document.getElementById('groupby').value]()"> <select name="groupby" id="groupby"> <option value="A">company</option> <option value="B" SELECTED>year (total sales)</option> <option value="C">year (max sales)</option> </select> <br/><br/> <input type="button" name="some_name" value="Sort by sales" onclick="sort(document.getElementById('dir').value)"> <select name="dir" id="dir"> <option value="asc" selected>asc</option> <option value="desc" >desc</option> </select>var barChart; window.onload = function() { barChart = new dhtmlXChart({ view: "bar", container: "chart_container", value: "#sales#", preset: "alpha", yAxis: {}, xAxis: { template: "#id#"; }, label: "#sales#", sort: { by: "#id#", as: "string", dir: "asc"; }, group: { by: "#year#", map: { sales: ["#sales#", "sum"] } } }); barChart.parse(data, "json"); } function groupA() { barChart.group({ by: "#company#", map: { sales: ["#sales#", "sum"] } }); } function groupB() { barChart.group({ by: "#year#", map: { sales: ["#sales#", "sum"] } }); } function groupC() { barChart.group({ by: "#year#", map: { sales: ["#sales#", "max"] } }); } function sort(direction) { barChart.define("sort", { by: "#sales#", dir: direction, as: "int"; }); barChart.render(); }