I'm using jqplot to create a stacked horizontal bar chart using the code shown 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 bar chart looks like this:
What I'd like to do next is change the label of the bar from '1' to 'My Label'. I would have thought I could simply 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 that results in an empty bar chart:
Can someone please tell me what I'm doing wrong and how I might tweak this label.
Thanks.
Use the ticks option (2nd 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"}
is not valid javascript should be { label:"Mud", color:"#ccaa00"}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.