Click here to Skip to main content
14,384,019 members
Rate this:
Please Sign up or sign in to vote.
hello everbody..
i have developed google line chart ..And i have done with it.
But the problem is i want to change color of the lines..? Can any one help me after seeing my code..?
I have taken data from database..
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"></asp:Literal>
<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: 660, height: 400,color: 'Green',");

str.Append("hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}");

str.Append("}); }");

str.Append("</script>");
lt.Text = str.ToString().Replace('*', '"');
}
catch
{ }
}
}
Posted
Rate this:
Please Sign up or sign in to vote.

Solution 2

You Have to Add this code here:




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,},
}");
   
Rate this:
Please Sign up or sign in to vote.

Solution 1

I would say that you have to change this part:

str.Append(" chart.draw(data, {width: 660, height: 400,color: 'Green',");
str.Append("hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}");



Or maybe if you can, it would be better to rewrite it all :). Because you are mixing database access with javascript client logic.
   

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100