How to change shortcut on horizontal jqplot histogram

Question

I use jqplot to create a stacked horizontal bar chart using the code given here:

perc_data = [[[6, "1"]], [[92, "1"]], [[1, "1"]], [[1, "1"]]]; series_array = [ { label: "Mud", color: "#ccaa00"}, { label: "Sand", color: "#ffeecc"}, { label: "Gravel", color: "#dddddd"}, { label: "Rock", color: "#664400"} ]; var perc_chart = $.jqplot('perc_div', perc_data, { stackSeries: true, seriesDefaults: { renderer:$.jqplot.BarRenderer, shadowAngle: 135, rendererOptions: { barWidth: 25, barDirection: 'horizontal', } }, series: series_array, axes: { yaxis: { renderer: $.jqplot.CategoryAxisRenderer, rendererOptions: { tickRenderer: $.jqplot.AxisTickRenderer, tickOptions: { mark: null, fontSize: 12 } } }, xaxis: { min: 0, max: 100, numberTicks: 6 } }, grid: { drawGridlines: false, drawBorder: false, shadow: false } }); 

The resulting histogram is as follows:

What I would like to do next is change the panel shortcut from "1" to "My shortcut." I would think that I could just change perc_data from its original value to the following:

 perc_data = [[[6, "My Label"]], [[92, "My Label"]], [[1, "My Label"]], [[1, "My Label"]]]; 

But this leads to an empty histogram:

Can someone please tell me what I am doing wrong and how I can customize this shortcut.

Thanks.

Answer 1

Use the ticks parameter (second example on this page) :

 perc_data = [[[6, "1"]], [[92, "1"]], [[1, "1"]], [[1, "1"]]]; ticks = ["My Label"]; series_array = [ { label:'Mud', color:"#ccaa00"}, { label:"Sand", color:"#ffeecc"}, { label:"Gravel", color:"#dddddd"}, { label:"Rock", color:"#664400"} ]; var perc_chart = $.jqplot('chart1', perc_data, { stackSeries: true, seriesDefaults: { renderer:$.jqplot.BarRenderer, shadowAngle: 135, rendererOptions: { barWidth: 25, barDirection: 'horizontal', } }, series: series_array, axes: { yaxis: { renderer: $.jqplot.CategoryAxisRenderer, rendererOptions: { tickRenderer: $.jqplot.AxisTickRenderer, tickOptions: { mark: null, fontSize: 12 } }, ticks: ticks }, xaxis: { min: 0, max: 100, numberTicks: 6 } }, grid: { drawGridlines: false, drawBorder: false, shadow: false } }); 

BTW, { label="Mud", color="#ccaa00"} invalid javascript must be { label:"Mud", color:"#ccaa00"}