Code:
$(document).ready(function () {
$('#usageResources').jqChart({
width : '100%',
height: '250px',
border: {
strokeStyle: 'red', // border line color
lineWidth: 0, // border line width
lineCap: 'butt', // butt | round | square
lineJoin: 'miter', // round | bevel | miter
miterLimit: 0,
cornerRadius: 0, // border corner radius
padding: 10 // border padding
},
axes: [{
type: 'linear',
location: 'left',
minimum: 0,
maximum: 100,
interval: 10
}],
legend:
{
location: 'bottom',
customItems: [{
text: 'Memória',
marker: { /*visible: false,*/ fillStyle: 'green' }
},
{
text: { text: 'Processador'/*, fillStyle: 'blue'*/ },
marker: { fillStyle: 'blue' }
}]
},
series: [{
title: 'kkk',
type: 'column',
data: [['Memoria', Math.floor((Math.random() * (100-1+1))+1)], ['Processador', Math.floor((Math.random() * (100-1+1))+1)]]
}]
});
chart1Update();
});
function chart1Update()
{
// get current series
var series_ = $('#usageResources').jqChart('option', 'series');
// get the data from the first series
var data_ = series_[0].data;
data_[1] = Math.floor((Math.random() * (100-0+1))+0);
data_[0] = Math.floor((Math.random() * (100-0+1))+0);
// update (redraw) the chart
$('#usageResources').jqChart('update');
setTimeout( 'chart1Update()', 3000 );
}
Code:<div id="usageResources"></div>
I want to change the color of the first column to identify according to the legend.
A column (the first) represents the memory, and should be green, as in the legend.
The second column represents the processor, and can go blue, as it is.
I'm using a single number to represent the two values, because the layout is better. If it comes to use two series, the columns would be glued to each other, and thus is not good.
Or change the color of the column of the same series, or able to separate the columns of different series.