Related
I created a simple chart:
const myChart = new Chart(document.getElementById('myChartChart').getContext('2d');, {
type: 'scatter',
data: {
datasets: [{
label: 'Dataset',
data: [{
x: -40,
y: 34,
}, {
x: -10,
y: 45,
}, {
x: 140,
y: 45,
}],
fill: true,
stepped: true,
}]
},
options: {
responsive: true,
scales: {
x: {
suggestedMin: -50,
suggestedMax: 150,
ticks: {
callback: function(value, index, values) {
return value + ' °C';
}
},
},
y: {
suggestedMin: 32,
suggestedMax: 46,
ticks: {
callback: function(value, index, values) {
return value + ' bar';
}
},
}
},
plugins: {
legend: {
display: false
}
}
}
});
Fiddle: https://jsfiddle.net/o6b97xL2
But I don't like to have static periodical grid lines and labels but only on my three data points.
With callbacks I only get the defined steps from the grid. How can I achieve something like this:
Image Link (You need at least 10 reputation to post images)
You can define afterBuildTicks callbacks on both axes. In there, you replace the axis ticks with your own ticks extracted from your data.
Please take a look at your amended code and see how it works.
const data = [
{ x: -40, y: 34 },
{ x: -10, y: 45 },
{ x: 140, y: 45 }
];
myChart = new Chart('myChartChart', {
type: 'scatter',
data: {
datasets: [{
label: 'Dataset',
data: data,
fill: true,
stepped: true,
}]
},
options: {
responsive: true,
scales: {
x: {
suggestedMin: -50,
suggestedMax: 150,
afterBuildTicks: axis => axis.ticks = data.map(v => ({ value: v.x })),
ticks: {
callback: v => v + ' °C'
}
},
y: {
suggestedMin: 32,
suggestedMax: 46,
afterBuildTicks: axis => axis.ticks = data.map(v => ({ value: v.y })),
ticks: {
callback: v => v + ' bar'
}
}
},
plugins: {
legend: {
display: false
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<canvas id="myChartChart"></canvas>
I'm trying to create a hover effect for two bar at the same time, is there any possibility to achieve this by using any existing method or external css to achieve this kind of hover effect, on hover event present in highcharts I can only change the colour of the single bar image.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/highstock/6.0.3/highstock.src.js"></script>
<script src="http://code.highcharts.com/modules/xrange.js"></script>
<div id="container" style="width: 100%; height: 100px"></div>
Highcharts
Highcharts.setOptions({
time: {
useUTC: false
}
});
Highcharts.chart('container',{
chart:{
type : 'xrange',
backgroundColor : '0C0D19',
renderTo:'container',
marginRight: 100,
},
colors : ['#45AD59','#6699FF'],
title : { text : '' },
credits : { enabled : false },
legend : { enabled : false },
exporting : {
buttons : {
contextButton : {
enabled : false
}
}
},
plotOptions : {
series : {
cursor : 'pointer',
}
},
tooltip : { enabled: false },
xAxis : {
type : 'datetime',
opposite : true,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
tickLength: 0,
tickInterval:3600*1000,
gridLineColor:'#2c2d39',
gridLineWidth:1,
min : 1545281770000,
minPadding: 0,
dateTimeLabelFormats : {
millisecond: '%I:%M %P',
second: '%I:%M %P',
minute: '%I:%M %P',
hour: '%I:%M %P',
day: '%I:%M %P',
week: '%I:%M %P',
month: '%I:%M %P',
year: '%I:%M %P'
},
crosshair : {
snap : false,
zIndex : 100,
label: {
enabled: true,
format: '{value:%I:%M %P}'
}
},
labels : {
align : 'left',
style : {
color : 'rgba(255, 255, 255, 0.7)',
fontSize : '12px'
}
},
},
yAxis: {
title: {
text: ''
},
plotBands: [{
from: -0.21001,
to: 0.3291,
color: '#00401f'
},{
from:0.5570,
to:1.275,
color:'#2f4776'
}],
categories: ['Reported','Tracked'],
reversed: true,
labels:{
align:'center',
style:{
color:'rgba(255, 255, 255, 0.7)',
fontSize:'12px'
},
formatter: function() {
return this.value + '<img></img>';
},
useHTML: true
},
lineColor: '#2c2d39',
lineWidth: 1
},
series: [{
pointWidth: 20,
borderWidth:0,
borderRadius:0,
data : [{
"x": 1545281770000,
"x2": 1545284950000,
"y": 1,
"floor": 3,
"room": "3001",
"value": true,
"hoverId": 0
}, {
"x": 1545285388000,
"x2": 1545291448000,
"y": 1,
"floor": 3,
"room": "3001",
"value": true,
"hoverId": 1,
}, {
"x": 1545303407000,
"x2": 1545312167000,
"y": 1,
"floor": 2,
"room": "2001",
"value": true,
"hoverId": 2,
}, {
"x": 1545312218000,
"x2": 1545312338000,
"y": 1,
"floor": 3,
"room": "3000",
"value": true,
"hoverId": 3,
}, {
"x": 1545314138000,
"x2": 1545314738000,
"y": 1,
"floor": 2,
"room": "2001",
"value": true,
"hoverId": 4,
}
,{
x:1545281701745,
x2:1545285267354,
y:0,
},
{
x:1545285327157,
x2:1545292261051,
y:0,
},{
x:1545303345999,
x2:1545314757609,
y:0,
className:'manual',
}
],
dataLabels: {
enabled: false
}
}]
})
CSS
#container .highcharts-grid.highcharts-yaxis-grid path{
display: none;
}
#container .highcharts-axis.highcharts-xaxis path{
display: none;
}
#container .highcharts-point.highcharts-point.highcharts-color-0 rect{
height: 15px;
y: 8;
}
#container .highcharts-point.highcharts-point.highcharts-color-1 rect{
y: 27;
height: 18px;
}
Here is a JSFiddle
You can make it using Highcharts.SVGRenderer which allows you to plot a rectangle and Highcharts.SVGElement.on method which allows you to add events on SVG elements (for example series group). Check demo and code posted below.
Code:
chart: {
type: 'xrange',
backgroundColor: '0C0D19',
renderTo: 'container',
marginRight: 100,
events: {
load: function() {
var chart = this,
series = chart.series[0],
seriesSvg = series.group,
seriesSvgBBox = seriesSvg.getBBox(),
width = 80,
height = seriesSvgBBox.height,
y = chart.plotTop + seriesSvgBBox.y,
x,
tooltip;
seriesSvg.on('mousemove', function(e) {
if (tooltip) {
tooltip.destroy();
}
x = e.offsetX - width / 2
tooltip = chart.renderer
.rect(x, y, width, height)
.attr({
fill: 'rgba(255, 255, 255, 0.2)'
})
.css({
'pointer-events': 'none'
})
.add()
.toFront();
});
seriesSvg.on('mouseout', function(e) {
tooltip.destroy();
tooltip = null;
});
}
}
}
Demo:
http://jsfiddle.net/BlackLabel/z2h59pLf/2/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
https://api.highcharts.com/class-reference/Highcharts.SVGElement#on
I have a problem with amCharts after trying a lot of settings.
I want to limit the range of the y-axis from 1-150 and do not want amCharts to plot data points with the value 0. There is no time-period in the x-range. I created a fiddle of my actual result: http://jsfiddle.net/zt9exqwq/5/
var chartData = [{"position":"114","datum":"20.12.2014"},{"position":"0","datum":"24.12.2014"},{"position":"127","datum":"29.12.2014"},{"position":"128","datum":"02.01.2015"},{"position":"125","datum":"05.01.2015"},{"position":"132","datum":"09.01.2015"},{"position":"0","datum":"13.01.2015"},{"position":"131","datum":"17.01.2015"},{"position":"0","datum":"20.01.2015"},{"position":"0","datum":"24.01.2015"},{"position":"88","datum":"28.01.2015"},{"position":"89","datum":"01.02.2015"},{"position":"94","datum":"04.02.2015"},{"position":"86","datum":"08.02.2015"},{"position":"80","datum":"12.02.2015"},{"position":"83","datum":"16.02.2015"},{"position":"82","datum":"19.02.2015"},{"position":"0","datum":"23.02.2015"},{"position":"109","datum":"27.02.2015"},{"position":"100","datum":"03.03.2015"},{"position":"98","datum":"06.03.2015"},{"position":"92","datum":"10.03.2015"},{"position":"99","datum":"14.03.2015"},{"position":"97","datum":"18.03.2015"},{"position":"93","datum":"21.03.2015"},{"position":"0","datum":"25.03.2015"},{"position":"0","datum":"29.03.2015"},{"position":"108","datum":"02.04.2015"},{"position":"106","datum":"06.04.2015"},{"position":"109","datum":"10.04.2015"},{"position":"0","datum":"14.04.2015"},{"position":"107","datum":"17.04.2015"},{"position":"114","datum":"21.04.2015"},{"position":"109","datum":"25.04.2015"},{"position":"0","datum":"29.04.2015"},{"position":"111","datum":"02.05.2015"},{"position":"101","datum":"06.05.2015"},{"position":"84","datum":"10.05.2015"},{"position":"0","datum":"14.05.2015"},{"position":"74","datum":"17.05.2015"},{"position":"71","datum":"21.05.2015"},{"position":"72","datum":"25.05.2015"},{"position":"72","datum":"29.05.2015"},{"position":"0","datum":"01.06.2015"},{"position":"66","datum":"05.06.2015"},{"position":"73","datum":"09.06.2015"},{"position":"78","datum":"13.06.2015"},{"position":"72","datum":"16.06.2015"},{"position":"65","datum":"20.06.2015"},{"position":"67","datum":"24.06.2015"},{"position":"72","datum":"28.06.2015"},{"position":"74","datum":"02.07.2015"},{"position":"68","datum":"05.07.2015"},{"position":"67","datum":"09.07.2015"},{"position":"72","datum":"13.07.2015"},{"position":"74","datum":"17.07.2015"},{"position":"73","datum":"21.07.2015"}];
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataDateFormat": "DD.MM.YYYY",
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"bullet": "round",
"bulletBorderAlpha": 0.5,
"bulletColor": "#FFFFFF",
"bulletSize": 8,
"hideBulletsCount": 50,
"lineThickness": 2,
"useLineColorForBulletBorder": true,
"valueField": "position",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>"
}],
"valueAxes": [{
"integersOnly": true,
"maximum": 150,
"minimum": 1,
"reversed": true,
"axisAlpha": 1,
"dashLength": 2,
"position": "left",
"title": "Position"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":0.2,
"valueLineAlpha":0.2
},
"categoryField": "datum",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
},
"dataProvider": chartData
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
#chartdiv {
width : 100%;
height : 500px;
}
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
Here's what it actual looks like:
And here's what I want to have:
Has anybody an idea? Thanks very much.
Value axis
To set the the scale for the value axis, we can use its minimum and maximum properties. However, even if we set those two, the chart will try to round up value axis increments to "pretty" numbers, hence it will still display 0.
To work around that we will use another value axis property strictMinMax. It will ensure that our value axis scale is crisply cut at 0 and 15 values.
However we now lose the first and last labels. We'll use guides to add labels for 1 and 150 values.
Combined code for the above is this:
"valueAxes": [{
"integersOnly": true,
"maximum": 150,
"minimum": 1,
"strictMinMax": true,
"reversed": true,
"axisAlpha": 1,
"dashLength": 2,
"position": "left",
"title": "Position",
"guides": [{
"value": 1,
"label": "1"
}, {
"value": 150,
"label": "150"
}]
}]
Gaps
Zero is a valid number and a value. If you need to display a gap in place of the zero-value data points, you will need to set the value for those to null.
If you can't replace that directly in your data, you can add some custom code to iterate through the data and replace zero values with null:
for(var i = 0; i < chartData.length; i++) {
if (chartData[i].position == 0)
chartData[i].position = null;
}
In order to display gaps, we will also need to set connect: false for the graph.
And since your data is at irregular date intervals, we'll also set gapPeriod to some larger period (say 10) so that gaps are not displayed whenever you have a distance bigger than 1 day between two adjacent data points.
Here's combined working chart:
var chartData = [{"position":"114","datum":"20.12.2014"},{"position":"0","datum":"24.12.2014"},{"position":"127","datum":"29.12.2014"},{"position":"128","datum":"02.01.2015"},{"position":"125","datum":"05.01.2015"},{"position":"132","datum":"09.01.2015"},{"position":"0","datum":"13.01.2015"},{"position":"131","datum":"17.01.2015"},{"position":"0","datum":"20.01.2015"},{"position":"0","datum":"24.01.2015"},{"position":"88","datum":"28.01.2015"},{"position":"89","datum":"01.02.2015"},{"position":"94","datum":"04.02.2015"},{"position":"86","datum":"08.02.2015"},{"position":"80","datum":"12.02.2015"},{"position":"83","datum":"16.02.2015"},{"position":"82","datum":"19.02.2015"},{"position":"0","datum":"23.02.2015"},{"position":"109","datum":"27.02.2015"},{"position":"100","datum":"03.03.2015"},{"position":"98","datum":"06.03.2015"},{"position":"92","datum":"10.03.2015"},{"position":"99","datum":"14.03.2015"},{"position":"97","datum":"18.03.2015"},{"position":"93","datum":"21.03.2015"},{"position":"0","datum":"25.03.2015"},{"position":"0","datum":"29.03.2015"},{"position":"108","datum":"02.04.2015"},{"position":"106","datum":"06.04.2015"},{"position":"109","datum":"10.04.2015"},{"position":"0","datum":"14.04.2015"},{"position":"107","datum":"17.04.2015"},{"position":"114","datum":"21.04.2015"},{"position":"109","datum":"25.04.2015"},{"position":"0","datum":"29.04.2015"},{"position":"111","datum":"02.05.2015"},{"position":"101","datum":"06.05.2015"},{"position":"84","datum":"10.05.2015"},{"position":"0","datum":"14.05.2015"},{"position":"74","datum":"17.05.2015"},{"position":"71","datum":"21.05.2015"},{"position":"72","datum":"25.05.2015"},{"position":"72","datum":"29.05.2015"},{"position":"0","datum":"01.06.2015"},{"position":"66","datum":"05.06.2015"},{"position":"73","datum":"09.06.2015"},{"position":"78","datum":"13.06.2015"},{"position":"72","datum":"16.06.2015"},{"position":"65","datum":"20.06.2015"},{"position":"67","datum":"24.06.2015"},{"position":"72","datum":"28.06.2015"},{"position":"74","datum":"02.07.2015"},{"position":"68","datum":"05.07.2015"},{"position":"67","datum":"09.07.2015"},{"position":"72","datum":"13.07.2015"},{"position":"74","datum":"17.07.2015"},{"position":"73","datum":"21.07.2015"}];
for(var i = 0; i < chartData.length; i++) {
if (chartData[i].position == 0)
chartData[i].position = null;
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataDateFormat": "DD.MM.YYYY",
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"bullet": "round",
"bulletBorderAlpha": 0.5,
"bulletColor": "#FFFFFF",
"bulletSize": 8,
"hideBulletsCount": 50,
"lineThickness": 2,
"useLineColorForBulletBorder": true,
"valueField": "position",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>",
"connect": false,
"gapPeriod": 10
}],
"valueAxes": [{
"integersOnly": true,
"maximum": 150,
"minimum": 1,
"strictMinMax": true,
"reversed": true,
"axisAlpha": 1,
"dashLength": 2,
"position": "left",
"title": "Position",
"guides": [{
"value": 1,
"label": "1"
}, {
"value": 150,
"label": "150"
}]
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":0.2,
"valueLineAlpha":0.2
},
"categoryField": "datum",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
},
"dataProvider": chartData
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
#chartdiv {
width : 100%;
height : 500px;
}
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
I am trying to draw a chart as below but the x axis stops at end of year 11 which it does not at the moment. I set max to 19 but it did not work.How can I get rid of those grey lines after end of Year 11?
Also for x-axis labels I want to decrease the font size of second category ([1,2,3,4]) and Year with bigger font but in label styles the font size property applies to all labels.
var l=19;
var m=-0.6;
new Highcharts.Chart({
chart: {
renderTo: elementId,
spacingLeft: 10,
spacingRight: 10
},
title: {
text: subject
},
xAxis: {
categories: [{
name: "Year 7",
categories: [1, 2, 3, 4]
}, {
name: "Year 8",
categories: [1, 2, 3, 4]
}, {
name: "Year 9",
categories: [1, 2, 3, 4]
}, {
name: "Year 10",
categories: [1, 2, 3, 4]
}, {
name: "Year 11",
categories: [1, 2, 3, 4]
}],
labels: {
style: {
fontSize: '7.5px'
}
},
plotLines: [{
color: '#5DA06E',
width: 2,
value: l
}, {
color: '#5DA06E',
width: 2,
value: -1
}],
//max: l
},
yAxis: [{
labels: {
enabled: false
},
title: {
text: null
},
min: 0,
max: 1000
},
{
title: {
text: null
},
labels: {
style: {
fontSize: '7.5 px'
},
align: 'left',
x: 3,
formatter: function () {
var value = change[this.value];
return value !== 'undefined' ? value : this.value;
}
},
tickPositions: [0, 280, 360, 440, 520, 600, 680, 760, 840, 920, 1000],
gridLineColor: 'white',
opposite: true,
min: 0,
max: 1000
}],
series: [{
type: 'line',
data: [[m, 0], [l, 280]],
color: '#A5DEC1',
}, {
type: 'line',
data: [[m, 80], [l, 360]],
color: '#94D0A3',
},
...
strong text
Are m and l params constant? Or can you change them? If yes, then see: http://jsfiddle.net/TFhd7/373/
In short: Categories reserves a place from -0.5 to 0.5 with category index. For example Year7 -> 4 means x-values from 3.5 to 4.5. So according to this information let's change that values:
var l = 19.5;
var m = -0.5;
Now modify extremes and plotLines:
plotLines: [{
color: '#5DA06E',
width: 2,
value: l
}, {
color: '#5DA06E',
width: 2,
value: m
}],
max: l - 0.5,
min: m + 0.5,
I'm using flot and with the JSON returned, and the initialzation provided, only the first series is visible on the chart, however, the legend displays all 3 series labels. Any Idea what I'm doing wrong?
var data = [];
function onDataReceived(seriesData) {
var options = {
series: { stack: false,
lines: { show: true, steps: false },
bars: { show: false, barWidth: 0.5, align: 'center', horizontal: true },
points: { show: true, radius: 3, symbol: 'circle' }
},
yaxis: { show: true, tickLength: 0 },
xaxis: { tickSize: [1, "month"], tickLength: 0, mode: 'time', timeformat: '%b %y' },
legend: { show: true, container: $('##(ctlId)chartLegend'), noColumns: 3 },
grid: { borderWidth: 0, hoverable: true, clickable: true }
};
var p = $.plot($('##(ctlId)'), seriesData.seriesData, options);
And My MVC Handler:
return Json(new
{
axisNames = new List<string[]>() { },
seriesData = new[]
{
new {
color = "#e17009",
label = "RN",
data = new List<string[]>() {
new string[] {DateTime.Parse("7/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "4.2"},
new string[] {DateTime.Parse("8/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "4.8"},
new string[] {DateTime.Parse("9/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.5"},
new string[] {DateTime.Parse("10/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "5.0"},
new string[] {DateTime.Parse("11/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "3.6"}
}
},
new {
color = "#ff0000",
label = "RA",
data = new List<string[]>() {
new string[] {DateTime.Parse("7/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "3.2"},
new string[] {DateTime.Parse("8/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "3.8"},
new string[] {DateTime.Parse("9/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "3.5"},
new string[] {DateTime.Parse("10/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.0"},
new string[] {DateTime.Parse("11/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.6"}
}
}
,
new {
color = "#5c9ccc",
label = "RA",
data = new List<string[]>() {
new string[] {DateTime.Parse("7/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.2"},
new string[] {DateTime.Parse("8/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.8"},
new string[] {DateTime.Parse("9/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.5"},
new string[] {DateTime.Parse("10/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "1.0"},
new string[] {DateTime.Parse("11/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.4"}
}
}
}
},
JsonRequestBehavior.AllowGet);
I finally got this worked out. Flot does not seem to want to render more than one series with the use of the stack: false option when it is set to false and you are also referencing the jquery.flot.stack.js plugin. Removing the stack attribute in the code below resolved my issue. If you are not referencing the stack plugin, you can keep the stack: false attribute and it will display the additional series properly as well. Hope it helps someone.
The returned JSON was correct.
var data = [];
function onDataReceived(seriesData) {
var options = {
series: {
lines: { show: true, steps: false },
bars: { show: false, barWidth: 0.5, align: 'center', horizontal: true },
points: { show: true, radius: 3, symbol: 'circle' }
},
yaxis: { show: true, tickLength: 0 },
xaxis: { tickSize: [1, "month"], tickLength: 0, mode: 'time', timeformat: '%b %y' },
legend: { show: true, container: $('##(ctlId)chartLegend'), noColumns: 3 },
grid: { borderWidth: 0, hoverable: true, clickable: true }
};
var p = $.plot($('##(ctlId)'), seriesData.seriesData, options);