Column Chart with variable colour

[Floriano Sabatini]

Dear all,

I would like to use the column chart gouge with just one column that will represent the difference between Produced and Consumed energy. To be effective I need to have the colour of the column that change from green (if the value is positive) to red if it is negative.

Is this something feasible?

Many thanks

Floriano

[asgallant]

Use a "style" role column to set the color of each bar.  Here's an example: http://jsfiddle.net/asgallant/aFs9x/3/

[Floriano Sabatini]

but in my case I need to change the colour to the same column. I mean one column that is red or green according to the value.

[asgallant]

You can use a calculated column in a DataView to determine that dynamically if you don't want to set the colors in advance: http://jsfiddle.net/asgallant/CtWGb/

[Floriano Sabatini]

YES. This is the solution I was looking for.

grazie 1000

Floriano

Il giorno giovedì 13 marzo 2014 22:49:20 UTC+1, asgallant ha scritto:

[Floriano Sabatini]

Ciao Asgallant,

why it does,t work here. see the column graph 

http://solarflor.dyndns.org/123solar/monitor_lite2.html

 

what is wrong.

Thanks

Floriano

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/Zd9B1gKrE2w/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[asgallant]

There are a few problems with your code.  First, you need to draw a chart using the DataView instead of the DataTable if you want to see the effects of the calculated column.  Second, you create two views based on different DataTables, but give them the same variable name, so the second overwrites the first.  Give the two views different names:

var viewTot = new google.visualization.DataView(dataTot);
view.setColumns([0, 1, {

    calc: "stringify",
    sourceColumn: 1,
    type: "string",
    role: "annotation"

}, 2]);

var viewDisp = new google.visualization.DataView(dataDisp);
view.setColumns([0, 1, {
    type: 'string',
    role: 'style',
    calc: function (dt, row) {
    return (dt.getValue(row, 1) < 0) ? 'red' : 'green';
    }
}]);

Then use the views to draw the charts:

chartDisp.draw(viewDisp, optionsDisp);
chartTot.draw(viewTot, optionsTot);

On Friday, March 14, 2014 4:23:18 PM UTC-4, Floriano Sabatini wrote:

Ciao Asgallant,

why it does,t work here. see the column graph 

http://solarflor.dyndns.org/123solar/monitor_lite2.html

 

what is wrong.

Thanks

Floriano

2014-03-14 0:00 GMT+01:00 Floriano Sabatini <sabatini....@gmail.com>:

YES. This is the solution I was looking for.

grazie 1000

Floriano

Il giorno giovedì 13 marzo 2014 22:49:20 UTC+1, asgallant ha scritto:

Use a "style" role column to set the color of each bar.  Here's an example: http://jsfiddle.net/asgallant/aFs9x/3/

On Thursday, March 13, 2014 5:46:00 PM UTC-4, Floriano Sabatini wrote:

Dear all,

I would like to use the column chart gouge with just one column that will represent the difference between Produced and Consumed energy. To be effective I need to have the colour of the column that change from green (if the value is positive) to red if it is negative.

Is this something feasible?

Many thanks

Floriano

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/Zd9B1gKrE2w/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Floriano Sabatini]

Done. but there should me some mistakes somewhere. I cannot see anything now.

Thanks for your help

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Floriano Sabatini]

The fanny think is that if I use viewDisp (for the column chart) and viewTot (for the bar chart) I cannot see anything.

If I rename viewTot in just view it works but still without the right color of the column (red/green)

 

http://solarflor.dyndns.org/123solar/monitor_lite2.html

I'm lost now 

[asgallant]

There's an error in the code I pasted.  Try this:

var viewTot = new google.visualization.DataView(dataTot);

viewTot.setColumns([0, 1, {

    calc: "stringify",
    sourceColumn: 1,
    type: "string",
    role: "annotation"
}, 2]);

var viewDisp = new google.visualization.DataView(dataDisp);

viewDisp.setColumns([0, 1, {

    type: 'string',
    role: 'style',
    calc: function (dt, row) {
        return (dt.getValue(row, 1) < 0) ? 'red' : 'green';
    }
}]);

You need to draw the charts using the views inside the AJAX call that fetches your data (the initial draw call with the zeroed out data doesn't matter).

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Floriano Sabatini]

Hi,

I'm sorry but it doesn't work.

it runs (while in the past it didin't) but still doens't work: I mean the colour is still blue and doesn't change according to the value,

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[asgallant]

You're still drawing the charts inside the AJAX call with the DataTables instead of the views:

function getData() {
    setInterval(function () {
        $.getJSON("summary.php", function(response){
            var json = eval(response);
            var prod = parseInt(json['PROD']);
            var net = parseInt(json['NET']);
            var cons = parseInt(json['CONS']);
            var cons_today = parseFloat(json['TOT_CONS']);
            var prod_today = json['TOT_PROD'];
            var prod_today1 = parseFloat(json['TOT_PROD'].split(" ")[1].substring(1).replace(',','.'));
           
            console.log("Produzione " + prod + " W");
            console.log("Consumo " + cons + " W");
           
            dataProd.setValue(0, 1, prod);
            dataCons.setValue(0, 1, cons);
            dataDisp.setValue(0, 1, net);
            dataTot.setValue(0, 1, prod_today1);
            dataTot.setValue(1, 1, cons_today);
           
            chartProd.draw(dataProd, optionsProd);
            chartCons.draw(dataCons, optionsCons);
            chartDisp.draw(viewDisp, optionsDisp);
            chartTot.draw(viewTot, optionsTot);
           
            document.getElementById('TOT_PROD').innerHTML = prod_today;
        });
    }, 5000);
}

[Floriano Sabatini]

I'm so stupid. I duplicated the charts inside and outside the AJAX.

Now it works.

Many Many Thanks

Floriano

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Floriano Sabatini]

One question more.

Is it possible to use both roles, 'style' and 'annotation'?

I mean, may I add the value of the column as I did for the bars?

Ciao

Floriano

[asgallant]

Yes, you can do both.

[Floriano Sabatini]

Need one help more.

The colour of the column is now changing according to the role but ....

... I need to reload the web page before to see the changes.

Now I have var viewDisp and chartDisp.draw(viewDisp, optionsDisp); within AJAX

[Floriano Sabatini]

I just realised I changed the name of the file

http://solarflor.dyndns.org/123solar/SolarFlor.html

so you can see it now

[asgallant]

I've been trying to test this, but right now all of the results are coming back with a net negative for "prod" - "cons" (which would make sense if my assumption that this is charting solar energy production vs consumption for something in Chieuti, Italy is true, given that it is currently nighttime in Italy).

As an aside, this line is throwing an error (the element does not exist):

document.getElementById('TOT_PROD').innerHTML = prod_today;

I doubt that is the cause of your problems, but it's worth fixing that to confirm.

[Floriano Sabatini]

Yes, here in Italy is night now so no production and only consumprion --> red gap.

Anyway tomorrow morning I should see some green bar. In fact it will be green if I re-load the page but I'm using a tablet to monitor the energy and without to refresh it I will continue to see red.

PS Sorry for my poor English, I hope you understood what I mean.

Regarding the error how you have found it?

everything seems to work here

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/Zd9B1gKrE2w/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Floriano Sabatini]

Just in case I cancelled the line considering it was a residue of a number of changes I did.

Ciao and Thanks

Note: where you are based? UK or USA?

[asgallant]

The error showed up in the developer's console in Chrome, and I am in the USA.  I'll try to take a look at this again tomorrow morning if I have time.

On Tuesday, March 18, 2014 4:06:57 PM UTC-4, Floriano Sabatini wrote:

Just in case I cancelled the line considering it was a residue of a number of changes I did.

Ciao and Thanks

Note: where you are based? UK or USA?

2014-03-18 21:02 GMT+01:00 Floriano Sabatini <sabatini....@gmail.com>:

Yes, here in Italy is night now so no production and only consumprion --> red gap.

Anyway tomorrow morning I should see some green bar. In fact it will be green if I re-load the page but I'm using a tablet to monitor the energy and without to refresh it I will continue to see red.

PS Sorry for my poor English, I hope you understood what I mean.

Regarding the error how you have found it?

everything seems to work here

2014-03-18 20:54 GMT+01:00 asgallant <drew_g...@abtassoc.com>:

I've been trying to test this, but right now all of the results are coming back with a net negative for "prod" - "cons" (which would make sense if my assumption that this is charting solar energy production vs consumption for something in Chieuti, Italy is true, given that it is currently nighttime in Italy).

As an aside, this line is throwing an error (the element does not exist):

document.getElementById('TOT_PROD').innerHTML = prod_today;

I doubt that is the cause of your problems, but it's worth fixing that to confirm.

On Tuesday, March 18, 2014 1:05:41 PM UTC-4, Floriano Sabatini wrote:

Need one help more.

The colour of the column is now changing according to the role but ....

... I need to reload the web page before to see the changes.

Now I have var viewDisp and chartDisp.draw(viewDisp, optionsDisp); within AJAX

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/Zd9B1gKrE2w/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Floriano Sabatini]

I have been in USA last week.

I have cancelled the instruction that was generating the defects and now it works.

Thanks

When you have some time please let me have some instruction to display the value on the column ( as I did for the bar). 

Ciao

Floriano

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[asgallant]

Add an annotation column to the view, like the BarChart's:

var viewDisp = new google.visualization.DataView(dataDisp);
view.setColumns([0, 1, {
    type: 'string',
    role: 'style',
    calc: function (dt, row) {
    return (dt.getValue(row, 1) < 0) ? 'red' : 'green';
    }

}, {

    calc: "stringify",
    sourceColumn: 1,
    type: "string",
    role: "annotation"

}]);

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Floriano Sabatini]

Need to pay a good Pizza.

Contact me if you come here

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.