How to change color in google line chart..?

Question

0.00/5 (No votes)

See more:

Hello friends..

I am using google line chart in my application ..
i have done with it..But i want to change color of the lines..

Can u any help me how to change the color of a lines..

My code .cs:

C#

public partial class _Default : System.Web.UI.Page
{
    StringBuilder str = new StringBuilder();
    //Get connection string from web.config
    SqlConnection conn = new SqlConnection("server=ADMIN-PC\\SQLEXPRESS;database=rama;integrated security=true");

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            chart_bind();
        }
    }

    private DataTable GetData()
    {
        DataTable dt = new DataTable();
        conn.Open();
        string cmd = "select * from lines";
        SqlDataAdapter adp = new SqlDataAdapter(cmd, conn);
        adp.Fill(dt);
        conn.Close();
        return dt;
    }
    private void chart_bind()
    {
        DataTable dt = new DataTable();
        try
        {
            dt = GetData();

            str.Append(@"<script type=*text/javascript*> google.load( *visualization*, *1*, {packages:[*corechart*]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Year' );
            data.addColumn('number', 'Purchase');
            data.addColumn('number', 'Sales');
            data.addColumn('number', 'Expenses');
 
 
            data.addRows(" + dt.Rows.Count + ");");



            for (int i = 0; i <= dt.Rows.Count - 1; i++)
            {
                str.Append("data.setValue( " + i + "," + 0 + "," + "'" + dt.Rows[i]["year"].ToString() + "');");
                str.Append("data.setValue(" + i + "," + 1 + "," + dt.Rows[i]["purchase"].ToString() + ") ;");
                str.Append("data.setValue(" + i + "," + 2 + "," + dt.Rows[i]["sales"].ToString() + ") ;");
                str.Append("data.setValue(" + i + "," + 3 + "," + dt.Rows[i]["expences"].ToString() + ");");

            }


            str.Append("   var chart = new google.visualization.LineChart(document.getElementById('chart_div'));");
            str.Append(" chart.draw(data, {width: 660, height: 400, title: '',colors");
            str.Append("hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}");
            str.Append("}); }");
            str.Append("</script>");
            lt.Text = str.ToString().Replace('*', '"');
        }
        catch
        { }
    }


}

Posted 26-Oct-15 20:22pm

12045649

Updated 26-Oct-15 21:02pm

Suvendu Shekhar Giri

v2

Add a Solution

2 solutions

Solution 1

Just Add the Colors properties to the Option to change the lines color.

HTML

<html>
<head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1.1', {packages: ['line']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500,
        colors:['red','#004411','Black'],
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  
</body>
</html>

Posted 26-Oct-15 22:08pm

Debojyoti Saha

v2

Comments

12045649 27-Oct-15 4:43am

Hello saha..Have u seen my code ..
Can u please explain u r code..What is that numbers..How to give our own color..?

Debojyoti Saha 27-Oct-15 5:38am

Please follow the Option:
colors:['red','#004411','Black']

Debojyoti Saha 27-Oct-15 5:50am

Here the Numbers means Datatype. You just need to create a google.visualization.DataTable() and initialize the Column like data.addColumn('datatype', 'ColumnName');

Debojyoti Saha 27-Oct-15 5:36am

Please change the year datatype to number.
data.addColumn('number', 'Year');

12045649 27-Oct-15 6:01am

hello saha,...i have changed the datatype..afterward..what to do for changing the color of a line

Debojyoti Saha 27-Oct-15 6:12am

Ok, then please check the variable Options
var options ={}
And add the color properties
colors: ['red', '#004411', 'Black'],

12045649 27-Oct-15 6:15am

i had done like this ..

var options = {

colors: ['red', '#004411', 'Black'],
axes: {
x: {
0: { side: 'top' }
}
}
};

12045649 27-Oct-15 6:19am

should i remove axes:{ x:{side:'top'}};

Debojyoti Saha 27-Oct-15 6:28am

You Can Do it. But its not related to your line colors.

12045649 27-Oct-15 6:36am

even though it is not coming..

Debojyoti Saha 27-Oct-15 6:41am

Please use the code .....

<head>
<title></title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', { packages: ['line'] });
google.setOnLoadCallback(drawChart);

function drawChart() {

var data = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn('number', 'Purchase');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');

data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);

var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
colors: ['red', '#004411', 'Black'],
axes: {
x: {
0: { side: 'top' }
}
}
};

var chart = new google.charts.Line(document.getElementById('chart_div'));

chart.draw(data, options);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="chart_div"></div>
</div>
</form>
</body>

12045649 27-Oct-15 6:49am

should i change any thing in .cs code..?

12045649 27-Oct-15 6:51am

no it is not changing the color

Debojyoti Saha 27-Oct-15 7:13am

Please check the link

https://jsbin.com/dekazi/edit?html,output

12045649 27-Oct-15 7:21am

hello sir ,..thanks for valuable time ..last request see the following code ..please give respond

But ..i am using database for data..(hope u under stand)

source code :

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Multi series Line chart using Google Visualization</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Literal ID="lt" runat="server">
<div id="chart_div"></div>
</div>
</form>
</body>
</html>

.cs code :

public partial class _Default : System.Web.UI.Page
{
StringBuilder str = new StringBuilder();
//Get connection string from web.config
SqlConnection conn = new SqlConnection("server=ADMIN-PC\\SQLEXPRESS;database=rama;integrated security=true");

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
chart_bind();
}
}

private DataTable GetData()
{
DataTable dt = new DataTable();
conn.Open();
string cmd = "select * from lines";
SqlDataAdapter adp = new SqlDataAdapter(cmd, conn);
adp.Fill(dt);
conn.Close();
return dt;
}
private void chart_bind()
{
DataTable dt = new DataTable();
try
{
dt = GetData();

str.Append(@"<script type=*text/javascript*> google.load( *visualization*, *1*, {packages:[*corechart*]});

google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Year' );
data.addColumn('number', 'Purchase');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');

data.addRows(" + dt.Rows.Count + ");");

for (int i = 0; i <= dt.Rows.Count - 1; i++)
{
str.Append("data.setValue( " + i + "," + 0 + "," + "'" + dt.Rows[i]["year"].ToString() + "');");
str.Append("data.setValue(" + i + "," + 1 + "," + dt.Rows[i]["purchase"].ToString() + ") ;");
str.Append("data.setValue(" + i + "," + 2 + "," + dt.Rows[i]["sales"].ToString() + ") ;");
str.Append("data.setValue(" + i + "," + 3 + "," + dt.Rows[i]["expences"].ToString() + ");");

}

str.Append(" var chart = new google.visualization.LineChart(document.getElementById('chart_div'));");
str.Append(" chart.draw(data, {width: 660, height: 400, title: '',");
// str.Append(" chart.draw(data, {width: 650, height: 300, title: 'Course Enrollment', color:#0092CB,");

str.Append("hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}");
str.Append("}); }");
str.Append("</script>");
lt.Text = str.ToString().Replace('*', '"');
}
catch
{ }
}
}

12045649 27-Oct-15 7:30am

hello saha...please help me with above code ..what to change for changing the color

Debojyoti Saha 27-Oct-15 7:50am

str.Append(" chart.draw(data, {width: 660, height: 400, title: '',colors: ['red', '#004411', 'Black']");

12045649 27-Oct-15 8:03am

It is showing blank page..it is not showing output..please tell me what to do

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

12045649 · Accepted Answer · 2015-10-27T20:02:00

Hello Friends I got the solution for above problem :

getting data from database and creating google line chart in asp.net :

source code :

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Multi series Line chart using Google Visualization</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

</head>
<body>
<form id="form1" runat="server">

<asp:literal id="lt" runat="server" xmlns:asp="#unknown">

</form>
</body>
</html>

.cs code :

public partial class _Default : System.Web.UI.Page
{
StringBuilder str = new StringBuilder();
//Get connection string from web.config
SqlConnection conn = new SqlConnection("Data source=ADMIN-PC\\SQLEXPRESS; Initial catalog=Rama; Integrated security=true");

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
chart_bind();
}
}

private DataTable GetData()
{
DataTable dt = new DataTable();
conn.Open();
string cmd = "select * from lines";
SqlDataAdapter adp = new SqlDataAdapter(cmd, conn);
adp.Fill(dt);
conn.Close();
return dt;
}

private void chart_bind()
{
DataTable dt = new DataTable();
try
{
dt = GetData();

str.Append(@"<script type=text/javascript> google.load( *visualization*, *1*, {packages:[*corechart*]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Purchase');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');

data.addRows(" + dt.Rows.Count + ");");

Int32 i;

for (i = 0; i <= dt.Rows.Count - 1; i++)
{
str.Append("data.setValue( " + i + "," + 0 + "," + "'" + dt.Rows[i]["year"].ToString() + "');");
str.Append("data.setValue(" + i + "," + 1 + "," + dt.Rows[i]["purchase"].ToString() + ") ;");
str.Append("data.setValue(" + i + "," + 2 + "," + dt.Rows[i]["sales"].ToString() + ") ;");
str.Append("data.setValue(" + i + "," + 3 + "," + dt.Rows[i]["expences"].ToString() + ");");

}
str.Append(" var chart = new google.visualization.LineChart(document.getElementById('chart_div'));");
str.Append(" chart.draw(data, {width: 599, height: 400,color: 'Green',");
str.Append("hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},");
str.Append(@"series: {0:{color:'#676767',lineWidth:2, pointSize: 10,dataOpacity: 2.0, },
1:{color:'#00b0f0',lineWidth:2,pointSize: 10,dataOpacity: 2.0,},
2:{color:'#000011',lineWidth:2,pointSize: 10,dataOpacity: 2.0,},
}");
str.Append("}); }");
str.Append("</script>");
lt.Text = str.ToString().TrimEnd(',').Replace('*', '"');
}
catch
{ }
}
}