Search code examples
d3.jschartsdimple.js

dimple.js Cannot Fix these issues


I have some needs in dimple js and i cannot find anything related to my query anywhere. I made a simple bar chart but the values are arranged in ascending order and Y Axis Labels are hiding and the values are converted as 1k,2k.

Please help me to fix these 3 issues:

  1. To Stop sorting the data in ascending order
  2. To Shorten the labels in Y axis
  3. To Show the exact value as in json and not convert it to 1k,2k

     var data = [
                    {
                        "Service" : "Primary Services" ,
                        "Total Services" : "10065"
                    } ,
                    {
                        "Service" : "PCP" ,
                        "Total Services" : "851"
                    } ,
                    {
                        "Service" : "scientist" ,
                        "Total Services" : "8818"
    
                } ,
                {
                    "Service" : "NP/PA/CNS" ,
                    "Total Services" : "5854"
                } ,
                {
                    "Service" : "FQHC/RHC" ,
                    "Total Services" : "8574"
    
                }
    
            ];
    
    
    var svg = dimple.newSvg("#types-of-services", 500, 300);
    
     var myChart = new dimple.chart(svg, data);
    
    
    
    // Set bounds
    myChart.setBounds(0, 0, "5%", "5%")
    
    myChart.setMargins("75px", "0px", "20px", "50px");
    
    var x = myChart.addMeasureAxis("x", "Total Services");
    
    var y = myChart.addCategoryAxis("y", "Service");
    
     myChart.addSeries(null, dimple.plot.bar);
    
    
    x.fontSize = "12";
    y.fontSize = "12";
    
    x.fontFamily = "Roboto";
    y.fontFamily = "Roboto";
    
    myChart.draw(1700);
    
    x.titleShape.remove();
    
    $(window).on('resize', resize);
    $('.sidebar-control').on('click', resize);
    
    function resize() {
    
    
        myChart.draw(0, true);
    
    
        x.titleShape.remove();
    }
    

Solution

  • Measure Axis will Sort, Display as 1K, 2K etc., Use category axis instead...

    // var x = myChart.addMeasureAxis("x", "Total Services");
    var x = myChart.addCategoryAxis("x", "Total Services");