We Keep Coding

Combined plot for hardware monitoring

I am monitoring CPU, RAM and disk IO for a computational pipeline that consists of multiple steps to process the input data. I would like to visualize the hardware consumption for the entire pipeline but also per step of the pipeline.
In order to render hardware consumptions, I'd like to draw a combined plot with jFreeChart with four vertically aligned subplots that all have the same x-axis - time. The top plot is supposed to be a gantt plot to indicate the step of the pipeline. In the second plot I'd like to render the CPU consumption over time. In the third plot the RAM consumption, the bottom plot is for disk IO. The aim is to visually slide horizontally over the plot and see, which step of the pipeline uses how much CPU, RAM and disk.
I'm all set up in eclipse, jFreeChart library installed and all my data is imported and ready to render. All I need is some guidance for how to set up the combined chart up, cause my code blows up, when I try to combine the Gantt plot (which is a category plot) and the CPU plot (which is XY plot):
public JFreeChart createChart() {
final JFreeChart ganttChart = ChartFactory.createGanttChart(
"Gantt of Tasks", // chart title
"Task", // domain axis label
"Time", // range axis label
createGanttDataset(), // data
true, // include legend
true, // tooltips
false // urls
);
JFreeChart cpuChart = ChartFactory.createTimeSeriesChart(
"CPU load", // title
"Time", // x-axis label
"CPU Load", // y-axis label
createCpuDataset(), // data
true, // create legend?
true, // generate tooltips?
false // generate URLs?
);
// parent plot...
final CombinedRangeCategoryPlot plot = new CombinedRangeCategoryPlot();
plot.setGap(10.0);
// add the subplots...
plot.add(ganttChart.getCategoryPlot(), 1);
plot.add(cpuChart.getCategoryPlot(), 1);
plot.setOrientation(PlotOrientation.VERTICAL);
// return a new chart containing the overlaid plot...
return new JFreeChart("Combined GANTT/CPU plot",
JFreeChart.DEFAULT_TITLE_FONT, plot, true);
}
private IntervalCategoryDataset createGanttDataset() {
final TaskSeries taskSeries = new TaskSeries("Tasks");
for (Map.Entry<DoubleLong, String> entry : algoStartEndDates.entrySet()) {
final String taskTitle = entry.getValue();
final long startDate = entry.getKey().n1;
final long endDate = entry.getKey().n2;
taskSeries.add(new Task(taskTitle, new SimpleTimePeriod(startDate, endDate)));
}
final TaskSeriesCollection collection = new TaskSeriesCollection();
collection.add(taskSeries);
return collection;
}
private XYDataset createCpuDataset() {
final TimeSeries timeSeries = new TimeSeries("CPU load");
for (CollectlData data : collectlData) {
final RegularTimePeriod t = new Millisecond(new Date(data.getUtcTime()));
timeSeries.add(t, data.getCpuData().getTotal());
}
final TimeSeriesCollection dataset = new TimeSeriesCollection();
dataset.addSeries(timeSeries);
dataset.setDomainIsPointsInTime(true);
return dataset;
}
I would expect this to create a combined plot, but I'm receiving the error message:
Caused by: java.lang.ClassCastException: class org.jfree.chart.plot.XYPlot cannot be cast to class org.jfree.chart.plot.CategoryPlot (org.jfree.chart.plot.XYPlot and org.jfree.chart.plot.CategoryPlot are in unnamed module of loader 'app')
at org.jfree.chart.JFreeChart.getCategoryPlot(JFreeChart.java:824) ~[jfreechart-1.0.15.jar:1.0.15]

creating XY Chart between different points with jfreechart

I am trying to create a interconnect between multiple points in a XY chart with jfreechart. This chart.add( 1.0 , 4.0 );chart.add( 2.0 , 5.0 ); chart.add( 2.5 , 7.0 ); sort of connects them in a line. Like this - wrong image. But I want to return back to the 1st point and create a chart like this -correct image. And I want to repeat it for multiple base nodes. Something like this -
for(int i=0;i<=1000;i++){
for(int j=0;j<=30;j++){
chart.add(arr1[i], arr2[j]);
}
}
How can I go about this ?

Try using multiple XYSeries:
In the XYSeries constructor set autosort to false to allow the lines to go backwards if needed, and set allowDuplicates to true if you may need to navigate a series through a point that has already been plotted.
final XYSeries series1 = new XYSeries("Data 1", false, true);
series1.add( 1.0 , 4.0 );
series1.add( 2.0 , 5.0 );
final XYSeries series2 = new XYSeries("Data 2", false, true);
series2.add( 1.0 , 4.0 );
series2.add( 2.5 , 7.0 );
final XYSeriesCollection data = new XYSeriesCollection();
data.addSeries(series1);
data.addSeries(series2);
final JFreeChart chart = ChartFactory.createXYLineChart(
"XY Chart",
"X",
"Y",
data,
PlotOrientation.VERTICAL,
true,
true,
false
);
To add further data series, use more invocations of XYSeriesCollection.addSeries(series).

Using GeoCharts with GWT application to create map. How do I draw shapes?

Currently I have a GWT 2.8 project. In that project I use Geocharts to draw out maps of the USA. The exact package I use is the following.
com.googlecode.gwt.charts.client.geochart
I was wondering if anyone had any example code that would allow me to draw shapes similar to how it is done here.
https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
The basics of the code I have is the following.
GeoChart chart = new GeoChart();
DataTable dataTable = DataTable.create();
GeoChartOptions options = GeoChartOptions.create();
##add some longitude and latitude points to draw out ###
chart.draw(dataTable, options);
A starting point would be greatly helpful.

the GeoChart from the google-visualization library uses SVG
it is easy to draw and add shapes, once the chart's 'ready' event fires
however, there is no option for drawing shapes similar to the maps api
meaning, you will not be able to set specific lat / lng coordinates for the shape's placement
here is a working snippet that adds a circle and triangle to the chart...
google.charts.load('current', {
callback: drawRegionsMap,
packages: ['geochart']
});
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.GeoChart(chartDiv);
google.visualization.events.addListener(chart, 'ready', function () {
var svg = chartDiv.getElementsByTagName('svg')[0];
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', '380');
circle.setAttribute('cy', '80');
circle.setAttribute('r', '72');
circle.setAttribute('stroke', '#000000');
circle.setAttribute('stroke-width', '2');
circle.setAttribute('fill', 'rgba(0,0,255,0.5)');
svg.appendChild(circle);
var poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
poly.setAttribute('points', '50,400 210,400 210,50');
poly.setAttribute('stroke', '#000000');
poly.setAttribute('stroke-width', '2');
poly.setAttribute('fill', 'rgba(255,0,0,0.5)');
svg.appendChild(poly);
});
chart.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Plotting a hysteresis loop with jFreeChart

I need to draw hysteresis loops and then calculate the area closed within the loop. I am using jFreeChart.
consider the following data:
hyst[0]=0;
hyst[1]=0;
hyst[2]=0.0098;
hyst[3]=0.0196;
hyst[4]=0.0489;
hyst[5]=0.0879;
hyst[6]=0.0684;
hyst[7]=0.0489;
hyst[8]=0.0196;
hyst[9]=0.0098;
hyst[10]=0;
hyst[11]=0;
hyst[12]=0;
hyst[13]=0;
hyst[14]=0;
hyst[15]=-0.0195;
hyst[16]=-0.0488;
hyst[17]=-0.0391;
hyst[18]=-0.0195;
hyst[19]=0;
hyst[20]=0;
When I try :
public void plotHysteresis()
{
int j=0;
int i=0;
XYSeries series1 = new XYSeries("Before Treatment");
// DefaultCategoryDataset series1 = new DefaultCategoryDataset();
for(i=0;i<6;i++)
{
series1.add(j,hyst[i]);
logTextArea.append(Integer.toString(j) +" : " +Double.toString(hyst[i])+"\n");
j=j+5;
}
j=j-5;
for(;i<11;i++)
{
j=j-5;
series1.add(j,hyst[i]);
logTextArea.append(Integer.toString(j) +" : " +Double.toString(hyst[i])+"\n");
}
for(;i<16;i++)
{
j=j-5;
series1.add(j,hyst[i]);
logTextArea.append(Integer.toString(j) +" : " +Double.toString(hyst[i])+"\n");
}
for(;i<21;i++)
{
j=j+5;
series1.add(j,hyst[i]);
logTextArea.append(Integer.toString(j) +" : " +Double.toString(hyst[i])+"\n");
}
XYSeriesCollection dataset = new XYSeriesCollection();
dataset.addSeries(series1);
JFreeChart chart = ChartFactory.createXYAreaChart(
"Hysteresis Plot", // chart title
"Pounds (lb)", // x axis label
"Distance (inches)", // y axis label
dataset, // data
PlotOrientation.VERTICAL,
true, // include legend
true, // tooltips
false // urls
);
chart.setBackgroundPaint(Color.white);
ChartPanel frame = new ChartPanel(chart);
frame.setVisible(true);
frame.setSize(plotPanel.getWidth(),plotPanel.getHeight());
plotPanel.add(frame);
plotPanel.repaint();
}
It gives me below result:
If I use :
JFreeChart chart = ChartFactory.createXYLineChart(
"Hysteresis Plot", // chart title
"Pounds (lb)", // x axis label
"Distance (inches)", // y axis label
dataset, // data
PlotOrientation.VERTICAL,
true, // include legend
true, // tooltips
false // urls
);
I gives:
I need a hysteresis plot that looks like:
I guess the difference is the way points are being connected. Please guide how to obtained the desired hysteresis loop with jFreeChart and then how to calculate area enclosed.
Thanks

How can I change the line color as well the symbols representing the data points. I want all of them to be uniform.
It appears you've settled on JFreeChart for your view. Synthesizing a few other comments,
You can make the colors and shapes of your several series homogeneous by providing a DrawingSupplier, as suggested here and shown here.
You can combine the series into a GeneralPath and estimate the area as outlined here.

XYDotRenderer tooltip not working

I am plotting using JFreeChart. By default the XYLineAndShapeRenderer can display tooltips. If I change it to a XYDotRenderer, the tooltips disappear. Am I missing anything? Here is the code snippet
JFreeChart chart = ChartFactory.createTimeSeriesChart(
"Test Prices","time","price",dataset,true,true,false);
XYPlot plot = (XYPlot)chart.getPlot();
XYDotRenderer renderer = new XYDotRenderer();
renderer.setDotHeight(10);
renderer.setDotWidth(10);
renderer.setLegendItemToolTipGenerator(
new StandardXYSeriesLabelGenerator("ToolTip {0}"));
plot.setRenderer(renderer);

It's not clear from your snippet whether you want item tooltips or legend tooltips; I will address both:
Unlike XYLineAndShapeRenderer, XYDotRenderer does not include support for chart entities, which is required for item tooltips.
Legend tooltips work correctly.
XYSeriesLabelGenerator legendGenerator = new StandardXYSeriesLabelGenerator();
renderer.setLegendItemToolTipGenerator(legendGenerator);