hogs68

Looking to figure out how to load CSV data for this chart format

resource
//www.amcharts.com/lib/3/amcharts.js
//www.amcharts.com/lib/3/serial.js
//www.amcharts.com/lib/3/amstock.js

java script

var $CHART$_1 = [];
var $CHART$_2 = [];
var $CHART$_3 = [];
var $CHART$_4 = [];

generateChartData();

function generateChartData() {
var firstDate = new Date();
firstDate.setDate( firstDate.getDate() – 500 );
firstDate.setHours( 0, 0, 0, 0 );

for ( var i = 0; i < 500; i++ ) {
var newDate = new Date( firstDate );
newDate.setDate( newDate.getDate() + i );

var a1 = Math.round( Math.random() * ( 40 + i ) ) + 100 + i;
var b1 = Math.round( Math.random() * ( 1000 + i ) ) + 500 + i * 2;

var a2 = Math.round( Math.random() * ( 100 + i ) ) + 200 + i;
var b2 = Math.round( Math.random() * ( 1000 + i ) ) + 600 + i * 2;

var a3 = Math.round( Math.random() * ( 100 + i ) ) + 200;
var b3 = Math.round( Math.random() * ( 1000 + i ) ) + 600 + i * 2;

var a4 = Math.round( Math.random() * ( 100 + i ) ) + 200 + i;
var b4 = Math.round( Math.random() * ( 100 + i ) ) + 600 + i;

$CHART$_1.push( {
date: newDate,
value: a1,
volume: b1
} );
$CHART$_2.push( {
date: newDate,
value: a2,
volume: b2
} );
$CHART$_3.push( {
date: newDate,
value: a3,
volume: b3
} );
$CHART$_4.push( {
date: newDate,
value: a4,
volume: b4
} );
}
}

AmCharts.makeChart( “$CHART$”, {
type: “stock”,

dataSets: [ {
title: “first data set”,
fieldMappings: [ {
fromField: “value”,
toField: “value”
}, {
fromField: “volume”,
toField: “volume”
} ],
dataProvider: $CHART$_1,
categoryField: “date”
},

{
title: “second data set”,
fieldMappings: [ {
fromField: “value”,
toField: “value”
}, {
fromField: “volume”,
toField: “volume”
} ],
dataProvider: $CHART$_2,
categoryField: “date”
},

{
title: “third data set”,
fieldMappings: [ {
fromField: “value”,
toField: “value”
}, {
fromField: “volume”,
toField: “volume”
} ],
dataProvider: $CHART$_3,
categoryField: “date”
},

{
title: “fourth data set”,
fieldMappings: [ {
fromField: “value”,
toField: “value”
}, {
fromField: “volume”,
toField: “volume”
} ],
dataProvider: $CHART$_4,
categoryField: “date”
}
],

panels: [ {

showCategoryAxis: false,
title: “Value”,
percentHeight: 70,

stockGraphs: [ {
id: “g1”,

valueField: “value”,
comparable: true,
compareField: “value”,
balloonText: “title:<b>value</b>”,
compareGraphBalloonText: “title:<b>value</b>”
} ],

stockLegend: {
periodValueTextComparing: “[[percents.value.close]]%”,
periodValueTextRegular: “[[value.close]]”
}
},

{
title: “Volume”,
percentHeight: 30,
stockGraphs: [ {
valueField: “volume”,
type: “column”,
showBalloon: false,
fillAlphas: 1
} ],

stockLegend: {
periodValueTextRegular: “[[value.close]]”
}
}
],

chartScrollbarSettings: {
graph: “g1”
},

chartCursorSettings: {
valueBalloonsEnabled: true
},

periodSelector: {
position: “left”,
periods: [ {
period: “MM”,
selected: true,
count: 1,
label: “1 month”
}, {
period: “YYYY”,
count: 1,
label: “1 year”
}, {
period: “YTD”,
label: “YTD”
}, {
period: “MAX”,
label: “MAX”
} ]
},

dataSetSelector: {
position: “left”
}
} );

I have to add another field of data to this chart tow have 2 values and can’t figure it out.

Also this is only example i could fined to work with csv data for this type of chart. Looking for SQL example and example of other charts that would work with wordpress amcharts plugin.

var chart;
var chartData = [];
var chartCursor;

AmCharts.ready(function() {

// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = “amcharts/images/”;
chart.dataProvider = chartData;
chart.categoryField = “date”;
chart.dataDateFormat = “YYYY-MM-DD”;

// listen for “dataUpdated” event (fired when chart is rendered) and call zoomChart method when it happens
chart.addListener(“dataUpdated”, zoomChart);

// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = “DD”; // our data is daily, so we set minPeriod to DD
categoryAxis.dashLength = 1;
categoryAxis.gridAlpha = 0.15;
categoryAxis.minorGridEnabled = true;
categoryAxis.axisColor = “#DADADA”;

// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0.2;
valueAxis.dashLength = 1;
chart.addValueAxis(valueAxis);

// GRAPH
var graph = new AmCharts.AmGraph();
graph.title = “red line”;
graph.valueField = “visits”;
graph.bullet = “round”;
graph.bulletBorderColor = “#FFFFFF”;
graph.bulletBorderThickness = 2;
graph.bulletBorderAlpha = 1;
graph.lineThickness = 2;
graph.lineColor = “#b5030d”;
graph.negativeLineColor = “#0352b5”;
graph.balloonText = “category
<b><span style=’font-size:14px;’>value: value</span></b>”;
graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
chart.addGraph(graph);

// CURSOR
chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = “mouse”;
chart.addChartCursor(chartCursor);

// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chartScrollbar.graph = graph;
chartScrollbar.scrollbarHeight = 40;
chartScrollbar.color = “#FFFFFF”;
chartScrollbar.autoGridCount = true;
chart.addChartScrollbar(chartScrollbar);

// WRITE
chart.write(“chartdiv”);

loadCSV(“data.txt”);
});

function loadCSV(file) {
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
} else {
// code for IE6, IE5
var request = new ActiveXObject(‘Microsoft.XMLHTTP’);
}
// load
request.open(‘GET’, file, false);
request.send();
parseCSV(request.responseText);
}

function parseCSV(data) {
//replace UNIX new lines
data = data.replace(/\r\n/g, “\n”);
//replace MAC new lines
data = data.replace(/\r/g, “\n”);
//split into rows
var rows = data.split(“\n”);

// loop through all rows
for (var i = 0; i < rows.length; i++) {
// this line helps to skip empty rows
if (rows[i]) {
// our columns are separated by comma
var column = rows[i].split(“,”);

// column is array now
// first item is date
var date = column[0];
// second item is value of the second column
var value = column[1];

// create object which contains all these items:
var dataObject = {
date: date,
visits: value
};
// add object to chartData array
chartData.push(dataObject);
}
}
chart.validateData();
}

// this method is called when chart is first inited as we listen for “dataUpdated” event
function zoomChart() {
// different zoom methods can be used – zoomToIndexes, zoomToDates, zoomToCategoryValues
chart.zoomToIndexes(chartData.length – 40, chartData.length – 1);
}

// changes cursor mode from pan to select
function setPanSelect() {
if (document.getElementById(“rb1”).checked) {
chartCursor.pan = false;
chartCursor.zoomable = true;

} else {
chartCursor.pan = true;
}
chart.validateNow();
}