Is it possible to create overlapping Bar Chart with several axes

[luna2761]

Is there an option to create charts, where there are two bars near each other that are overlapped by the third one?

thank you.

[FVANCOP]

Yes, but not so simple. You have to use the Add-ins/shapesInChart.html (see - https://github.com/FVANCOP/ChartNew.js/wiki/900_050_Shapes-Text-Images_In_Chart)

See new Samples/third_bar.html.

[luna2761]

Thank you for your response. Looks great, however I wonder if it is possible to create such chart, when all 3 bars are taken from an array, not drawn. First 2 should respond to the left axis, and third overlapped to the right axis. Is it possible?

Thank you.

[FVANCOP]

Theoritically, it is not possible : shapes drawn with the "shapesInChart.js" add-ins always respond to the left axis.

However, if you fix yourself the values of the right and left axis (*), you could convert the value of the third bars to the scale of the first axis... It seems complicate to setup but I suppose that it should be possible.

(*) with options : scaleOverride, scaleStartValue, scaleStepWidth, scaleOverride2, scaleStartValue2 and scaleStepWidth2 (https://github.com/FVANCOP/ChartNew.js/wiki/100_030_Axis#scalesteps)

[luna2761]

Thank you, Actually, I can just turn drawn axes vice versa). Several questions:

1. Is there property like inGraphDataShow for these drawn shapes?
2. And is there opportunity to have custom inGraphData for these drawn shapes? With inGraphDataTmpl.

Thank you once more.

[FVANCOP]

I have updated (completely changed) the code of Samples\third_bar.html. In this new code, all your requirements (and even more) are met :

• a bar over the other ones (even more than 2 bars if you want),
• the "over bars" is associated to the right axis; other bars are associated to the left axis;
• the value of the "over" bar is displayed on top of the bar (but you can put other text if you want).

BUT : to create it, I had to change a little bit the code; This new code is not yet the official version of ChartNew.js. Temporarely, you can access to this new code with following link : https://github.com/FVANCOP/ChartNew.js/tree/legend_addins

Result of the new "third_bar.html" :

[luna2761]

This is fantastic! Thank you very much! Everything works great!

P.S. Small question: where can I manage space between bars within one column (like here - distance between three bars in a set)?

[FVANCOP]

Use option barDatasetSpacing and/or option barValueSpacing .

https://github.com/FVANCOP/ChartNew.js/wiki/100_070_Charts_Layout#bardatasetspacing

Remark : Personnaly, I don't like bars over other ones; I prefer a line instead.

    var mydata1 = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
    {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        data : [95,53,99,,73,27,82],
        axis : 1,
            title : "2012"
    },
    {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,1)",
        data : [35,43,59,,31,50,66],
        axis : 1,
            title : "2013"
    },
    {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        data : [58,47,124,41,67,91,115],
        axis : 1,
            title : "2014"
    },
    {
                strokeColor : "rgba(220,0,220,0.50)",
        data : [210,80,145,187,64,99,157],
                    type : "Line",
        axis : 2,
        title : "Third bar"         
    }
]
    }               

[luna2761]

Thank you very much! Will be waiting for new library release).