Js Chart doppelt

Screentzz · 12 Dezember 2012

Hallo,

mit folgenden Skript habe ich ein Problem und bin auf eure Hilfe angewiesen.
Wenn ich beide charts

HTML:

<div id="in" style="width: 100%; height: 362px;"></div>
<div id="out" style="width: 100%; height: 362px;"></div>

ausgebe überschreibt die eine die andere und ich habe zwei mal die gleiche chart (Ist vl auch logisch). Dies würde ich gerne verhindern.

Da ich aber ein absoluter Neueinsteiger bin, weiß ich nicht wie.

Code:

     <script src="amcharts.js" type="text/javascript"></script>  
    

        <script type="text/javascript">
        var chart;

var chartData = [{
    country: "{$9_monthly}",
    year2004: {$unq_in_9_monthly},
    year2005: {$tot_in_9_monthly}},
{
    country: "{$8_monthly}",
    year2004: {$unq_in_8_monthly},
    year2005: {$tot_in_8_monthly}},
{
    country: "{$7_monthly}",
    year2004: {$unq_in_7_monthly},
    year2005: {$tot_in_7_monthly}},
{
    country: "{$6_monthly}",
    year2004: {$unq_in_6_monthly},
    year2005: {$tot_in_6_monthly}},
{
    country: "{$5_monthly}",
    year2004: {$unq_in_5_monthly},
    year2005: {$tot_in_5_monthly}},
{
    country: "{$4_monthly}",
    year2004: {$unq_in_4_monthly},
    year2005: {$tot_in_4_monthly}},
{
    country: "{$3_monthly}",
    year2004: {$unq_in_3_monthly},
    year2005: {$tot_in_3_monthly}},
{
    country: "{$2_monthly}",
    year2004: {$unq_in_2_monthly},
    year2005: {$tot_in_2_monthly}},
{
    country: "{$1_monthly}",
    year2004: {$unq_in_1_monthly},
    year2005: {$tot_in_1_monthly}},
{
    country: "{$0_monthly}",
    year2004: {$unq_in_0_monthly},
    year2005: {$tot_in_0_monthly}}];


AmCharts.ready(function() {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "country";
    chart.fontSize = 14;
    chart.startDuration = 1;
    chart.plotAreaFillAlphas = 0.2;
    // the following two lines makes chart 3D
    chart.angle = 30;
    chart.depth3D = 40;

    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.gridAlpha = 0.2;
    categoryAxis.gridPosition = "start";
    categoryAxis.axisColor = "#DADADA";
    categoryAxis.axisAlpha = 1;
    categoryAxis.dashLength = 5;

    // value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.stackType = "3d"; // This line makes chart 3D stacked (columns are placed one behind another)
    valueAxis.gridAlpha = 0.2;
    valueAxis.axisColor = "#93357e";
    valueAxis.axisAlpha = 1;
    valueAxis.dashLength = 5;
    valueAxis.unit = "";
    chart.addValueAxis(valueAxis);

    // GRAPHS         
    // first graph
    var graph1 = new AmCharts.AmGraph();
    graph1.title = "2004";
    graph1.valueField = "year2004";
    graph1.type = "column";
    graph1.lineAlpha = 0;
    graph1.lineColor = "#93357e";
    graph1.fillAlphas = 1;
    graph1.balloonText = "Hit In Besucher [[category]] (2012): [[value]]";
    chart.addGraph(graph1);

    // second graph
    var graph2 = new AmCharts.AmGraph();
    graph2.title = "2005";
    graph2.valueField = "year2005";
    graph2.type = "column";
    graph2.lineAlpha = 0;
    graph2.lineColor = "#61114f";
    graph2.fillAlphas = 1;
    graph2.balloonText = "Hits In Gesamt [[category]] (2012): [[value]]";
    chart.addGraph(graph2);

    chart.write("in");
});
</script>


           <script type="text/javascript">
        var chart;

var chartData = [{
    country: "{$9_monthly}",
    year2004: {$unq_out_9_monthly},
    year2005: {$tot_out_9_monthly}},
{
    country: "{$8_monthly}",
    year2004: {$unq_out_8_monthly},
    year2005: {$tot_out_8_monthly}},
{
    country: "{$7_monthly}",
    year2004: {$unq_out_7_monthly},
    year2005: {$tot_out_7_monthly}},
{
    country: "{$6_monthly}",
    year2004: {$unq_out_6_monthly},
    year2005: {$tot_out_6_monthly}},
{
    country: "{$5_monthly}",
    year2004: {$unq_out_5_monthly},
    year2005: {$tot_out_5_monthly}},
{
    country: "{$4_monthly}",
    year2004: {$unq_out_4_monthly},
    year2005: {$tot_out_4_monthly}},
{
    country: "{$3_monthly}",
    year2004: {$unq_out_3_monthly},
    year2005: {$tot_out_3_monthly}},
{
    country: "{$2_monthly}",
    year2004: {$unq_out_2_monthly},
    year2005: {$tot_out_2_monthly}},
{
    country: "{$1_monthly}",
    year2004: {$unq_out_1_monthly},
    year2005: {$tot_out_1_monthly}},
{
    country: "{$0_monthly}",
    year2004: {$unq_out_0_monthly},
    year2005: {$tot_out_0_monthly}}];


AmCharts.ready(function() {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "country";
    chart.fontSize = 14;
    chart.startDuration = 1;
    chart.plotAreaFillAlphas = 0.2;
    // the following two lines makes chart 3D
    chart.angle = 30;
    chart.depth3D = 40;

    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.gridAlpha = 0.2;
    categoryAxis.gridPosition = "start";
    categoryAxis.axisColor = "#DADADA";
    categoryAxis.axisAlpha = 1;
    categoryAxis.dashLength = 5;

    // value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.stackType = "3d"; // This line makes chart 3D stacked (columns are placed one behind another)
    valueAxis.gridAlpha = 0.2;
    valueAxis.axisColor = "#93357e";
    valueAxis.axisAlpha = 1;
    valueAxis.dashLength = 5;
    valueAxis.unit = "";
    chart.addValueAxis(valueAxis);

    // GRAPHS         
    // first graph
    var graph1 = new AmCharts.AmGraph();
    graph1.title = "2004";
    graph1.valueField = "year2004";
    graph1.type = "column";
    graph1.lineAlpha = 0;
    graph1.lineColor = "#93357e";
    graph1.fillAlphas = 1;
    graph1.balloonText = "Hit In Besucher [[category]] (2012): [[value]]";
    chart.addGraph(graph1);

    // second graph
    var graph2 = new AmCharts.AmGraph();
    graph2.title = "2005";
    graph2.valueField = "year2005";
    graph2.type = "column";
    graph2.lineAlpha = 0;
    graph2.lineColor = "#61114f";
    graph2.fillAlphas = 1;
    graph2.balloonText = "Hits In Gesamt [[category]] (2012): [[value]]";
    chart.addGraph(graph2);

    chart.write("out");
});
</script>

Tronjer · 12 Dezember 2012

Dein Script macht doch genau, was es soll. Du rufst die Funktion zweimal auf und übergibst das jeweilige Div als Parameter.

Code:

chart.write("in");
chart.write("out");

Screentzz · 12 Dezember 2012

Ne leider nicht.

Ich habe mal ne Testseite hochgeladen. Unbenanntes Dokument

Der gesammte Code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<script type="text/javascript">
var chart;

var chartData = [{
    country: "USA",
    year2004: 3.5,
    year2005: 4.52},
{
    country: "UK",
    year2004: 16.7,
    year2005: 3.1},
{
    country: "Canada",
    year2004: 2.8,
    year2005: 2.59},
{
    country: "Japan",
    year2004: 26.6,
    year2005: 2.3},
{
    country: "France",
    year2004: 16.4,
    year2005: 62.1},
{
    country: "Brazil",
    year2004: 2.56,
    year2005: 4.59},
{
    country: "Russia",
    year2004: 664,
    year2005: 755},
{
    country: "India",
    year2004: 855,
    year2005: 751},
{
    country: "China",
    year2004: 9.9,
    year2005: 10.1}];


AmCharts.ready(function() {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "country";
    chart.fontSize = 14;
    chart.startDuration = 1;
    chart.plotAreaFillAlphas = 0.2;
    // the following two lines makes chart 3D
    chart.angle = 30;
    chart.depth3D = 40;

    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.gridAlpha = 0.2;
    categoryAxis.gridPosition = "start";
    categoryAxis.axisColor = "#DADADA";
    categoryAxis.axisAlpha = 1;
    categoryAxis.dashLength = 5;

    // value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.stackType = "3d"; // This line makes chart 3D stacked (columns are placed one behind another)
    valueAxis.gridAlpha = 0.2;
    valueAxis.axisColor = "#DADADA";
    valueAxis.axisAlpha = 1;
    valueAxis.dashLength = 5;
    valueAxis.unit = "%";
    chart.addValueAxis(valueAxis);

    // GRAPHS         
    // first graph
    var graph1 = new AmCharts.AmGraph();
    graph1.title = "2004";
    graph1.valueField = "year2004";
    graph1.type = "column";
    graph1.lineAlpha = 0;
    graph1.lineColor = "#D2CB00";
    graph1.fillAlphas = 1;
    graph1.balloonText = "GDP grow in [[category]] (2004): [[value]]";
    chart.addGraph(graph1);

    // second graph
    var graph2 = new AmCharts.AmGraph();
    graph2.title = "2005";
    graph2.valueField = "year2005";
    graph2.type = "column";
    graph2.lineAlpha = 0;
    graph2.lineColor = "#BEDF66";
    graph2.fillAlphas = 1;
    graph2.balloonText = "GDP grow in [[category]] (2005): [[value]]";
    chart.addGraph(graph2);

    chart.write("in");
});
</script>

<script type="text/javascript">
var chart;

var chartData = [{
    country: "USA",
    year2004: 555,
    year2005: 55},
{
    country: "UK",
    year2004: 442,
    year2005: 341},
{
    country: "Canada",
    year2004: 2.8,
    year2005: 2.9},
{
    country: "Japan",
    year2004: 2.6,
    year2005: 2.3},
{
    country: "France",
    year2004: 1.4,
    year2005: 2.1},
{
    country: "Brazil",
    year2004: 2.6,
    year2005: 4.9},
{
    country: "Russia",
    year2004: 6.4,
    year2005: 7.2},
{
    country: "India",
    year2004: 8.0,
    year2005: 7.1},
{
    country: "China",
    year2004: 9.9,
    year2005: 10.1}];


AmCharts.ready(function() {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "country";
    chart.fontSize = 14;
    chart.startDuration = 1;
    chart.plotAreaFillAlphas = 0.2;
    // the following two lines makes chart 3D
    chart.angle = 30;
    chart.depth3D = 40;

    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.gridAlpha = 0.2;
    categoryAxis.gridPosition = "start";
    categoryAxis.axisColor = "#DADADA";
    categoryAxis.axisAlpha = 1;
    categoryAxis.dashLength = 5;

    // value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.stackType = "3d"; // This line makes chart 3D stacked (columns are placed one behind another)
    valueAxis.gridAlpha = 0.2;
    valueAxis.axisColor = "#DADADA";
    valueAxis.axisAlpha = 1;
    valueAxis.dashLength = 5;
    valueAxis.unit = "%";
    chart.addValueAxis(valueAxis);

    // GRAPHS         
    // first graph
    var graph1 = new AmCharts.AmGraph();
    graph1.title = "2004";
    graph1.valueField = "year2004";
    graph1.type = "column";
    graph1.lineAlpha = 0;
    graph1.lineColor = "#D2CB00";
    graph1.fillAlphas = 1;
    graph1.balloonText = "GDP grow in [[category]] (2004): [[value]]";
    chart.addGraph(graph1);

    // second graph
    var graph2 = new AmCharts.AmGraph();
    graph2.title = "2005";
    graph2.valueField = "year2005";
    graph2.type = "column";
    graph2.lineAlpha = 0;
    graph2.lineColor = "#BEDF66";
    graph2.fillAlphas = 1;
    graph2.balloonText = "GDP grow in [[category]] (2005): [[value]]";
    chart.addGraph(graph2);

    chart.write("out");
});

</script>
</head>

<body>

<div id="in" style="width: 100%; height: 362px;"></div>
<div id="out" style="width: 100%; height: 362px;"></div>
</body>
</html>

Wie man sieht hat die eine Tabelle ganz andere Werte als die andere. Ändert man Werte an der zweiten, ändern sich beide Tabellen. Wenn etwas an der ersten verändert wird, ändert sich nichts.

Tronjer · 12 Dezember 2012

Screentzz schrieb:
Ne leider nicht.

Wie man sieht hat die eine Tabelle ganz andere Werte als die andere. Ändert man Werte an der zweiten, ändern sich beide Tabellen. Wenn etwas an der ersten verändert wird, ändert sich nichts.

Du erzeugst zwei Objekte mit dem Namen chartData[{}] und das zweite überschreibt dabei das erste. Gib beiden einen unterschiedlichen Namen und passe den Aufruf in den Funktionen an. Dann klappt es auch.

Screentzz · 13 Dezember 2012

*Pacepalm* -.- Danke. Ich hab die ganze Zeit "var chart;" verändert.

Danke

Js Chart doppelt

Screentzz

Neues Mitglied

Tronjer

Senior HTML'ler

Screentzz

Neues Mitglied

Tronjer

Senior HTML'ler

Screentzz

Neues Mitglied

Neueste Beiträge