Is there any way to change the UI or design of the google chart. I want my chart to look like
http://www.flickr.com/photos/41695354#N08/6020984362/in/photostream/
First you need to load the right chart API. For line charts,
<script> google.load("visualization", "1", {packages:["corechart"]}); </script>
Then set the graph options like this
chart.draw(data, {width: X, height: Y, title: <graph Title>, pointSize:4, legend:bottom,
hAxis: {title: <x-axis title>, titleTextStyle: {color: 'red'}},
vAxis: {title: <Y-axis title>, titleTextStyle: {color: 'red'}}
});
You can vary the value for pointSize to either increase or decrease the value points on the graph. If you don't want the points to show on the graph, delete the pointSize option.
Google automatically assigns colors to the different data sets you have. It may be possible to choose specific colors
To change the color of a data series, line chart, etc, use the following code :
var options = {
title: 'My Chart',
series: {0:{color:'F38921',lineWidth:2}}
};
If you're wanting to change the colors, check out this color picker that lets your preview different themes on google visualization charts/graphs
http://www.philipwhitt.com/projects/google-visualization-theme-picker
Select the color list you want then put them in the colors options like so:
var chartOptions = {
title: 'Some Title',
colors: ['#657CD0','#DA68A0','#06C3C0','#777B80','#7C6D70','#7C0850','#F75870']
};
From your image link given, your desired customizations can be done via Google Chart API options (e.g. setting legend at bottom, setting columns/series colours)
If you want to configure the look and feel of a Dashboard, you can (i) adapt the Google Chart CSS Themes at http://battlehorse.github.com/google-charts-controls-gallery/#google-visualization-controls-theme-plus which would customize the chart itself (ii) consult ThemeForest Google Chart Themes such as http://themeforest.net/item/dream-works-responsive-admin-template/full_screen_preview/1988987?ref=gundoel007 , but most of them only configure the look and feel outside the actual chart.
Related
I look on the internet for some example of histogram with echart.js but only find this one.
I want build somewhat similar to this one with single bar highlighted with custom tooltip.
thanks in adavance for your help and time :)
Can you provide the code you are using? You can change the tooltip option inside series, and customize it as you want it. Use the echarts documentation that gives you a lot of options to make a tooltip echarts documentation.
The code would look like these:
options:{
tooltip:{},
series: [{
id: 'taskData',
type : 'scatter',
// ...
tooltip: {
// DO SOMETHING HERE
}
}]
}
I'm trying to recreate a chart (the one below) using Highcharts. I'm using a basic bar chart, and I'm wondering if there is a way to get a vertical line showing the average of all the bars? I have the value calculated, I just need it to display as the picture shows. Can I do this using Highcharts?
Yes. You can add it as a plotline, like this:
yAxis: {
// ...Options
plotLines: [{
color: 'red',
value: '15', // Insert your average here
width: '1',
zIndex: 4 // To not get stuck below the regular plot lines or series
}]
}
See this JSFiddle demonstration.
I'm using the Google Visualization API for my charts but I can't figure out how to format the line chart.
My chart looks something like this:
http://jsfiddle.net/Pw7Dz/
How do I make the curve start right next to the axis, as opposed it having an offset like it does now?
Is this what you need?
Added: hAxis: {viewWindow: {min: 0.5, max: 2.5}} to options object.
Full list of options is available here.
I'm new with Google Charts and I am not able to obtain a fine result with the texts surrounding the graph.
This is how my chart looks:
As you can see, it does cut both Horizontal-Axis and Legends, so the final result is not as good as It could be. Is there a way to solve this? I've been reading the official documentation and some posts from here, but I haven't found the way to do this.
Recap: How do we modify the legend or the axis texts so they are fully visible?
After some time experimenting, I daresay it is not posible to choose how much part of the words on legend or axis you can show.
However, you can play with their sizes and position so you get -more or less- what we were looking for.
This is what can be done:
legend: {position: 'top', textStyle: {fontSize: 14}}
I've also made the image a little bit bigger so it fits the x-axis without problems (There was also the option of making its text smaller).
So doing this, this is what you get:
Its basically about setting your chart area vs width / height.
width: [yourChoice]px,
chartArea: {width: '50%'}
ref https://stackoverflow.com/a/6870732/661584
Also as #ArcDare says using the other available styling options such as font size etc
For optmized chart area,
chartArea: {'width': '90%', 'height': '60%'},
legend: { position: 'bottom' },
hAxis : { textStyle : { fontSize: 10} },
vAxis : { textStyle : { fontSize: 10} },
The trick is setting axis textStyle fontsize will enable better placement of legend on the bottom of the chart as the chart Area is about 60-70%
Feel free to use my custom Google Charts plugin which creates both chart and table.
https://github.com/cosmoarunn/gapiExt
I am using the Google charts API. Is there a way to hide the legend for a scatter plot?
You can disable the legend by using 'none' as the position:
legend: {position: 'none'}
A bit cleaner way is
legend: 'none'
var options = {
title: 'USA City Distribution',
legend: 'none'
};
In drawChart() function, Add legend: none property in your chart options object
In my case I use:
library: {legend:{position:'none'}}
pie_chart #type_values,library: {legend:{position:'none'}}
It doesn't appear so from the API, you can only set a position, with no option for "none". You could probably remove it with javascript though, if you can identify the containing element.
Edit: it actually appears as though you can omit the chdl= parameter to get a scatter without a legend.