Is it possible to represent one data series as points and another as lines?
In the chart below I want the blue 'Data' line to be represented as points whilst retaining the other series as lines, can this be done using the Google Visualisations?
I generated the graph above in this fiddle using the following code
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'Data');
data.addColumn('number', 'High');
data.addColumn('number', 'Low');
data.addRow(["A", 1, 5.5, 2.3]);
data.addRow(["B", 2, 5.5, 2.3]);
data.addRow(["C", 7, 5.5, 2.3]);
data.addRow(["D", 3, 5.5, 2.3]);
data.addRow(["E", 6, 5.5, 2.3]);
data.addRow(["F", 5, 5.5, 2.3]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {
width: 500, height: 400}
);
}
Yes you can!
http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html
In that link go to the section on "Series". You can specify each line as a series and set the lineWidth property to 0, overriding the default. That should have the effect of drawing no line and just the data points. In your case you can set the 1st series ("Data") to 0 and leave the rest alone.
Related
I'm trying to use the zoomToDates function on render of an amCharts Gantt plot: http://jsfiddle.net/Lw2bhxm0/1/
// Doesn't appear to work right...only a few of the events are shown
chart.addListener("rendered", function(event) {
event.chart.zoomToDates(new Date(2016, 1, 1), new Date(2016, 1, 2));
});
The result is much different than if I zoomed to the dates by conventional slider bars or by click and drag. Further, if I try to zoom to a date outside of the data range, it zooms to this same period with missing data. Am I using this wrong or is it a bug?
zoomToDates is a categoryAxis-based function, however the Gantt chart uses a date-based valueAxis to plot dates. You have to call the chart valueAxis' zoomToValues method instead:
chart.addListener("rendered", function(event) {
event.chart.valueAxis.zoomToValues(new Date(2016, 1, 1), new Date(2016, 1, 2));
});
Note: zoomToValues only accepts Date objects and millisecond values for a date-based valueAxis unlike zoomToDates, which can also accept string-based dates. You can use AmCharts.stringToDate to convert string-based dates to Date objects for use with zoomToValues, e.g. chart.zoomToValues(AmCharts.stringToDate("2016-02-01", "YYYY-MM-DD"), AmCharts.stringToDate("2016-02-02", "YYYY-MM-DD"));
Updated fiddle
My dataset is an array of json of the like :
var data = [ { company: "A", date_round_1: "21/05/2002", round_1: 5, date_round_2: "21/05/2004", round_2: 20 },
...
{ company: "Z", date_round_1: "16/01/2004", round_1: 10, date_round_2: "20/12/2006", round_2: 45 }]
and I wish to display both 'round_1' and 'round_2' time series as stacked line charts.
The base line would look like this :
var fundsChart = dc.lineChart("#fundsChart");
var ndx = crossfilter(data);
var all = ndx.groupAll();
var date_1 = ndx.dimension(function(d){
return d3.time.year(d.date_round_1);
})
fundsChart
.renderArea(true)
.renderHorizontalGridLines(true)
.width(400)
.height(360)
.dimension(date_1)
.group(date_1.group().reduceSum(function(d) { return +d.round_1 }))
.x(d3.time.scale().domain([new Date(2000, 0, 1), new Date(2015, 0, 1)]))
I have tried using the stack method to add the series but the problem resides in the fact that only a single dimension can be passed as argument of the lineChart.
Can you think of a turnaround to display both series while still using a dc chart?
Are you going to be filtering on this chart? If not, just create a different group on a date_2 dimension and use that in the stack. Should work.
If you are going to be filtering, I think you'll have to change your data model a bit. You'll want to switch to have 1 record per round, so in this case you'll have 2 records for every 1 record you have now. There should be 1 date property (the date for that round), an amount property (the contents of round_x in the current structure), and a 'round' property (which would be '1', or '2', for example).
Then you need to create a date dimension and multiple groups on that dimension. The group will have a reduceSum function that looks something like:
var round1Group = dateDim.group().reduceSum(function(d) {
return d.round === '1' ? d.amount : 0;
});
So, what happens here is that we have a group that will only aggregate values from round 1. You'll create similar groups for round 2, etc. Then stack these groups in the dc.js chart.
Hopefully that helps!
I've been playing with the newly released version 2.0.0 and I'm trying to replicate the composite axis example with some simple opinion poll data - 3 series (Yes,No,Unsure) against a single Y-axis.
I'm clearly making a basic error somewhere... the basic principle is you define one y-axis then pass that as a reference each time you want to layer on another set of data, but it doesn't appear to be treating them as three distinct series (there are no lines between points except in cases linking a couple of identical, but non-adjacent values, e.g. "No" 30% in 2002 and 2004, despite there being a different value in between).
Also, as per the commented-out line, I'm getting a D3 error if I try and switch the x-axis to Time instead.
JSFiddle live example
pollData = [
{ Year : 2001, Yes: 50, No: 40, Unsure: 10 },
{ Year : 2002, Yes: 60, No: 30, Unsure: 10 },
{ Year : 2003, Yes: 65, No: 25, Unsure: 5 },
{ Year : 2004, Yes: 75, No: 30, Unsure: 4 },
{ Year : 2005, Yes: 80, No: 10, Unsure: 5 }
];
var svg = dimple.newSvg("#chartContainer", 590, 400);
var myChart = new dimple.chart(svg, pollData);
myChart.setBounds(75, 30, 490, 330)
// Why won't a time axis working...? ("undefined is not a function" in D3)
// var dateAxis = myChart.addTimeAxis("x", "Year", "%Y");
var dateAxis = myChart.addCategoryAxis("x", "Year");
dateAxis.addOrderRule("Year");
var yesAxis = myChart.addMeasureAxis("y", "Yes");
var noAxis = myChart.addMeasureAxis(yesAxis, "No");
var unsureAxis = myChart.addMeasureAxis(yesAxis, "Unsure");
myChart.addSeries("Yes", dimple.plot.line, [dateAxis, yesAxis]);
myChart.addSeries("No", dimple.plot.line, [dateAxis, noAxis]);
myChart.addSeries("Unsure", dimple.plot.line, [dateAxis, unsureAxis]);
yesAxis.title = '%';
myChart.draw();
The issue here isn't the composite axes, which you are using correctly. It's the series definition. The first parameter of the addSeries either takes dimensions to disaggregate by or a field which is not in the data, which it uses as a label. The only limitation of this approach is that you cannot label your series by a dimension name in the data. In this case the first series for example (it applies to all), is disaggregated by "Yes" which for the line series means it tries to draw a line for each value of "Yes", meaning 1 line per row, hence all the single unconnected points. The fix is to just name your lines something different. For example:
myChart.addSeries("Y", dimple.plot.line, [dateAxis, yesAxis]);
myChart.addSeries("N", dimple.plot.line, [dateAxis, noAxis]);
myChart.addSeries("U", dimple.plot.line, [dateAxis, unsureAxis]);
Here's your updated fiddle: http://jsfiddle.net/RawyW/2/
If you want the names to look like they match you can just add a trailing space to the series names:
myChart.addSeries("Yes ", dimple.plot.line, [dateAxis, yesAxis]);
myChart.addSeries("No ", dimple.plot.line, [dateAxis, noAxis]);
myChart.addSeries("Unsure ", dimple.plot.line, [dateAxis, unsureAxis]);
This will also work
Im trying to print my table to PDF using the mpdf library in CodeIgniter, but I can't get the data
I'm using into the mpdf library. When I echo my $table, I can see/preview it, but when I write it to PDF, no data appears. Can someone help me? Thanks in advance..
$mpdf = new mPDF('', // mode - default ''
'', // format - A4, for example, default ''
7, // font size - default 0
'arial', // default font family
10, // margin_left
10, // margin right
5, // margin top
5, // margin bottom
2, // margin header
2, // margin footer1
'L'); // L - landscape, P - portrait
$mpdf->SetDisplayMode('fullpage');
$mpdf->WriteHTML($table);
$mpdf->Output();
Look for any whitespaces before <?php and after ?> (if exists) and remove them.
If that not work, post more php code please.
I am using Google Visualization Bar Chart and I would like to customize or change the tooltip text and format that appears when clicking on a bar.
I have been through documentation but I didn't find a way to implement
this. Do you know:
Is it even possible?
If so, could you provide some code examples ?
You can change the way the number is formatted by using the google.visualization.NumberFormat class.
var formatter = new google.visualization.NumberFormat({
fractionDigits: 0,
prefix: '$'
});
formatter.format(data, 1); // Apply formatter to second column.
If you need more flexibility, have a look at the PatternFormat class.
Here's the API reference.
Create a new data type for what you want in the tool tip:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Game');
data.addColumn('number', 'Transactions');
data.addColumn({type:'string', role:'tooltip'}); // here is the tooltip line
Now add the info that you want in your tooltip to you data:
['$FormatedWeekday', $SalesAll,'$ToolTip']
['$FormatedWeekday', $SalesAll,'$ToolTip']
['$FormatedWeekday', $SalesAll,'$ToolTip']
You will loose all the default data in your toll tip so you might want you re-package it:
$ToolTip = ''.$FormatedWeekday.' \u000D\u000A '.$SalesAll.' \u000D\u000A '."Red Cross Event";
the "\u000D\u000A" forces a line break
I was trying to do a similar thing with a Google pie chart. With the original code, on mouseover, the tooltip was showing the label, the raw number, and the percentage.
The orignal code was:
data.setValue(0, 0, 'Christmas trees');
data.setValue(0, 1, 410000000);
And the tooltip would show "Christmas trees 410000000 4.4%."
To format the text, I added a line to the code, so it was:
data.setValue(0, 0, 'Christmas trees');
data.setValue(0, 1, 410000000);
data.setFormattedValue(0, 1, "$410 million");
The result was a tooltip that read, "Christmas trees $410 million 4.4%"
I hope this helps!
Google Chart not support format html tooltip LineChart, BarChart.
I use:
google.visualization.events.addListener(chart, 'onmouseover', function(rowColumn){
myFunction();
});
in myFunction(): you can use popup to show more information.
There is a very easy way to do it, you just have to use one of the Formatters for the data:
// Set chart options
var options = {
hAxis: {format: 'MMM dd, y'}
};
// Format the data
var formatter = new google.visualization.DateFormat({pattern:'EEEE, MMMM d, y'});
formatter.format(data,0);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.AreaChart(document.getElementById('visualization'));
chart.draw(data, options);
You simply format the axis differently from data format, since the data format will only show up when you mouseOver.
Looks like you are now able to customize tooltip text by adding a special column that has role: 'tooltip': https://developers.google.com/chart/interactive/docs/customizing_tooltip_content
Another way to do it is by adding another column to your data that will act as the tooltip.
function drawVisualization() {
data = new google.visualization.DataTable()
data.addColumn('string', 'Date');
data.addColumn('number');
data.addColumn({type:'string',role:'tooltip'});
data.addRow();
base = 10;
data.setValue(0, 0, 'Datapoint1');
data.setValue(0, 1, base++);
data.setValue(0, 2, " This is my tooltip1 ");
data.addRow();
data.setValue(1, 0, 'Datapoint2');
data.setValue(1, 1, base++);
data.setValue(1, 2, "This is my second tooltip2");
// Draw the chart.
var chart = new google.visualization.BarChart(document.getElementById('visualization'));
chart.draw(data, {legend:'none', width:600, height:400});
}
FYI, All:
Google added custom HTML/CSS tooltips in September 2012:
https://google-developers.appspot.com/chart/interactive/docs/customizing_tooltip_content
I was also looking for the same option. Seems like there isn't any direct way. But we can disable the default tooltip and popup our own version using SelectHandler. Do let us know if you have figured out a more better/direct way. Thanks
The only way I found to disable it was to traverse the DOM in the hover handler (for pie charts anyway):
$(pie.Ac.firstElementChild.contentDocument.childNodes[0].childNodes[2].childNodes[1].firstChild.childNodes[2]).remove();
Which is hideous and subject to Google maintaining the structure that exists...
is there a better way?
Take a look at DataTable Roles and the tooltip example: https://developers.google.com/chart/interactive/docs/roles
label: 'Year', 'Sales', null, 'Expenses', null
`role: domain, data, tooltip, data, tooltip`
'2004', 1000, '1M$ sales, 400, '$0.4M expenses
in 2004' in 2004'
'2005', 1170, '1.17M$ sales, 460, '$0.46M expenses
in 2005' in 2005'
'2006', 660, '.66M$ sales, 1120, '$1.12M expenses
in 2006' in 2006'
'2007', 1030, '1.03M$ sales, 540, '$0.54M expenses
in 2007' in 2007'
The null labels are used as tooltip for 'Sales' and 'Expenses' respectively.