0

Всем привет, имеется график на хайтчарте в котором график строит диаграмму на основе данных mysql, и все было прекрасно пока я не решил добавить вывод даты по оси Х, с тех пор уже неделю не могу разобратся с переводом форматы даты с php на javascript.Абсолютно все удалось реализовать что требовалось кроме етого, прошу помочь

require 'connect.php';

$SQL1 =     "select * from `cena` left join `cnc` on `cena`.`cher` = `cnc`.`detal` left join `chertesh` on `cnc`.`detal`=`chertesh`.`id` left join `smena` on cnc.smena = `smena`.`s_id` WHERE `cena`.`operaciya` = `cnc`.`operaciya`  and (cher = $detal)    limit 1";

$result4 = mysql_query($SQL1);
$data4 = array();
while ($row = mysql_fetch_array($result4)) {
   $ch[] = $row['ch'];
}
?>

<!1 операция >
<?php
require 'connect.php';

$SQL1 =     "select * from `cena` left join `cnc` on `cena`.`cher` = `cnc`.`detal` left join `chertesh` on `cnc`.`detal`=`chertesh`.`id` left join `smena` on cnc.smena = `smena`.`s_id` WHERE `cena`.`operaciya` = `cnc`.`operaciya`  and (cher = $detal) and `cnc`.`operaciya`= 1 and  MONTH(`date`) = MONTH(NOW()) AND YEAR(`date`) = YEAR(NOW()) order by date";

$result1op = mysql_query($SQL1);
$data1op = array();
while ($row = mysql_fetch_array($result1op)) {
   $col1op[] = $row['colvodetal'];
}

$result1op = mysql_query($SQL1);
$data1op = array();
while ($row = mysql_fetch_array($result1op)) {
   $brak1op[] = $row['brakop']+ $row['brakotk'];
}

$SQL1date =     "select  UNIX_TIMESTAMP(date) as `date` from `cena` left join `cnc` on `cena`.`cher` = `cnc`.`detal` left join `chertesh` on `cnc`.`detal`=`chertesh`.`id` left join `smena` on cnc.smena = `smena`.`s_id` WHERE `cena`.`operaciya` = `cnc`.`operaciya`  and (cher = $detal) and `cnc`.`operaciya`= 1 and  MONTH(`date`) = MONTH(NOW()) AND YEAR(`date`) = YEAR(NOW()) order by date";
$result1op = mysql_query($SQL1date);
$data1op = array();
while ($row = mysql_fetch_array($result1op)) {
   $date1op[] = $row['date'];;

} 

$SQL1ch =     "select cnc.detal, sum(colvodetal), cnc.operaciya, cena.translate, chertesh.ch from `cena` left join `cnc` on `cena`.`cher` = `cnc`.`detal` left join `chertesh` on `cnc`.`detal`=`chertesh`.`id` left join `smena` on cnc.smena = `smena`.`s_id` WHERE `cena`.`operaciya` = `cnc`.`operaciya`  and (cher = $detal) and `cnc`.`operaciya`= 1 and  MONTH(`date`) = MONTH(NOW()) AND YEAR(`date`) = YEAR(NOW()) limit 1";
$result1op = mysql_query($SQL1ch);
$sum1op = array();
while ($row = mysql_fetch_array($result1op)) {
   $translate1op[] = $row['translate'];
   $sum1op[] = $row['sum(colvodetal)'];
}

?>

и код самого хайчарта

<!1 операция >
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">

Highcharts.chart('container', {

    title: {
        text: '<?php echo join($ch, ','); ?>'
    },
        chart: {
        scrollablePlotArea: {
            minWidth: 700
        }
    },
    subtitle: {
        text: '<?php echo join($translate1op, ','); ?> <?php echo join( $sum1op, ','); ?>шт.'
    },
 xAxis: {
     type: 'datetime',
    data: [<?php echo join($date1op, ',') ?>],
    labels: {
        formatter: function() {
              return Highcharts.dateFormat('%a %d %b', this.value);
         }


},

   },

    series: [{
        name: `Сделано`,
        data: [<?php echo join($col1op, ','); ?>]
    }, {
        name: 'Брак',
        data: [<?php echo join($brak1op, ','); ?>]
    },],
  yAxis: [{
        title: {
            text: null
        },
        labels: {
            align: 'left',
            x: 3,
            y: 16,
            format: '{value:.,0f}'
        },
        showFirstLabel: false
    }, { 
        linkedTo: 0,
        gridLineWidth: 0,
        opposite: true,
        title: {
            text: null
        },
        labels: {
            align: 'right',
            x: -3,
            y: 16,
            format: '{value:.,0f}'
        },
        showFirstLabel: false
    }],

    legend: {
        align: 'left',
        verticalAlign: 'top',
        borderWidth: 0
    },

    tooltip: {
        shared: true,
        crosshairs: true
    },



    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});
    </script>
<script type="text/javascript">

Highcharts.chart('container', {

    title: {
        text: 'Вал ЗД2.003Д.'
    },
        chart: {
        scrollablePlotArea: {
            minWidth: 700
        }
    },
    subtitle: {
        text: '1 токарная 1287шт.'
    },
 xAxis: {
     type: 'datetime',
    data: [1569888000,1569888000,1569974400,1570579200,1570665600,1570665600,1570752000,1570752000,1570838400,1570838400,1570924800,1570924800,1571011200,1571011200,1571097600],
    labels: {
        formatter: function() {
              return Highcharts.dateFormat('%a %d %b', this.value);
         }


},

   },

    series: [{
        name: `Сделано`,
        data: [116,110,25,20,73,102,100,102,108,80,61,108,70,110,102]
    }, {
        name: 'Брак',
        data: [0,0,0,0,4,0,0,0,0,0,0,0,0,0,0]
    },],
  yAxis: [{ // left y axis
        title: {
            text: null
        },
        labels: {
            align: 'left',
            x: 3,
            y: 16,
            format: '{value:.,0f}'
        },
        showFirstLabel: false
    }, { // right y axis
        linkedTo: 0,
        gridLineWidth: 0,
        opposite: true,
        title: {
            text: null
        },
        labels: {
            align: 'right',
            x: -3,
            y: 16,
            format: '{value:.,0f}'
        },
        showFirstLabel: false
    }],

    legend: {
        align: 'left',
        verticalAlign: 'top',
        borderWidth: 0
    },

    tooltip: {
        shared: true,
        crosshairs: true
    },



    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});
    </script>
```````
6
  • приведите сгенерированный код js. У вас там в series.data непонятно что будет, ожидаются то пары значения x,y где будет дата (timestamp) и значения. а вы почему то сливаете какой то массив в строку. Про json_encode вы вообще слышали?
    – teran
    16 окт 2019 в 12:32
  • пхп ваш тоже сомнителен весьма, даже закрывая глаза на архаичные mysql_* вызовы. Зачем вы, например, 2 раза выполняете запрос $sql1 и два раза итерируете его, одного раза не достаточно разве? как эти запросы в одну строку вообще можно прочитать?
    – teran
    16 окт 2019 в 12:35
  • @teran каюсь, код совсем не идеален, но задача в другом на данный момент.Как только разберусь с выводом даты буду править код
    – freakrock
    16 окт 2019 в 12:38
  • вставьте код текстом, а еще лучше сделайте сниппет, подключив все библиотеки хайчарта. И повторюсь, почему вы решили, что в xAxis можно добавить поле data вписав туда метки времени, а в series.data передать только y-значения?
    – teran
    16 окт 2019 в 12:50
  • @teran Как не странно но так мне подсказала интуиция) до данного момента не имел дела с хайчартом
    – freakrock
    16 окт 2019 в 14:25

1 ответ 1

0

В целом @teran был абсолютно прав все решилось чтением документации, дату через UNIX_TIMESTAMP(date) взял из mysql и в самом скрипте все данные упорядочил по сериям в чем собственно и была ошибка. Рабочий скрипт теперь выглядет вот так, не отличный но и не ужасный


Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: '<?php echo join($ch, ','); ?>'
    },
    subtitle: {
        text: '<?php echo join($translate1op, ','); ?> <?php echo join( $sum1op, ','); ?>шт.'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { 
            month: '%e. %b',
            year: '%b'
        },
        title: {
            text: 'Дата'
        }
    },
    yAxis: {
        title: {
            text: 'Количество (шт.)'
        },
        min: 0
    },
   tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
    },

     plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },

    colors: ['#6CF', '#f7a35c', '#06C', '#036', '#000'],
    series: [{
        name: "Годная продукция",
        data: 
            [<?php echo join($operaciya1, ',') ?>]

    }, {
        name: "Брак",
        data: [<?php echo join($operaciya1br, ',') ?>]
    },],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                plotOptions: {
                    series: {
                        marker: {
                            radius: 2.5
                        }
                    }
                }
            }
        }]
    }
});
    </script>

введите сюда описание изображения

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.