Skip to main content

Create a Bar Chart by Click and Drag Event

1 reply [Last post]
soumyasaha
Offline
Joined: 2008-07-07
Points: 0

Hi,

Is their a way to plot a chart in jMaki by Clicking on a point on the X-axis and dragging it upwards. I tried the jmaki.charting.plotkit.area but it just provides me an event on the existing chart.

Please let me know if I can use any of the jMaki features to achieve this.

Thanks
Soumya

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
gmurray71
Offline
Joined: 2003-07-31
Points: 0

Hi,

With the existing charts you can add a marker at a given point and then associate an event with it as can be seen here:

http://jmaki.com/charting/plotkit/markers.php

Describing the chart will be like this as a value (note the markers):

{
xAxis : {
labels : [{ label : 'January'},
{ label : 'February'},
{ label : 'March'},
{ label : 'April'},
{ label : 'May'},
{ label : 'June'},
{ label : 'July'},
{ label : 'August'},
{ label : 'September'},
{ label : 'October'},
{ label : 'November'},
{ label : 'December'}
]
},
yAxis : {
labels : [{ label : '0', value : 0},
{ label : '10s', value : 10},
{ label : '20s', value : 20},
{ label : '30s', value : 30},
{ label : '40s', value : 40},
{ label : '50s', value : 50}
]
},

markers : [
{ targetId : 'gray', label : 'I am {value}', index : 5},
{ targetId : 'gray', label : 'I am {value}', index : 6},
{ targetId : 'gray', label : 'I am {value}', index : 8}
],
data : [
{ id : 'gray', label : 'Gray Series', values : [25, 45, 25, 45, 50, 25, 35, 25, 25, 20, 35, 45] },
{label : 'Pink Series', values : [20, 40, 30, 35, 45, 20, 25, 15, 20, 25, 30, 40] },
{label : 'Blue Series', values : [15, 35, 15, 40, 30, 15, 20, 10, 15, 20, 30, 35] },
{label : 'Red Series', values : [10, 25, 10, 5, 20, 5, 15, 5, 10, 15, 25, 30] }

]
}

You can associate jMaki Actions to any individual marker to generate any event you like or register to the generic event using something like:

jmaki.subscribe("/jmaki/charting/plotkit/area/onClick", function(args) {
jmaki.debug = true;
jmaki.log("We have an event on " + args.targetId);
jmaki.debug = false;
});

I am currently working on integrating Flot Charts which provide zooming, point clicking, and selection in a similar way you can get an idea of this library here:

http://people.iola.dk/olau/flot/examples/

I plan on adding the same marker support on these charts. If you want to work with me on testing / features please let me know ( gmurray71(a)dev.java.net ).

-g