Smalltalk › Frameworks & Tools › Moose

Composite Chart Diagrams

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

6 messages Options

Usman Bhatti

Composite Chart Diagrams

Hi Alex,

In Eyesee, we have the concept of composite diagrams i.e. you can have multiple charts in the same diagram with individual y axes (see attached screenshot). This is a handy concept because not only you could have two charts on the same diagram but each chart has its own axis. For comparing disparate values, this is convenient because one does not need to think about normalizing Y values of charts to the same scale. One example could be showing trends of software metrics over time.

I saw that you ported more code from Charter to Grapher so I am having a look at the examples. Is it possible to have composite chart diagrams with Grapher? Do you plan to add this feature?

Here is a exemplary script that illustrates the need for composite diagrams:

| grapher minDate ds random dates grapherBlock|

dates := (Array with: Date today with: Date yesterday with: Date tomorrow) collect: #asDateAndTime.

minDate := dates min.

random := Random seed: 10.

grapher := RTGrapherBuilder new

extent: 300 @ 200;

yourself.

grapherBlock := [:index |

ds := RTDataSet new.

ds interaction popup.

ds dotShape ellipse color: (Color red alpha: 0.5); size: 10.

ds points: dates sorted;

x: [ :aDate | aDate asUnixTime - minDate asUnixTime ];

connectColor: (Color random alpha: 0.5);

y: [ :d | (random nextInt: 100) * index].

grapher add: ds].

100 to: 103 do: grapherBlock.

1 to: 3 do: grapherBlock.

grapher axisConfiguration noDecimals.

grapher axisY.

grapher axisConfiguration

labelRotation: -30;

title: '';

numberOfLabels: dates size - 1;

labelConvertion: [ :v | (DateAndTime fromUnixTime: v + minDate asUnixTime) asDate ] .

grapher axisX; build.

grapher view open

regards,

Usman

_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev

abergel

Re: Composite Chart Diagrams

Ok, this is something that should be easy to have.

I have a question, how this should behave with negative X and Y values?

Alexandre

--
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.

On Dec 2, 2014, at 12:55 PM, Usman Bhatti <[hidden email]> wrote:

Hi Alex,

In Eyesee, we have the concept of composite diagrams i.e. you can have multiple charts in the same diagram with individual y axes (see attached screenshot). This is a handy concept because not only you could have two charts on the same diagram but each chart has its own axis. For comparing disparate values, this is convenient because one does not need to think about normalizing Y values of charts to the same scale. One example could be showing trends of software metrics over time.

I saw that you ported more code from Charter to Grapher so I am having a look at the examples. Is it possible to have composite chart diagrams with Grapher? Do you plan to add this feature?

Here is a exemplary script that illustrates the need for composite diagrams:

| grapher minDate ds random dates grapherBlock|
dates := (Array with: Date today with: Date yesterday with: Date tomorrow) collect: #asDateAndTime.
minDate := dates min.
random := Random seed: 10.

grapher := RTGrapherBuilder new
extent: 300 @ 200;
yourself.
grapherBlock := [:index |
ds := RTDataSet new.
ds interaction popup.
ds dotShape ellipse color: (Color red alpha: 0.5); size: 10.
ds points: dates sorted;
x: [ :aDate | aDate asUnixTime - minDate asUnixTime ];
connectColor: (Color random alpha: 0.5);
y: [ :d | (random nextInt: 100) * index].
grapher add: ds].

100 to: 103 do: grapherBlock.
1 to: 3 do: grapherBlock.

grapher axisConfiguration noDecimals.
grapher axisY.
grapher axisConfiguration
labelRotation: -30;
title: '';
numberOfLabels: dates size - 1;
labelConvertion: [ :v | (DateAndTime fromUnixTime: v + minDate asUnixTime) asDate ] .
grapher axisX; build.
grapher view open

regards,

Usman

<EyeSee-2014-12-01-1013.png>
<EyeSee-2014-12-01-1014.png>
<Screen Shot 2014-12-02 at 4.53.04 PM.png>
_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev

_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev

Usman Bhatti

Re: Composite Chart Diagrams

Hi Alex,

On Tue, Dec 2, 2014 at 6:46 PM, Alexandre Bergel <[hidden email]> wrote:

Ok, this is something that should be easy to have.
I have a question, how this should behave with negative X and Y values?

I do not see why that would be problematic or may be I am missing a point.

I played a bit with HighCharts to see how does it behave in the presence of negative values in combo charts (I edited the examples in js fidle).

http://www.highcharts.com/demo/combo

This is what I obtained pretty much according to my expectations:

regards,

Usman

Alexandre
--
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.

On Dec 2, 2014, at 12:55 PM, Usman Bhatti <[hidden email]> wrote:

Hi Alex,

In Eyesee, we have the concept of composite diagrams i.e. you can have multiple charts in the same diagram with individual y axes (see attached screenshot). This is a handy concept because not only you could have two charts on the same diagram but each chart has its own axis. For comparing disparate values, this is convenient because one does not need to think about normalizing Y values of charts to the same scale. One example could be showing trends of software metrics over time.

I saw that you ported more code from Charter to Grapher so I am having a look at the examples. Is it possible to have composite chart diagrams with Grapher? Do you plan to add this feature?

Here is a exemplary script that illustrates the need for composite diagrams:

| grapher minDate ds random dates grapherBlock|
dates := (Array with: Date today with: Date yesterday with: Date tomorrow) collect: #asDateAndTime.
minDate := dates min.
random := Random seed: 10.

grapher := RTGrapherBuilder new
extent: 300 @ 200;
yourself.
grapherBlock := [:index |
ds := RTDataSet new.
ds interaction popup.
ds dotShape ellipse color: (Color red alpha: 0.5); size: 10.
ds points: dates sorted;
x: [ :aDate | aDate asUnixTime - minDate asUnixTime ];
connectColor: (Color random alpha: 0.5);
y: [ :d | (random nextInt: 100) * index].
grapher add: ds].

100 to: 103 do: grapherBlock.
1 to: 3 do: grapherBlock.

grapher axisConfiguration noDecimals.
grapher axisY.
grapher axisConfiguration
labelRotation: -30;
title: '';
numberOfLabels: dates size - 1;
labelConvertion: [ :v | (DateAndTime fromUnixTime: v + minDate asUnixTime) asDate ] .
grapher axisX; build.
grapher view open

regards,

Usman

<EyeSee-2014-12-01-1013.png>
<EyeSee-2014-12-01-1014.png>
<Screen Shot 2014-12-02 at 4.53.04 PM.png>
_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev

_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev

_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev

abergel

Re: Composite Chart Diagrams

This is indeed a complex visualization.
What is missing are two things: the smooth bezier-like curve, and the grouped histogram.

Do you really need such a graph for now? What can we do as an incremental step?

Cheers,
Alexandre

> On Dec 3, 2014, at 6:25 AM, Usman Bhatti <[hidden email]> wrote:
>
> Hi Alex,
>
>
> On Tue, Dec 2, 2014 at 6:46 PM, Alexandre Bergel <[hidden email]> wrote:
> Ok, this is something that should be easy to have.
> I have a question, how this should behave with negative X and Y values?
>
> I do not see why that would be problematic or may be I am missing a point.
>
> I played a bit with HighCharts to see how does it behave in the presence of negative values in combo charts (I edited the examples in js fidle).
> http://www.highcharts.com/demo/combo
>
> This is what I obtained pretty much according to my expectations:
>
> <Screen Shot 2014-12-03 at 10.21.06 AM.png>
> regards,
> Usman
>
> Alexandre
> --
> _,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
> Alexandre Bergel http://www.bergel.eu
> ^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.
>
>
>
>> On Dec 2, 2014, at 12:55 PM, Usman Bhatti <[hidden email]> wrote:
>>
>> Hi Alex,
>>
>> In Eyesee, we have the concept of composite diagrams i.e. you can have multiple charts in the same diagram with individual y axes (see attached screenshot). This is a handy concept because not only you could have two charts on the same diagram but each chart has its own axis. For comparing disparate values, this is convenient because one does not need to think about normalizing Y values of charts to the same scale. One example could be showing trends of software metrics over time.
>>
>> I saw that you ported more code from Charter to Grapher so I am having a look at the examples. Is it possible to have composite chart diagrams with Grapher? Do you plan to add this feature?
>>
>> Here is a exemplary script that illustrates the need for composite diagrams:
>>
>> | grapher minDate ds random dates grapherBlock|
>> dates := (Array with: Date today with: Date yesterday with: Date tomorrow) collect: #asDateAndTime.
>> minDate := dates min.
>> random := Random seed: 10.
>>
>> grapher := RTGrapherBuilder new
>> extent: 300 @ 200;
>> yourself.
>> grapherBlock := [:index |
>> ds := RTDataSet new.
>> ds interaction popup.
>> ds dotShape ellipse color: (Color red alpha: 0.5); size: 10.
>> ds points: dates sorted;
>> x: [ :aDate | aDate asUnixTime - minDate asUnixTime ];
>> connectColor: (Color random alpha: 0.5);
>> y: [ :d | (random nextInt: 100) * index].
>> grapher add: ds].
>>
>> 100 to: 103 do: grapherBlock.
>> 1 to: 3 do: grapherBlock.
>>
>> grapher axisConfiguration noDecimals.
>> grapher axisY.
>> grapher axisConfiguration
>> labelRotation: -30;
>> title: '';
>> numberOfLabels: dates size - 1;
>> labelConvertion: [ :v | (DateAndTime fromUnixTime: v + minDate asUnixTime) asDate ] .
>> grapher axisX; build.
>> grapher view open
>>
>>
>>
>> regards,
>>
>> Usman
>>
>> <EyeSee-2014-12-01-1013.png>
>> <EyeSee-2014-12-01-1014.png>
>> <Screen Shot 2014-12-02 at 4.53.04 PM.png>
>> _______________________________________________
>> Moose-dev mailing list
>> [hidden email]
>> https://www.iam.unibe.ch/mailman/listinfo/moose-dev
>
>
> _______________________________________________
> Moose-dev mailing list
> [hidden email]
> https://www.iam.unibe.ch/mailman/listinfo/moose-dev
>
>
> _______________________________________________
> Moose-dev mailing list
> [hidden email]
> https://www.iam.unibe.ch/mailman/listinfo/moose-dev

--
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.

_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev

Usman Bhatti

Re: Composite Chart Diagrams

On Wed, Dec 3, 2014 at 2:37 PM, Alexandre Bergel <[hidden email]> wrote:

This is indeed a complex visualization.
What is missing are two things: the smooth bezier-like curve, and the grouped histogram.

Do you really need such a graph for now? What can we do as an incremental step?

The example of high-level charts was supposed to show the treatment of negative values, I do not expect Grapher to provide the same features and have the same look n feel as the library which has been developed since 2009.

I think what you did with double graph builder should be sufficient. I'll have a detailed look a bit later. One nice thing with the double graph builder is to provide an API to normalize values so that bigger values do not mask the smaller onces.

Thank you.

Usman

Cheers,
Alexandre

> On Dec 3, 2014, at 6:25 AM, Usman Bhatti <[hidden email]> wrote:
>
> Hi Alex,
>
>
> On Tue, Dec 2, 2014 at 6:46 PM, Alexandre Bergel <[hidden email]> wrote:
> Ok, this is something that should be easy to have.
> I have a question, how this should behave with negative X and Y values?
>
> I do not see why that would be problematic or may be I am missing a point.
>
> I played a bit with HighCharts to see how does it behave in the presence of negative values in combo charts (I edited the examples in js fidle).
> http://www.highcharts.com/demo/combo
>
> This is what I obtained pretty much according to my expectations:
>
> <Screen Shot 2014-12-03 at 10.21.06 AM.png>

> regards,
> Usman
>
> Alexandre
> --
> _,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
> Alexandre Bergel http://www.bergel.eu
> ^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.
>
>
>
>> On Dec 2, 2014, at 12:55 PM, Usman Bhatti <[hidden email]> wrote:
>>
>> Hi Alex,
>>
>> In Eyesee, we have the concept of composite diagrams i.e. you can have multiple charts in the same diagram with individual y axes (see attached screenshot). This is a handy concept because not only you could have two charts on the same diagram but each chart has its own axis. For comparing disparate values, this is convenient because one does not need to think about normalizing Y values of charts to the same scale. One example could be showing trends of software metrics over time.
>>
>> I saw that you ported more code from Charter to Grapher so I am having a look at the examples. Is it possible to have composite chart diagrams with Grapher? Do you plan to add this feature?
>>
>> Here is a exemplary script that illustrates the need for composite diagrams:
>>
>> | grapher minDate ds random dates grapherBlock|
>> dates := (Array with: Date today with: Date yesterday with: Date tomorrow) collect: #asDateAndTime.
>> minDate := dates min.
>> random := Random seed: 10.
>>
>> grapher := RTGrapherBuilder new
>> extent: 300 @ 200;
>> yourself.
>> grapherBlock := [:index |
>> ds := RTDataSet new.
>> ds interaction popup.
>> ds dotShape ellipse color: (Color red alpha: 0.5); size: 10.
>> ds points: dates sorted;
>> x: [ :aDate | aDate asUnixTime - minDate asUnixTime ];
>> connectColor: (Color random alpha: 0.5);
>> y: [ :d | (random nextInt: 100) * index].
>> grapher add: ds].
>>
>> 100 to: 103 do: grapherBlock.
>> 1 to: 3 do: grapherBlock.
>>
>> grapher axisConfiguration noDecimals.
>> grapher axisY.
>> grapher axisConfiguration
>> labelRotation: -30;
>> title: '';
>> numberOfLabels: dates size - 1;
>> labelConvertion: [ :v | (DateAndTime fromUnixTime: v + minDate asUnixTime) asDate ] .
>> grapher axisX; build.
>> grapher view open
>>
>>
>>
>> regards,
>>
>> Usman
>>
>> <EyeSee-2014-12-01-1013.png>
>> <EyeSee-2014-12-01-1014.png>
>> <Screen Shot 2014-12-02 at 4.53.04 PM.png>
>> _______________________________________________
>> Moose-dev mailing list
>> [hidden email]
>> https://www.iam.unibe.ch/mailman/listinfo/moose-dev
>
>
> _______________________________________________
> Moose-dev mailing list
> [hidden email]
> https://www.iam.unibe.ch/mailman/listinfo/moose-dev
>
>
> _______________________________________________
> Moose-dev mailing list
> [hidden email]
> https://www.iam.unibe.ch/mailman/listinfo/moose-dev

--
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.

_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev

_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev

abergel

Re: Composite Chart Diagrams

Ok, let us know!

Cheers,
Alexandre

> On Dec 3, 2014, at 11:00 AM, Usman Bhatti <[hidden email]> wrote:
>
>
>
> On Wed, Dec 3, 2014 at 2:37 PM, Alexandre Bergel <[hidden email]> wrote:
> This is indeed a complex visualization.
> What is missing are two things: the smooth bezier-like curve, and the grouped histogram.
>
> Do you really need such a graph for now? What can we do as an incremental step?
>
> The example of high-level charts was supposed to show the treatment of negative values, I do not expect Grapher to provide the same features and have the same look n feel as the library which has been developed since 2009.
>
> I think what you did with double graph builder should be sufficient. I'll have a detailed look a bit later. One nice thing with the double graph builder is to provide an API to normalize values so that bigger values do not mask the smaller onces.
>
> Thank you.
>
> Usman
>
>
> Cheers,
> Alexandre
>
>
> > On Dec 3, 2014, at 6:25 AM, Usman Bhatti <[hidden email]> wrote:
> >
> > Hi Alex,
> >
> >
> > On Tue, Dec 2, 2014 at 6:46 PM, Alexandre Bergel <[hidden email]> wrote:
> > Ok, this is something that should be easy to have.
> > I have a question, how this should behave with negative X and Y values?
> >
> > I do not see why that would be problematic or may be I am missing a point.
> >
> > I played a bit with HighCharts to see how does it behave in the presence of negative values in combo charts (I edited the examples in js fidle).
> > http://www.highcharts.com/demo/combo
> >
> > This is what I obtained pretty much according to my expectations:
> >
> > <Screen Shot 2014-12-03 at 10.21.06 AM.png>
> > regards,
> > Usman
> >
> > Alexandre
> > --
> > _,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
> > Alexandre Bergel http://www.bergel.eu
> > ^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.
> >
> >
> >
> >> On Dec 2, 2014, at 12:55 PM, Usman Bhatti <[hidden email]> wrote:
> >>
> >> Hi Alex,
> >>
> >> In Eyesee, we have the concept of composite diagrams i.e. you can have multiple charts in the same diagram with individual y axes (see attached screenshot). This is a handy concept because not only you could have two charts on the same diagram but each chart has its own axis. For comparing disparate values, this is convenient because one does not need to think about normalizing Y values of charts to the same scale. One example could be showing trends of software metrics over time.
> >>
> >> I saw that you ported more code from Charter to Grapher so I am having a look at the examples. Is it possible to have composite chart diagrams with Grapher? Do you plan to add this feature?
> >>
> >> Here is a exemplary script that illustrates the need for composite diagrams:
> >>
> >> | grapher minDate ds random dates grapherBlock|
> >> dates := (Array with: Date today with: Date yesterday with: Date tomorrow) collect: #asDateAndTime.
> >> minDate := dates min.
> >> random := Random seed: 10.
> >>
> >> grapher := RTGrapherBuilder new
> >> extent: 300 @ 200;
> >> yourself.
> >> grapherBlock := [:index |
> >> ds := RTDataSet new.
> >> ds interaction popup.
> >> ds dotShape ellipse color: (Color red alpha: 0.5); size: 10.
> >> ds points: dates sorted;
> >> x: [ :aDate | aDate asUnixTime - minDate asUnixTime ];
> >> connectColor: (Color random alpha: 0.5);
> >> y: [ :d | (random nextInt: 100) * index].
> >> grapher add: ds].
> >>
> >> 100 to: 103 do: grapherBlock.
> >> 1 to: 3 do: grapherBlock.
> >>
> >> grapher axisConfiguration noDecimals.
> >> grapher axisY.
> >> grapher axisConfiguration
> >> labelRotation: -30;
> >> title: '';
> >> numberOfLabels: dates size - 1;
> >> labelConvertion: [ :v | (DateAndTime fromUnixTime: v + minDate asUnixTime) asDate ] .
> >> grapher axisX; build.
> >> grapher view open
> >>
> >>
> >>
> >> regards,
> >>
> >> Usman
> >>
> >> <EyeSee-2014-12-01-1013.png>
> >> <EyeSee-2014-12-01-1014.png>
> >> <Screen Shot 2014-12-02 at 4.53.04 PM.png>
> >> _______________________________________________
> >> Moose-dev mailing list
> >> [hidden email]
> >> https://www.iam.unibe.ch/mailman/listinfo/moose-dev
> >
> >
> > _______________________________________________
> > Moose-dev mailing list
> > [hidden email]
> > https://www.iam.unibe.ch/mailman/listinfo/moose-dev
> >
> >
> > _______________________________________________
> > Moose-dev mailing list
> > [hidden email]
> > https://www.iam.unibe.ch/mailman/listinfo/moose-dev
>
> --
> _,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
> Alexandre Bergel http://www.bergel.eu
> ^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.
>
>
>
>
> _______________________________________________
> Moose-dev mailing list
> [hidden email]
> https://www.iam.unibe.ch/mailman/listinfo/moose-dev
>
> _______________________________________________
> Moose-dev mailing list
> [hidden email]
> https://www.iam.unibe.ch/mailman/listinfo/moose-dev