Customizing point shape in linear chart

Sep 4, 2014 at 4:10 PM
Google Chart have posibility that customize the point of linear chart.
like: square, stars, circle, etc.

How I can customize the point in this control.
I can`t found the propertie for this.
Coordinator
Sep 4, 2014 at 6:08 PM
I haven't added those yet. For right now, use the GVIOptionsOverride. Run the chart once with all the available customizations. At the bottom of the page it will build the Javascript and JSON required for that chart. Copy the options string. Then when you create the chart use the GVIOptionsOverride and set the JSON string. It will override the the calculated options. Add what ever you require to that the JSON options within that string and you will have your custom chart.

Best Regards,


Julian King

Lead Software Developer

206.697.4663

[email removed]





Sep 4, 2014 at 10:41 PM

Thanks so much for answer.

I try change you code for my app.

Can you tell me how change the visualization.dll

I need make a change in GVisualizationPanel.js

But when compile not take the changes, I imagine that this change is in visualization.dll

Thank you so much.

Atte

Cristian Sepulveda

De: Juls [email removed]
Enviado el: jueves, 04 de septiembre de 2014 14:09
Para: [email removed]
Asunto: Re: Customizing point shape in linear chart [googlevisnet:565227]

From: Juls

I haven't added those yet. For right now, use the GVIOptionsOverride. Run the chart once with all the available customizations. At the bottom of the page it will build the Javascript and JSON required for that chart. Copy the options string. Then when you create the chart use the GVIOptionsOverride and set the JSON string. It will override the the calculated options. Add what ever you require to that the JSON options within that string and you will have your custom chart.


Best Regards,



Julian King

Lead Software Developer

206.697.4663

[email removed]

Coordinator
Sep 4, 2014 at 10:45 PM
Visualization.dll just converts the .net datatable to a Googledatatable. It does nothing more.

Best Regards,


Julian King

Lead Software Developer

206.697.4663

[email removed]





Sep 4, 2014 at 10:50 PM

Yes but I need add column with roles like tooltip or anotation, etc

For does next:

google.setOnLoadCallback(drawChart);

function drawChart() {

var dataTable = new google.visualization.DataTable();

dataTable.addColumn('string', 'Year');

dataTable.addColumn('number', 'Sales');

// A column for custom tooltip content

dataTable.addColumn({type: 'string', role: 'tooltip'});

dataTable.addRows([

['2010', 600, '$600K in our first year!'],

['2011', 1500, 'Sunspot activity made this our best year ever!'],

['2012', 800, '$800K in 2012.'],

['2013', 1000, '$1M in sales last year.']

]);

var options = { legend: 'none' };

var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_custom_tooltip'));

chart.draw(dataTable, options);

If you have an a idea I apreciated so much

Atte.

Cristian Sepúlveda

De: Juls [email removed]
Enviado el: jueves, 04 de septiembre de 2014 18:45
Para: [email removed]
Asunto: Re: Customizing point shape in linear chart [googlevisnet:565227]

From: Juls

Visualization.dll just converts the .net datatable to a Googledatatable. It does nothing more.


Best Regards,



Julian King

Lead Software Developer

206.697.4663

[email removed]

Coordinator
Sep 4, 2014 at 11:04 PM
I see what you are saying. Visualization will handle that.

Best Regards,


Julian King

Lead Software Developer

206.697.4663

[email removed]





Coordinator
Sep 4, 2014 at 11:10 PM
I added pointSize and pointShape


private void codebehindAreaChart()
{
GoogleChartsNGraphsControls.GVAreaChart chart = new GoogleChartsNGraphsControls.GVAreaChart();
chart.Width = WD;
chart.Height = HT;
chart.GviPointShape = GoogleChartsNGraphsControls.PointShape.Triangle;
chart.GviPointSize = 33;

chart.DataSource = getDT();
chart.DataBind();

this.PlaceHolderChart.Controls.Add(chart);

}

Best Regards,


Julian King

Lead Software Developer

206.697.4663

[email removed]





Coordinator
Sep 4, 2014 at 11:13 PM
what if we made it so a column named tooltip inherited that role?

Best Regards,


Julian King

Lead Software Developer

206.697.4663

[email removed]





Sep 5, 2014 at 1:25 PM

Yes..but I think that change visualization.dll can do it this, or I am wrong?

De: Juls [email removed]
Enviado el: jueves, 04 de septiembre de 2014 19:14
Para: [email removed]
Asunto: Re: Customizing point shape in linear chart [googlevisnet:565227]

From: Juls

what if we made it so a column named tooltip inherited that role?


Best Regards,



Julian King

Lead Software Developer

206.697.4663

[email removed]

Coordinator
Sep 5, 2014 at 2:04 PM
you are right.

Best Regards,


Julian King

Lead Software Developer

206.697.4663

[email removed]





Sep 5, 2014 at 2:07 PM

Then how can modify visualization.dll ¿?

Not have source code

De: Juls [email removed]
Enviado el: viernes, 05 de septiembre de 2014 10:05
Para: [email removed]
Asunto: Re: Customizing point shape in linear chart [googlevisnet:565227]

From: Juls

you are right.


Best Regards,



Julian King

Lead Software Developer

206.697.4663

[email removed]

Coordinator
Sep 8, 2014 at 4:48 PM
I added roles. Use the DataColumn.Caption to establish a role. ie. dt.Columns.Add(new DataColumn("sc", typeof(bool)) { Caption = "certainty" });


Inline image 1

// SUPPORTED
"annotation", "annotationText", "interval", "tooltip", "certainty", "emphasis", "scope"


Sample Code:
            System.Data.DataTable dt = new System.Data.DataTable("Fashionista Biz");
            dt.Columns.Add("Month");
            dt.Columns.Add("Sales", typeof(int));
            dt.Columns.Add(new DataColumn("sc", typeof(bool)) { Caption = "certainty" });
            dt.Columns.Add(new DataColumn("em", typeof(bool)) { Caption = "emphasis" });
            dt.Columns.Add(new DataColumn("i1", typeof(int)) { Caption = "interval" });
            dt.Columns.Add(new DataColumn("i2", typeof(int)) { Caption = "interval" });
            dt.Columns.Add(new DataColumn("t1") { Caption = "tooltip" });
            dt.Columns.Add("Expenses", typeof(int));
            dt.Columns.Add(new DataColumn("ec", typeof(bool)) { Caption = "certainty" });
            dt.Columns.Add(new DataColumn("t2") { Caption = "tooltip" });

            dt.Rows.Add(new object[] { "April", 1000, true, true, 980, 1010, "Spring Fashion Show Sparks new Interest", 740, true, "" });
            dt.Rows.Add(new object[] { "May", 800, true, false, 780, 822, "", 700, true, "" });
            dt.Rows.Add(new object[] { "June", 750, true, false, 700, 755, "", 980, true, "Stocking up for back to school sale" });
            dt.Rows.Add(new object[] { "July", 820, true, false, 810, 835, "", 900, true, "" });
            dt.Rows.Add(new object[] { "Aug", 1260, false, false, 1100, 1300, "Anticipated back to school shopping to boost sales", 860, false, "" });

            this.GVLineChartRoles.DataSource = dt;

Best Regards,


Julian King

Lead Software Developer

206.697.4663

[email removed]




Sep 8, 2014 at 5:55 PM

Thank you so much…I will test

De: Juls [email removed]
Enviado el: lunes, 08 de septiembre de 2014 13:49
Para: [email removed]
Asunto: Re: Customizing point shape in linear chart [googlevisnet:565227]

From: Juls

I added roles. Use the DataColumn.Caption to establish a role. ie. dt.Columns.Add(new DataColumn("sc", typeof(bool)) { Caption = "certainty" });

Inline image 1

// SUPPORTED

"annotation", "annotationText", "interval", "tooltip", "certainty", "emphasis", "scope"

Sample Code:
            System.Data.DataTable dt = new System.Data.DataTable("Fashionista Biz");
            dt.Columns.Add("Month");
            dt.Columns.Add("Sales", typeof(int));
            dt.Columns.Add(new DataColumn("sc", typeof(bool)) { Caption = "certainty" });
            dt.Columns.Add(new DataColumn("em", typeof(bool)) { Caption = "emphasis" });
            dt.Columns.Add(new DataColumn("i1", typeof(int)) { Caption = "interval" });
            dt.Columns.Add(new DataColumn("i2", typeof(int)) { Caption = "interval" });
            dt.Columns.Add(new DataColumn("t1") { Caption = "tooltip" });
            dt.Columns.Add("Expenses", typeof(int));
            dt.Columns.Add(new DataColumn("ec", typeof(bool)) { Caption = "certainty" });
            dt.Columns.Add(new DataColumn("t2") { Caption = "tooltip" });
 
            dt.Rows.Add(new object[] { "April", 1000, true, true, 980, 1010, "Spring Fashion Show Sparks new Interest", 740, true, "" });
            dt.Rows.Add(new object[] { "May", 800, true, false, 780, 822, "", 700, true, "" });
            dt.Rows.Add(new object[] { "June", 750, true, false, 700, 755, "", 980, true, "Stocking up for back to school sale" });
            dt.Rows.Add(new object[] { "July", 820, true, false, 810, 835, "", 900, true, "" });
            dt.Rows.Add(new object[] { "Aug", 1260, false, false, 1100, 1300, "Anticipated back to school shopping to boost sales", 860, false, "" });
 
            this.GVLineChartRoles.DataSource = dt;


Best Regards,



Julian King

Lead Software Developer

206.697.4663

[email removed]