search

nathfy / auto-table-to-chart

Automatically exported from code.google.com/p/auto-table-to-chart
0 stars 0 forks source link

Bar/Slice/Line colors #12

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
Perhaps it's obvious, but how does one specify colors to use?  With 3 sets of 
data on a bar chart, I'm getting red,blue, then red again (defaults I assume).

Original issue reported on code.google.com by gdpode...@gmail.com on 6 Nov 2011 at 3:29

Attachments:

GoogleCodeExporter commented 9 years ago 
Hi

I have the same issue. Did you manage to find a way to change the colours if 
there is more than two data sets?

Thanks

Original comment by peter.br...@gmail.com on 18 Jan 2012 at 3:38

GoogleCodeExporter commented 9 years ago 
OK. I have had a play around and hacked out a solution that works for me. I'm 
posting it here in case it helps someone else.

Cheers

Peter

A couple of points first:
------------------------

1: I only need this to work on a line chart with 4 lines of data (but I did get 
it working quite easily for the pie chart as well).

2: When I say hacked I mean hacked. This is an inelegant solution (but it works 
for me). A much better solution would be the ability to pass the colours in via 
the CSS file but I don't have time to work on that at present.

3: I've attached the hacked file but I made a lot of changes to the code when I 
was testing this and may have not put it all back correctly. It works for me 
but I'm only including it here in case the formatting gets screwed up on this 
post.

---------------------------------------------------------------------

All OK?
Good, Let's Go .....

1: Backup the attc.js file
2: Add the default colours

Around line 300 (ish) you should see all the default variables for the chart. 
Add your own to the list (I'm adding new colours for my lines);

    var flash_chart_y_grid='#E2E2E2';
    var flash_chart_y_axis='#000066';
    var flash_chart_x_axis='#F65327';
    var flash_chart_x_grid='#E2E2E2';
    var chart_type='bar';
/// new colours for my lines - and yes I know they are horrible 
    var flash_chart_col1='#02f02f';
    var flash_chart_col2='#93f93f';
    var flash_chart_col3='#c00c00';
    var flash_chart_col4='#fc0fc0';
/// new colours end  

3: About 25 lines below that you should see the "var pass_string=" line. you 
need to modify this to include the colours you just added.

//new colour variables added to list        
var 
pass_string=$(this).attr("id")+','+flash_chart_bg+','+flash_chart_y_grid+','+fla
sh_chart_y_axis+','+flash_chart_x_axis+','+flash_chart_x_grid+','+flash_chart_h+
','+flash_chart_w+','+chart_type+','+flash_chart_col1+','+flash_chart_col2+','+f
lash_chart_col3+','+flash_chart_col4;
//new colour variables added to list ends

4: Somewhere around line 160 you should see the flash_chart_data function. You 
need to include the new colours here as well as their position in the array - 
don't worry they just follow on from the others.

function flash_chart_data(passed_string){
    var re=new RegExp('[^0-9.]', "g");
    var passed_array=passed_string.split(',');
    var table_id=passed_array[0];
    var obj_setup={
        "bg_colour":passed_array[1],
        "y_grid_colour":passed_array[2],
        "y_axis_colour":passed_array[3],
        "x_axis_colour":passed_array[4],
        "x_grid_colour":passed_array[5],
        "graph_h":passed_array[6],
        "graph_w":passed_array[7],
        "chart_type":passed_array[8],
//new colours passed here       
        "col1":passed_array[9],
        "col2":passed_array[10],
        "col3":passed_array[11],
        "col4":passed_array[12],
//new colours passed here ends
        "predefined_steps":0

    };

5: Somewhere around line 90 you will see the code for alternative line colours. 
It looks like this: 

            for(x=0;x<array_values.length;x++){
                if(x % 2 == 0){
                   cl = obj_setup.x_axis_colour;
                }else{
                   cl = obj_setup.y_axis_colour;
                }

You want to replace this with your nice new colours for each line. Again I only 
want four lines each with own colours so I changed that to:

    for(x=0;x<array_values.length;x++){
// new colours added for line chart
                cl = obj_setup.y_axis_colour;
                if(x == 0){
                   cl = obj_setup.col1;
                }
                if(x == 1){
                   cl = obj_setup.col2;
                }
                if(x == 2){
                cl = obj_setup.col3;
                }

                if(x == 3){
                   cl = obj_setup.col4;
                }

// new colours added for line chart ends                
//////////////////////////////////////////////////////////

6:That's it really. But if you want to change the Pie Chart then up around line 
50 you should see this code:

obj_elements[0]={
          "type": graph_type,
          "values":array_values[0] ,
           "colours": [
            obj_setup.x_axis_colour,
            obj_setup.y_axis_colour
          ],
          "gradient-fill": true,
          "start-angle": 35,
          "values": array_pie
        };

Again, you will need to change the colours to your own like:

        obj_elements[0]={
          "type": graph_type,
          "values":array_values[0] ,
           "colours": [
                obj_setup.col1,
            obj_setup.col2,
            obj_setup.col3,
            obj_setup.col4

          ],
          "gradient-fill": true,
          "start-angle": 35,
          "values": array_pie
        };

Original comment by peter.br...@gmail.com on 19 Jan 2012 at 11:01

Attachments:

GoogleCodeExporter commented 9 years ago

Original comment by nat...@gmail.com on 18 Mar 2013 at 3:25