Related
Is it possible to format the labels on the xAxis of a charts_flutter time series chart to display hh:mm:ss. This answer explains how to go about formatting the code to display months and days but the information I need to display is collected a few times a minute.
charts.AutoDateTimeTickFormatterSpec doesn't allow for specifying seconds. The OP on the above question alluded to a DateTimeFactory which is mentioned in the charts_flutter gallery, but I'm also unsure how to use this, or if it is even of any use in this situation.
new charts.TimeSeriesChart(
getSeries(item),
animate: false,
primaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec: new charts.BasicNumericTickProviderSpec(zeroBound: false)
),
domainAxis: new charts.DateTimeAxisSpec(
tickFormatterSpec: new charts.AutoDateTimeTickFormatterSpec(
hour: new charts.TimeFormatterSpec(format: 'hh', transitionFormat: 'dd/MM hh:mm'),
)
),
),
Alternatively, is there a different chart I could use that would allow for this functionality? I see that charts.BarChart allows for Strings on the xAxis, but I specifically need a line chart - is there some way of specifying strings rather than datetimes on a line chart if the above formatting is not possible?
Because of a setting down in MinuteTimeStepper, there's no point. The smallest interval that you can achieve between labels appears to be 5 minutes. The MinuteTimeStepper defaults to intervals of 5, 10, 15, 20 and 30 minutes.
class MinuteTimeStepper extends BaseTimeStepper {
static const _defaultIncrements = const [5, 10, 15, 20, 30];
It has a constructor that allows you to pass in your own list, but I can't figure out how to get that to work.
Instead, I just modified it to become const [1, 5, 10... and that now draws labels with a 1 minute gap (if space is available).
Given that the closest the labels will be drawn (even with this change) is every minute, there's no point in including seconds.
Taking the sample and modifying the series data to
new TimeSeriesSales(new DateTime(2018, 8, 22, 13, 00, 00), 15),
new TimeSeriesSales(new DateTime(2018, 8, 22, 13, 00, 30), 5),
new TimeSeriesSales(new DateTime(2018, 8, 22, 13, 01, 00), 25),
new TimeSeriesSales(new DateTime(2018, 8, 22, 13, 01, 30), 20),
new TimeSeriesSales(new DateTime(2018, 8, 22, 13, 02, 00), 10),
gives labels that read 1 00, 01 and 02 (1PM exactly, 1 minute past and 2 minutes past) which are generated by the default format of mm and h mm. Note that the points at the half minute are drawn, but not labeled, as expected.
If you wanted these in 24 hour format you could add a TimeFormatterSpec like
minute: new charts.TimeFormatterSpec(
format: 'mm', // or even HH:mm here too
transitionFormat: 'HH:mm',
),
I'm trying to plot two line graphs on one ZingChart chart and struggling to figure out in what format I should pass the data.
Basically, I have an array of timestamp/integer pairs for today's and week ago data with one hour intervals e.g.:
today = [[timestamp1, 1], [timestamp2, 4], ......, [timestamp18, 7]] <-- assuming now it's 6pm so there is no data for the rest of the day
week_ago = [[timestamp1, 4], [timestamp2, 7], ......, [timestamp23, 1]] <-- full 24 hours data
The x-series should show hours from 00:00 to 23:00 and y-series is just integer. Also, on each graph point I'd like the tooltip to show the date and the integer value.
It sounds very simple and probably is but because I'm quite new to ZingChart I cannot figure it out.
Thanks a lot
Is this what you're trying to do? I used two series objects to contain my data: the first contains the time-series data for today, and the second contains the time-series data for last week. There's more information on time-series data and scales here.
Next, I created two x-axis scales. scaleX is tied to the first series object (today's data), and scaleX2 is tied to the second series object (or last week's data). You have the option to "blend" the two scales so that they appear on the same axis line (but this is more commonly done on the y-axis). Or you can turn off the visibility of the second x-axis, which is what I did in the below demo.
You can of course use tooltips (turned off on this demo), crosshairs, and/or a legend to further explain your data.
var myConfig = {
type: 'line',
utc: true, //If set to false, this will default to UTC time.
timezone: -5, //Currently set to EST time. You can specify your desired time zone.
scaleX: {
minValue: 1471496400000,
maxValue: 1471579200000,
step: 'hour',
transform: {
type: 'date',
all: '%g%a'
},
label: {
text: 'X-Axis'
},
item: {
fontSize: 10
},
maxItems: 24
},
scaleX2: {
minValue: 1470891600000,
maxValue: 1470974400000,
placement: 'default',
blended: true,
visible: false,
step: 'hour',
transform: {
type: 'date',
all: '%g%a'
},
item: {
fontSize: 10
},
},
scaleY: {
values: '0:10:1',
label: {
text: 'Y-Axis'
},
item: {
fontSize: 10
},
guide: {
lineStyle: 'solid'
}
},
plot: {
tooltip: {
visible: false
}
},
crosshairX: {
plotLabel: {
multiple: true
}
},
series: [
{ //Today, or 08/18/16 until 6am
scales: 'scaleX, scaleY',
values: [
[1471496400000, 3], //08/18/16 at midnight, EST time
[1471500000000, 7], //1am
[1471503600000, 5], //2am
[1471507200000, 9], //3am
[1471510800000, 4], //4am
[1471514400000, 5], //5am
[1471518000000, 2] //6am
],
text: 'Today'
},
{ //Last Thursday, or 08/11/16, all 24 hours
scales: 'scaleX2, scaleY',
values: [
[1470891600000, 5], //08/11/16 at midnight, EST time
[1470895200000, 6], //1am
[1470898800000, 4], //2am
[1470902400000, 9], //3am
[1470906000000, 1], //4am
[1470909600000, 5], //5am
[1470913200000, 6], //6am
[1470916800000, 3], //7am
[1470920400000, 5], //8am
[1470924000000, 7], //9am
[1470927600000, 8], //10am
[1470931200000, 2], //11am
[1470934800000, 3], //12am
[1470938400000, 1], //1pm
[1470942000000, 4], //2pm
[1470945600000, 6], //3pm
[1470949200000, 7], //4pm
[1470952800000, 3], //5pm
[1470956400000, 5], //6pm
[1470960000000, 6], //7pm
[1470963600000, 2], //8pm
[1470967200000, 3], //9pm
[1470970800000, 5], //10pm
[1470974400000, 4] //11pm
],
text: 'Last Week'
}
],
legend: {
align: 'center',
verticalAlign: 'bottom',
marker: {
type: 'circle',
size: 4,
showLine: true
},
borderWidth: 1
}
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
Hope that helps. I'm on the ZingChart team, and you can let me know if you have further questions. Familiarizing yourself with our Scales Tutorial should give you a good foundation for working with our library.
How make a possible to display 2 values in 1 column (split red and yellow columns in one)?
I have plan of sold and value of sold ordered by months.
For ex:
Jan -
plan:100, sold:80
Feb -
plan:150, sold:150
So i want to see 2(4 columns in mind, second value should overlap first value) columns:
100 80
150 150
first column will be colored in two colors because sold value less then plan (100/80 )
second column will be colored in one color(yellow), because second column overlap first value 150/150
isStacked: true doesn't overlay first column
Thanks for advise.
Code that i use JsFiddle and what I need
google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Plan');
data.addColumn('number', 'Sold');
data.addRows([
['Jan, 2015', 100, 80],
['Feb, 2015', 150, 150],
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
colors: ['red', 'yellow'],
width: 600,
height: 175,
title: 'Total',
legend: 'none',
});
}
I was just doing a pie sample so I set up a diff bar sample with your data. It has our PDF print code in it but shows what I think you want (except the color):
http://jsfiddle.net/1og99wL1/
function drawChart() {
var oldData = new google.visualization.DataTable();
oldData.addColumn('string', 'Date');
oldData.addColumn('number', 'Plan');
oldData.addRows([
['Jan, 2015', 100],
['Feb, 2015', 150],
]);
var newData = new google.visualization.DataTable();
newData.addColumn('string', 'Date');
newData.addColumn('number', 'Sold');
newData.addRows([
['Jan, 2015', 80],
['Feb, 2015', 150],
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var data = chart.computeDiff(oldData, newData);
var options = {
colors: ['yellow'],
diff: {
oldData: { opacity: 1, color: '#ff0000' },
newData: { opacity: 1, widthFactor: 1 }
},
legend: 'none',
width: 600
};
<!-- For the PDF print -->
google.visualization.events.addListener(chart, 'ready', AddNamespace);
chart.draw(data, options);
}
Result:
Comments:
You must use "oldData" and "newData" as the names for the datasets. You cannot just choose arbitrary names. If you do, the chart will draw but the "diff" option will not work (crazy, must be burned into the code). The color must be set like below with one color set in "colors" option and the other set in "diff" option.
I'm using Google Chart's stacked column chart, what i wanna achieve is to display the total on top of each column and i'm using annotation for this. As you look at the image, somehow only the annotation on the 5th column (1,307.20) is working as expected.
As i investigate , this seem like a bug of Google Chart , this bug can be explained like below
[[Date, Car, Motobike, {role: :annotation}],
[June 2015, 500, 0, 500],
[Feb 2015, 500, 600, 1100]]
[March 2015, 700, 0, 700],
With the above data, the annotation for Feb 2015 is the only which is displayed correctly , the other 2 do not since the last value of then is 0 , when I change the last value to 1 for June and March , the annotation is displayed correctly.
Then I think of a work around is to always display the "non-zero" data on top , and here's the result:
The annotations are moved on top properly , but as you can see, it's located within the column and what i want to achieve is to move it on top of the column .
I'm stuck with this for a while , Google Documentation doesn't help much with this case. Any help would be highly appreciated
I had the same problem, some of my series had 0 as my last value so the label would show on the X Axis instead of at the top. With dynamic data it would be a real challenge to ensure the last value was never 0. #dlaliberte gave me a hint where to start with this comment:
"As a workaround, you might consider using a ComboChart with an extra
series to draw a point at the top of each column stack. You'll have to
compute the total of the other series yourself to know where to put
each point."
I found a combo chart from google's gallery and opened jsfiddle to see what I could do. I left the data mostly, but changed the series name labels and made the numbers a little simpler. Don't get caught up on the purpose of the graph the data is regardless, I just wanted to figure out how to get my annotation to the top of the graph even when the last column was 0 (https://jsfiddle.net/L5wc8rcp/1/):
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Total', {type: 'number', role: 'annotation'}],
['Application', 5, 2, 2, 8, 0, 17, 17],
['Friend', 4, 3, 5, 6, 2, 20, 20],
['Newspaper', 6, 1, 0, 2, 0, 9, 9],
['Radio', 8, 0, 8, 1, 1, 18, 18],
['No Referral', 2, 2, 3, 0, 6, 13, 13]
]);
var options = {
isStacked: true,
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {5: {type: 'line'}},
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
That produced this graph, which is a great start:
As you can see since series 5 (our Total of the other series) is a type: 'line', so it will always point to the top of the stack. Now, I didn't necessarily want the line in my chart, since it was not used to compare continuous horizontal totals, so I updated series 5 with lineWidth: 0, and then made the title of that category '' so that it wouldn't be included in the legend as a stack (https://jsfiddle.net/Lpgty7rq/):
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', '', {type: 'number', role: 'annotation'}],
['Application', 5, 2, 2, 8, 0, 17, 17],
['Friend', 4, 3, 5, 6, 2, 20, 20],
['Newspaper', 6, 1, 0, 2, 0, 9, 9],
['Radio', 8, 0, 8, 1, 1, 18, 18],
['No Referral', 2, 2, 3, 0, 6, 13, 13]
]);
var options = {
isStacked: true,
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {5: {type: 'line', lineWidth: 0}},
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
And Voila!
Use alwaysOutside: true.
annotations: {
textStyle: {
color: 'black',
fontSize: 11,
},
alwaysOutside: true
}
You will want to use the annotations.alwaysOutside option:
annotations.alwaysOutside -- In Bar and Column charts, if set to true,
draws all annotations outside of the Bar/Column.
See https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart
However, with a stacked chart, the annotations are currently always forced to be inside the columns. This will be fixed in the next major release.
As a workaround, you might consider using a ComboChart with an extra series to draw a point at the top of each column stack. You'll have to compute the total of the other series yourself to know where to put each point. Then make the pointSize 0, and add the annotation column after this series.
I need to generate a chart like this one:
Specifically, I want to show both a positive value and a negative value for a time period (could be an hour, minute, etc.) and display it like this.
I could have sworn I saw something like this on the Google Visualization API Gallery the other day, but I can't find it now, and am not even sure what this kind of chart is called.
First, do you know what this kind of chart is called so I can possibly find documentation? Second, is there any way to implement such a chart with the Google Visualization API? If not, is there another common charting solution for web that I can achieve this with?
Thank you for your time.
This is called a "Stacked Bar Chart", and can indeed be created with the Google Visualisation API.
Simply use the "isStacked" property (described here; http://code.google.com/apis/visualization/documentation/gallery/barchart.html).
Here's some sample code (based off the default bar chart example provided by Google and updated to show the use of isStacked and some sample data from your example);
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number');
data.addColumn('number');
data.addRows(12);
data.setCell(0, 0, 'January');
data.setCell(1, 0, 'February');
data.setCell(2, 0, 'March');
data.setCell(3, 0, 'April');
data.setCell(4, 0, 'May');
data.setCell(5, 0, 'June');
data.setCell(6, 0, 'July');
data.setCell(7, 0, 'August');
data.setCell(8, 0, 'September');
data.setCell(9, 0, 'October');
data.setCell(10, 0, 'November');
data.setCell(11, 0, 'December');
data.setCell(0, 1, 19);
data.setCell(1, 1, 18);
data.setCell(2, 1, 20);
data.setCell(3, 1, 19);
data.setCell(4, 1, 18);
data.setCell(5, 1, 20);
data.setCell(6, 1, 19);
data.setCell(7, 1, 18);
data.setCell(8, 1, 20);
data.setCell(9, 1, 19);
data.setCell(10, 1, 18);
data.setCell(11, 1, 20);
data.setCell(0, 2, -12);
data.setCell(1, 2, -13);
data.setCell(2, 2, -11);
data.setCell(3, 2, -12);
data.setCell(4, 2, -13);
data.setCell(5, 2, -11);
data.setCell(6, 2, -12);
data.setCell(7, 2, -13);
data.setCell(8, 2, -11);
data.setCell(9, 2, -12);
data.setCell(10, 2, -13);
data.setCell(11, 2, -11);
data.setCell(0, 2, -12);
data.setCell(1, 2, -13);
data.setCell(2, 2, -11);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"S&P 500 Up/Down Performance Since 1980",
width:600, height:400,
isStacked:"true",
legend:"none" }
);
}
And the results...
Use ColumnChart instead of BarChart:
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
https://jsfiddle.net/0rrar9oq/16