"Живые" графики нужна помощь.

[Vit]

а где цвет поменять на темный?

[dimik]

а где цвет поменять на темный?

Это взято из примеров.
Нужно после $(function () { добавить вот это:

СпойлерПоказать

Код: Выделить всё

/**
 * Gray theme for Highcharts JS
 * @author Torstein Honsi
 */

Highcharts.theme = {
   colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",
      "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
   chart: {
      backgroundColor: {
         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
         stops: [
            [0, 'rgb(96, 96, 96)'],
            [1, 'rgb(16, 16, 16)']
         ]
      },
      borderWidth: 0,
      borderRadius: 5,
      plotBackgroundColor: null,
      plotShadow: false,
      plotBorderWidth: 0
   },
   title: {
      style: {
         color: '#FFF',
         font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
      }
   },
   subtitle: {
      style: {
         color: '#DDD',
         font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
      }
   },
   xAxis: {
      gridLineWidth: 0,
      lineColor: '#999',
      tickColor: '#999',
      labels: {
         style: {
            color: '#999',
            fontWeight: 'bold'
         }
      },
      title: {
         style: {
            color: '#AAA',
            font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
         }
      }
   },
   yAxis: {
      alternateGridColor: null,
      minorTickInterval: null,
      gridLineColor: 'rgba(255, 255, 255, .1)',
      minorGridLineColor: 'rgba(255,255,255,0.07)',
      lineWidth: 0,
      tickWidth: 0,
      labels: {
         style: {
            color: '#999',
            fontWeight: 'bold'
         }
      },
      title: {
         style: {
            color: '#AAA',
            font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
         }
      }
   },
   legend: {
      itemStyle: {
         color: '#CCC'
      },
      itemHoverStyle: {
         color: '#FFF'
      },
      itemHiddenStyle: {
         color: '#333'
      }
   },
   labels: {
      style: {
         color: '#CCC'
      }
   },
   tooltip: {
      backgroundColor: {
         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
         stops: [
            [0, 'rgba(96, 96, 96, .8)'],
            [1, 'rgba(16, 16, 16, .8)']
         ]
      },
      borderWidth: 0,
      style: {
         color: '#FFF'
      }
   },


   plotOptions: {
      series: {
         nullColor: '#444444'
      },
      line: {
         dataLabels: {
            color: '#CCC'
         },
         marker: {
            lineColor: '#333'
         }
      },
      spline: {
         marker: {
            lineColor: '#333'
         }
      },
      scatter: {
         marker: {
            lineColor: '#333'
         }
      },
      candlestick: {
         lineColor: 'white'
      }
   },

   toolbar: {
      itemStyle: {
         color: '#CCC'
      }
   },

   navigation: {
      buttonOptions: {
         symbolStroke: '#DDDDDD',
         hoverSymbolStroke: '#FFFFFF',
         theme: {
            fill: {
               linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
               stops: [
                  [0.4, '#606060'],
                  [0.6, '#333333']
               ]
            },
            stroke: '#000000'
         }
      }
   },

   // scroll charts
   rangeSelector: {
      buttonTheme: {
         fill: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
         },
         stroke: '#000000',
         style: {
            color: '#CCC',
            fontWeight: 'bold'
         },
         states: {
            hover: {
               fill: {
                  linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                  stops: [
                     [0.4, '#BBB'],
                     [0.6, '#888']
                  ]
               },
               stroke: '#000000',
               style: {
                  color: 'white'
               }
            },
            select: {
               fill: {
                  linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                  stops: [
                     [0.1, '#000'],
                     [0.3, '#333']
                  ]
               },
               stroke: '#000000',
               style: {
                  color: 'yellow'
               }
            }
         }
      },
      inputStyle: {
         backgroundColor: '#333',
         color: 'silver'
      },
      labelStyle: {
         color: 'silver'
      }
   },

   navigator: {
      handles: {
         backgroundColor: '#666',
         borderColor: '#AAA'
      },
      outlineColor: '#CCC',
      maskFill: 'rgba(16, 16, 16, 0.5)',
      series: {
         color: '#7798BF',
         lineColor: '#A6C7ED'
      }
   },

   scrollbar: {
      barBackgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
         },
      barBorderColor: '#CCC',
      buttonArrowColor: '#CCC',
      buttonBackgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
         },
      buttonBorderColor: '#CCC',
      rifleColor: '#FFF',
      trackBackgroundColor: {
         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
         stops: [
            [0, '#000'],
            [1, '#333']
         ]
      },
      trackBorderColor: '#666'
   },

   // special colors for some of the demo examples
   legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
   legendBackgroundColorSolid: 'rgb(70, 70, 70)',
   dataLabelsColor: '#444',
   textColor: '#E0E0E0',
   maskColor: 'rgba(255,255,255,0.3)'
};

// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme); 

Ну и заодно изменить вид графика в seriesOptions на плавный (не нравятся мне эти ломанные линии):
seriesOptions = {
name: name,
data: data,
type: 'spline'
};

[Vit]

попробовал и график куда то съехал и не меняется..

СпойлерПоказать

хотя на белом вроде норм все

СпойлерПоказать

остальное вроде ничего не трогал

[denis]

смотрю я на все эти картинки и понимаю, что не хватает такого кода:

Код: Выделить всё

...
rangeSelector: {
                        buttonSpacing: 2,
                        buttonTheme:{
                        width: 40 // Увеличим ширину кнопки
                        },
                        inputDateFormat: '%d.%m.%Y', // Меняем на привычный для нас формат даты в интервалах
                        inputEditDateFormat: '%d.%m.%Y',
                        enabled: true ,
                        buttons: [   //.... и далее по вкусу, кто как хочет кнопки периодов назвать
                                                {
                        type: 'minute',
                        count: 60,
                        text: '1час'
                        },  ///// 
....
 

[Bagir]

Я пробовал width:
Кнопки действительно растягиваются, и даже смотрятся интересней, но на мобильных устройствах они не помещаются. В лучшем случае наедут на поля "От" "До", в худшем - вообще за экран.
А вот '%d.%m.%Y' действительно нам по привычней будет.
Кто нибудь знает, где выставить ширину линии графика при наведении на него мышкой? По умолчанию она вроде бы =2. График я сделал = 1. И теперь при наведении мышкой видно, как он выделяется. Но больно они тощие получились. Толщина графика есть в коде, а вот примера при наведении на него мышки нету. Найти конечно можно, но если кто знает, напишите.

[denis]

Я пробовал width:
Кнопки действительно растягиваются, и даже смотрятся интересней, но на мобильных устройствах они не помещаются. В лучшем случае наедут на поля "От" "До", в худшем - вообще за экран.
А вот '%d.%m.%Y' действительно нам по привычней будет.
Кто нибудь знает, где выставить ширину линии графика при наведении на него мышкой? По умолчанию она вроде бы =2. График я сделал = 1. И теперь при наведении мышкой видно, как он выделяется. Но больно они тощие получились. Толщина графика есть в коде, а вот примера при наведении на него мышки нету. Найти конечно можно, но если кто знает, напишите.

так вроде вот свойство толщина линии:
http://api.highcharts.com/highstock#plo ... .lineWidth

[Bagir]

Я использую это http://api.highcharts.com/highstock#plo ... .lineWidth
Причем выставляю lineWidth: 1 потому что где то при наведении мышки на линию графика толщина выставлена 2. Но при lineWidth: 1 графики очень тонкие. Хотелось бы выставить 2, а при наведении мышки 3.

[mirsum]

Настроил, работает но не могу понять почему с перерывами данные заносятся, есть пропуски по несколько часов.

[jolionade]

это когда Сергей прикрутил их поддержку, так вот эти файлы разные, в новых там много добавлено


---------------------------------------------------------

chargeur google nexus 6 meilleur

etui bumper samsung Galaxy A5 minigel

[Bagir]

Если на графике пропуски, то либо данных просто нет с базе, либо они не попадают в запрос, либо график их не отрисовывает. Для начала надо убедиться, что данные все же есть в базе. Надо найти пропущенные данные либо в истории, либо в phpmyadmin. Затем надо проверить, попадают ли эти данные в ответ файла jsonp.php, и на что они похожи.