There are two ways to set line colors: set the "colors" option to an array
of color strings (the first line uses the first color, the second uses the
second, and so on), or set the series.<series index>.color option, which
allows you to explicitly define the color of any series. Use like this:
var options = {
title: 'Sales Analysis',
vAxis: {
title: 'sales'
},
hAxis: {
title: 'date'
},
// set the colors option:
colors: ['#AA00CC'],
// - or - set the series option
// the series.<series index>.color option will override the colors
option (for the particular series) if both are set
series: {
0: {
color: '#AA00CC'
}
}
};
All of the configuration options for LineCharts are listed
here<https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options>.
Make sure you use the same format to enter them - entering an option like
this won't work:
var options = {
hAxis.title: 'sales'
};
When using dates for the axis, you have a continuous axis, so the axis
labels do not necessarily correspond to data points. Labels correspond to
the vertical gridlines, so to increase the number of labels, you need to
set the hAxis.gridlines.count option. The API may override the settings
you choose, though, if it determines that it can't draw things neatly.
If your graph grows to include 1000+ points, I would suggest using the
ChartRangeFilter<https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter>to
allow users to pan and zoom the chart, which will make it much easier to
read.
On Tuesday, September 11, 2012 2:19:39 AM UTC-4, gnik wrote:
>
> Thanks a ton mate.... it worked like magic...
> the only thing .... how can i set more options to it...like changing
> colors , etc...
> and why is the date interval coming of two days instead of one day ......
> how to make it daily basis x axis and what will happen to the graph size
> if i continue for say 1000+ days... ?
>
>
> On Friday, September 7, 2012 3:54:16 PM UTC+5:30, gnik wrote:
>>
>> i have a mysql database . i want to plot a dynamic graph between two of
>> my table colums named as date and sales .where date is stored in this
>> format("yyyy-mm-dd") and sales are integers (not float )
>> please help me with this. though i am successful in plotting data but the
>> graph is not properly drawn . i guess there's an issue with intervals.
>>
>> i want
>> x axis interval as : aug 30 , aug 31 , sep 01 , sep 02 and so on.....
>> y axis interval as : 0 , 10 , 20 ,30 ....
>>
>>
>> my code goes like this :
>>
>>
>> <?php
>> include('dbconnect.php');
>> $sql_data = mysql_query("SELECT date , sales FROM analytics WHERE
>> id ='12345' ORDER BY date ASC");
>>
>> ?>
>>
>> <html>
>> <head>
>> <script type="text/javascript" src="https://www.google.com/jsapi
>> "></script>
>>
>> <?php
>> echo "<script type=text/javascript>";
>> echo "google.load(\"visualization\", \"1\",
>> {packages:[\"corechart\"]});";
>> echo "google.setOnLoadCallback(drawChart);";
>>
>> echo "function drawChart() { ";
>> echo "var data = google.visualization.arrayToDataTable([
>> ['Date', 'Score'],";
>> while($result = mysql_fetch_array($sql_data))
>> {
>> $t1 = strtotime($result['date']);
>> $t2 = date("d",$t1);
>> $display .= "[".$t2.",".$result['sales']."],";
>> }
>>
>> $display .= " ]);";
>>
>> echo $display;
>>
>> echo "var options = {
>> title: 'Sales Analysis' ,
>> vAxis: {title: \"sales\"},
>> hAxis: {title: \"date\"} ,
>>
>> };";
>>
>> echo "var chart = new
>> google.visualization.LineChart(document.getElementById('chart_div'));";
>> echo "chart.draw(data, options);";
>> echo "}
>> </script>";
>>
>> ?>
>> </head>
>> <body>
>> <div id="chart_div" style="width: 900px; height: 500px;"></div>
>> </body>
>> </html>
>>
>>
>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/ck40GznOZFYJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
