How to change color of column in column chart using asp.net?
Question
Answers
All replies
-
User-719153870 posted
Hi maideen5,
change color of each column in column chartAs the Google Chart doc mentioned, you need to add another column
{ role: 'style' }to your chart data so that it can display with custom color.As for how you can achieve this in your specific case which involves Asp.Net, Ajax and Google Chart, please check below demo which is built based on your code:
Aspx:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script> var chartData; // globar variable for hold chart data google.load("visualization", "1", { packages: ["corechart"] }); // Here We will fill chartData $(document).ready(function () { $.ajax({ url: "GoogleChartDemo.aspx/LoadTotalQR_Month", data: "", dataType: "json", type: "POST", contentType: "application/json; chartset=utf-8", success: function (data) { chartData = data.d; }, error: function () { alert("Error loading data! Please try again."); } }).done(function () { // after complete loading data google.setOnLoadCallback(drawChart_C); drawChart_C(); }); }); function drawChart_C() { var data = google.visualization.arrayToDataTable(chartData); data.addColumn({ type: 'string', role: 'style' }); var ColColors = ["blue", "red", "yellow", "black", "gray", "pink", "#303F9F", "green", "#ff99cc", "gold", "orange","#C51162"]; for (var i = 0; i < chartData.length-1; i++) { data.eg[i].c[2] = { v: ColColors[i] }; } var options = { title: "", pointSize: 5 }; var columnChart = new google.visualization.ColumnChart(document.getElementById('column-chart1')); columnChart.draw(data, options); } </script> </head> <body> <form id="form1" runat="server"> <div id="column-chart1" style="width: 600px; height: 500px"> </div> </form> </body> </html>vb:
Imports System.Data.SqlClient Imports System.Web.Services Public Class GoogleChartDemo Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load End Sub <WebMethod()> Public Shared Function LoadTotalQR_Month() As List(Of Object) Dim query As String = "SELECT SUM(AMOUNT) AS AMOUNT,MonthName,monthno FROM [dbo].[DP_Receipt_Head] " & "WHERE YEARNO = @YearNo Group BY MonthName,monthno order by Monthno" Dim constr As String = ConfigurationManager.ConnectionStrings("dbConString").ConnectionString Dim CharData_AREA As New List(Of Object)() CharData_AREA.Add(New Object() {"MonthName", "AMOUNT"}) Using con As New SqlConnection(constr) Using cmd As New SqlCommand(query, con) cmd.Parameters.AddWithValue("@YearNo", Date.Today.Year) con.Open() Using sdr As SqlDataReader = cmd.ExecuteReader(CommandBehavior.CloseConnection) While sdr.Read() CharData_AREA.Add(New Object() {sdr("MonthName"), sdr("AMOUNT")}) End While End Using Return CharData_AREA End Using End Using End Function End Classsql:
create table DP_Receipt_Head(id int identity(1,1),Amount int, [MonthName] varchar(50),[monthno] int,[YEARNO] int) insert into DP_Receipt_Head values(55,'Jan',1,2020),(66,'Feb',2,2020),(77,'Mar',3,2020),(88,'Apr',4,2020), (99,'May',5,2020),(45,'Jun',6,2020),(47,'Jul',7,2020),(36,'Aug',8,2020),(58,'Sep',9,2020),(70,'Oct',10,2020), (25,'Nov',11,2020),(36,'Dec',12,2020) select * from DP_Receipt_Head SELECT SUM(AMOUNT) AS AMOUNT,MonthName,monthno FROM [dbo].[DP_Receipt_Head] WHERE YEARNO = 2020 Group BY MonthName,monthno order by Monthno
The parts you need to update have been highlighten, as you can see, you need to add a color array to store the colors you want to set to your each column, then you need to add a new column to your chart data, set the color array as the value of your new added column.
Here's the final result of this demo:
Best Regard,
Yang Shen
