Custom Drawing Menu and Colors


If your implementation can not leverage the sample menu templates included in your package and requires a totally custom interface for managing the drawing tools, This article is for you.

Before a drawing tool is be activated, its settings (line color, fill color, font, line style, line width, etc.) can defined to conform to your desired defaults or user configurable settings. All of the parameters for drawings can be found in stxx.currentVectorParameters.

If you will be allowing users to manipulate drawing settings, you can create menus and interactive interfaces to collect each one of the parameters and finally set the currentVectorParameters object accordingly and activate the drawing type.

See STXChart.currentVectorParameters in stx.js for sample template for the parameters object.

See 'Classes' in STX.Drawing for available drawings.

To activate a specific drawing tool you can simply call STXChart#changeVectorType :


The user will be able to render as many drawings as desired on the canvas until the drawing toll is deactivated.

To deactivate drawing mode , set the Vector Type to blank (''), like so:


To clear all the drawings form the chart canvas call :


So, for example, to activate rectangles you would do this:

// set your menu to ask the user for the line style, line width, line color and fill color stxx.currentVectorParameters={ pattern:"dashed", lineWidth:2, fillColor:"pink", currentColor: "red" }

// then activate the drawing tool for the user. stxx.changeVectorType('rectangle');

Changing default Colors in built in color picker.

If you are interested in customizing the the default colors for each one of your drawings, taking into account the active color scheme, you can override the STX.DrawingToolbar.prototype.setLineColor() function.

Here is an example that sets the line colors to yellow in the dark (#FFFFFF)theme.

The light theme would have a defaultColor of #000000.

All of the active drawing parameters can be found in stx.currentVectorParameters. stx.currentVectorParameters.vectorType, for example, indicates what type of drawing is currently active.

STX.DrawingToolbar.prototype.setLineColor=function(stx){ var lineColorPicker=$$$(".stxLineColorPicker", this.htmlElement); if(this.stx.currentVectorParameters.currentColor=="transparent"){ if (stx.defaultColor == '#FFFFFF') {'yellow'; this.stx.currentVectorParameters.currentColor='yellow'; } else; }else{; } };

You can add this to your main HTML file, overriding the default function.

Disabling drawing selection after every rendering.

By default the drawing tool-bar will remember the selected type and users will be able render many drawings at a time until they explicitly turn it off. This may not be your preference and instead you may want to reset after every drawing so the user can carry on to something else without having to manually turn off the drawing tool-bar.

To do this simply reset the drawing to none (STX.DrawingToolbar.setDrawingType ) and turn off the cross-hairs ( STX.DrawingToolbar.setCrosshairs ) in the changeCallback function.

Here is the actual code you will need:

stxx.changeCallback=function(stxx, change){
    if(change=="layout") {
        if(intervalDisplayMap[stxx.layout.interval]) $$$("#periodBtn").replaceChild(STX.translatableTextNode(stxx,intervalDisplayMap[stxx.layout.interval]),$$$("#periodBtn").childNodes[0]);
    if(change=="vector") {
        STX.DrawingToolbar.setCrosshairs(false, $$$(".stx-toolbar"));