Set Color dynamically on xAxis Label

[David Ramseier]

Dear all,

I'm new on jqPlot and have a small issue.

I create various Bar Charts dynamically from my DB - which works like a charm.

The Bar Chart shows the statuses of filled questionnaires and their number...

Example: 15 Open, 20 Draft, 5 Final

Example2: 5 Open, 25 Draft

Example3: 12 Mail Sent, 5 Draft, 10 Final

Now I would like to assign a color on the status value (Open / Mail Sent / Draft / Final)...

Has anyone an idea how to do this ?

Best regards,

David

[kat...@home.albury.net.au]

Can you post the relevant section of generated code or a sample url please David?

It should be doable with CSS.

Cheers,
KathyW.

> --
> You received this message because you are subscribed to the Google Groups "jqplot-users" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to jqplot-users...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/jqplot-users/948b7d20-8897-4061-b22b-807873a3b875n%40googlegroups.com.

[David Ramseier]

Hello

KathyW.

This is actually what I get as a result ...

<table id="COChart"><tbody><tr>
<td><div id="chartdiv_1" style="height: 200px; width: 300px; position: relative;" class="jqplot-target"><canvas width="300" height="200" class="jqplot-base-canvas" style="position: absolute; left: 0px; top: 0px; width: 300px; height: 200px;"></canvas><div class="jqplot-title" style="position: absolute; top: 0px; left: 0px; width: 300px; text-align: center;">Application Questionnaire</div><div class="jqplot-axis jqplot-xaxis" style="position: absolute; width: 300px; height: 11px; left: 0px; bottom: 0px;"><div class="jqplot-xaxis-tick" style="position: absolute; left: 73.7734px;">Draft</div><div class="jqplot-xaxis-tick" style="position: absolute; left: 212.094px;">Final</div></div><div class="jqplot-axis jqplot-yaxis" style="position: absolute; height: 200px; width: 4.32812px; left: 0px; top: 0px;"><div class="jqplot-yaxis-tick" style="position: absolute; top: 173.5px;">0</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 156.344px;">1</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 139.188px;">2</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 122.031px;">3</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 104.875px;">4</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 87.7188px;">5</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 70.5625px;">6</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 53.4063px;">7</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 36.25px;">8</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 19.0938px;">9</div></div><canvas width="300" height="200" class="jqplot-grid-canvas" style="position: absolute; left: 0px; top: 0px; width: 300px; height: 200px;"></canvas><canvas width="275" height="154" class="jqplot-series-shadowCanvas" style="position: absolute; left: 14.3125px; top: 24.5938px; width: 275px; height: 154px;"></canvas><canvas width="275" height="154" class="jqplot-series-canvas" style="position: absolute; left: 14.3125px; top: 24.5938px; width: 275px; height: 154px;"></canvas><canvas width="275" height="154" class="jqplot-barRenderer-highlight-canvas" style="position: absolute; left: 14.3125px; top: 24.5938px; width: 275px; height: 154px;"></canvas><canvas width="275" height="154" class="jqplot-event-canvas" style="position: absolute; left: 14.3125px; top: 24.5938px; width: 275px; height: 154px;"></canvas></div></td>
<script>  
jQuery(document).ready(function() {
    $('#chartdiv_1').jqplot([[['Draft',1],['Final',1]]], {
        title:'Application Questionnaire',
        // Provide a custom seriesColors array to override the default colors.
        // seriesColors:['orange', 'green', 'blue', 'gray', 'red'],
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
rendererOptions: {
                // Set varyBarColor to tru to use the custom colors on the bars.
                varyBarColor: true
            }
        },
        axes:{
            xaxis:{
renderer: $.jqplot.CategoryAxisRenderer
            },
yaxis:{
min: 0,
max: 9,
tickInterval: 1,
tickOptions: {
formatString: '%d'
}
}
        }
    });
});
</script>
<td><div id="chartdiv_2" style="height: 200px; width: 300px; position: relative;" class="jqplot-target"><canvas width="300" height="200" class="jqplot-base-canvas" style="position: absolute; left: 0px; top: 0px; width: 300px; height: 200px;"></canvas><div class="jqplot-title" style="position: absolute; top: 0px; left: 0px; width: 300px; text-align: center;">Server Questionnaire</div><div class="jqplot-axis jqplot-xaxis" style="position: absolute; width: 300px; height: 11px; left: 0px; bottom: 0px;"><div class="jqplot-xaxis-tick" style="position: absolute; left: 50.7995px;">Draft</div><div class="jqplot-xaxis-tick" style="position: absolute; left: 143.172px;">Final</div><div class="jqplot-xaxis-tick" style="position: absolute; left: 234.466px;">Open</div></div><div class="jqplot-axis jqplot-yaxis" style="position: absolute; height: 200px; width: 4.32812px; left: 0px; top: 0px;"><div class="jqplot-yaxis-tick" style="position: absolute; top: 173.5px;">0</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 156.344px;">1</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 139.188px;">2</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 122.031px;">3</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 104.875px;">4</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 87.7188px;">5</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 70.5625px;">6</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 53.4063px;">7</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 36.25px;">8</div><div class="jqplot-yaxis-tick" style="position: absolute; top: 19.0938px;">9</div></div><canvas width="300" height="200" class="jqplot-grid-canvas" style="position: absolute; left: 0px; top: 0px; width: 300px; height: 200px;"></canvas><canvas width="275" height="154" class="jqplot-series-shadowCanvas" style="position: absolute; left: 14.3125px; top: 24.5938px; width: 275px; height: 154px;"></canvas><canvas width="275" height="154" class="jqplot-series-canvas" style="position: absolute; left: 14.3125px; top: 24.5938px; width: 275px; height: 154px;"></canvas><canvas width="275" height="154" class="jqplot-barRenderer-highlight-canvas" style="position: absolute; left: 14.3125px; top: 24.5938px; width: 275px; height: 154px;"></canvas><canvas width="275" height="154" class="jqplot-event-canvas" style="position: absolute; left: 14.3125px; top: 24.5938px; width: 275px; height: 154px;"></canvas></div></td>
<script>  
jQuery(document).ready(function() {
    $('#chartdiv_2').jqplot([[['Draft',2],['Final',1],['Open',9]]], {
        title:'Server Questionnaire',
        // Provide a custom seriesColors array to override the default colors.
        // seriesColors:['orange', 'green', 'blue', 'gray', 'red'],
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
rendererOptions: {
                // Set varyBarColor to tru to use the custom colors on the bars.
                varyBarColor: true
            }
        },
        axes:{
            xaxis:{
renderer: $.jqplot.CategoryAxisRenderer
            },
yaxis:{
min: 0,
max: 9,
tickInterval: 1,
tickOptions: {
formatString: '%d'
}
}
        }
    });
});
</script>
</tr></tbody></table>

You received this message because you are subscribed to a topic in the Google Groups "jqplot-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jqplot-users/B-CIluYxw4Q/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jqplot-users...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jqplot-users/F804CC9E-CBF6-4988-A494-7EE50B9B11D2%40home.albury.net.au.

[kat...@home.albury.net.au]

Hi David.

You have the seriesColors commented out. Or do they not give you the colours you are after?

KathyW.

[David Ramseier]

Hello Kathy,

I just found a way server side :-) I'm creating the seriesColors dynamically in my code and it works !

Thank you so much!

Best regards,

David

--
You received this message because you are subscribed to a topic in the Google Groups "jqplot-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jqplot-users/B-CIluYxw4Q/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jqplot-users...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/jqplot-users/20E23DF3-5971-4528-85C5-937291C40A61%40home.albury.net.au.